获取音频时长

最新推荐文章于 2024-01-24 16:09:02 发布

ONEGISER(ZPC)

最新推荐文章于 2024-01-24 16:09:02 发布

阅读量368

点赞数

分类专栏： WEB软件开发文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_19689967/article/details/120271122

版权

WEB软件开发专栏收录该内容

18 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用HTML5的Audio API获取在线音频和通过文件输入控件上传的音频的时长。在第一部分中，通过监听'canplay'事件获取在线音频的时长；第二部分中，利用FileReader读取上传文件并创建Audio对象来获取时长。

摘要由CSDN通过智能技术生成

获取在线音频时长

<!DOCTYPE HTML>
<html>
<body>
	<audio id="test" 			  src="https://img.houzi8.com/tc_tts_audio/2021/09/13/87ecb94de427fc10a273262780dad4da.mp3" 	controls="controls">
Your browser does not support the audio element.
</audio>
<script>
	const audio=document.getElementById("test")
	audio.oncanplay = function () {  
   		console.log(audio.duration);      
	}
</script>
</body>
</html>

获取上传控件音频时长

<!DOCTYPE HTML>
<html>
<body>
<input type="file" id="input"/>
Your browser does not support the audio element.
</audio>
<script>
    const input=document.getElementById("input")  
    input.onchange=(e)=>{
      	const file = e.target.files[0];
     	const reader = new FileReader();
     	reader.onload = function () {
      		const audio=new Audio()
    		audio.src=reader.result;
    		audio.oncanplay = function () {  
   				console.log(audi.duration);      
			}
		}                     
		reader.readAsDataURL(file);
    };
</script>
</body>
</html>