我将如何从< input type =“file”>加载音频文件?标记成音频标签?
我试过了 :
我试过了 :
<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>
解决方法
我相信它会满足您的需求.首先,文件输入需要通过JavaScript或jQuery绑定(如果您愿意).您可以使用
Blob
browser support
以下是一个非常基本的例子;
<input type="file" id="file"></input> <audio id="audio" controls autoplay></audio>
我们使用AddEventListener绑定#file以进行更改,如下所示
// 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
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。