Question

How would a I load a audio file from a <input type="file"> tag into a audio tag? I have tried :

<input type="file" id="file"></input>
<script>
var file = document.getElementById("file");
var audio = document.createElement("audio");
audio.src = file.value;
document.write(audio)
</script>

Answer 1

我相信它会满足您的需求。首先，文件输入需要通过JavaScript或jQuery绑定（如果您愿意）。您可以使用Blob ^{browser support}

以下是一个非常基本的例子;

<input type="file" id="file"></input>
<audio id="audio" controls autoplay></audio>

我们使用#file绑定AddEventListener以进行更改，如下所示

// Check for BlobURL support
var blob = window.URL || window.webkitURL;
    if (!blob) {
        console.log('Your browser does not support Blob URLs :(');
        return;           
    }

document.getElementById('file').addEventListener('change', function(event){

        consolePrint('change on input#file triggered');
        var file = this.files[0],
         fileURL = blob.createObjectURL(file);
        console.log(file);
        console.log('File name: '+file.name);
        console.log('File type: '+file.type);
        console.log('File BlobURL: '+ fileURL);
        document.getElementById('audio').src = fileURL;

});

或者另一方面，这是我创建的nice and more interactive example

＆＃13;

<iframe style="height:600px;width:102.7%;margin:-10px;overflow:hidden;" src="//jsfiddle.net/adamazad/0oy5moph/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

＆＃13;

Answer 2

＆＃13;

    var wrap = document.getElementById("wrap");
    var file = document.getElementById("file");
    var audio = document.createElement("audio");
    file.onchange = function() {
        audio.src = file.value;
        wrap.appendChild(audio);
    };

＆＃13;

<div id="wrap">
    <input type="file" id="file">
</div>

＆＃13;

这是实现思路，但这也无法实现，因为上传的网址不是本地网址，你可以在评论栏中与我讨论

How to load a file into a html5 audio tag

2 个答案: