大佬教程收集整理的这篇文章主要介绍了如何将文件加载到html5音频标记中,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<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>
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>
以上是大佬教程为你收集整理的如何将文件加载到html5音频标记中全部内容,希望文章能够帮你解决如何将文件加载到html5音频标记中所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。