巧用 HTML5 audio 打印文件夹下mp3文件的长度列表

最新推荐文章于 2021-07-14 11:19:21 发布

爱知菜

最新推荐文章于 2021-07-14 11:19:21 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：杂类 Javascript

本文链接：https://blog.youkuaiyun.com/rav009/article/details/9988109

杂类同时被 2 个专栏收录

80 篇文章

订阅专栏

Javascript

9 篇文章

订阅专栏

本文介绍了一种通过网页交互实现MP3文件自动播放的方法，包括文件路径输入、专辑序号设定以及播放数量控制，同时提供了播放时长的实时显示功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意 mp3 文件名必须是专辑序号-1.mp3,专辑序号-2.mp3,专辑序号-3.mp3,专辑序号-4.mp3....的格式

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
var trackno=''
var i=1
var path='';
var id='';
var num='';
var player="";
function startgetlen()
{
	path=document.getElementById("path").value+"/";
	id=document.getElementById("id").value;
	num=document.getElementById("num").value;
	player=document.getElementById("player");
	
	trackno=id+'-'+i
	player.src=path+trackno+".mp3"
    player.load()
    window.setTimeout("task()",1000)    	
}

function task()
{
	adddata(trackno,player.duration)
	i=i+1
	if(i>num)
	{
		return
	}
	trackno=id+'-'+i
	player.src=path+trackno+".mp3"
    player.load()
    
    window.setTimeout("task()",1000)
}


function adddata(trackno,len)
{
	intlen=Math.round(len*1000)
    var r= document.getElementById("result")
    r.innerHTML+=(trackno+"  "+intlen+"<br />")
    //r.innerHTML+=(trackno+"\t"+intlen+"<br />")
}


</script>
</head>
<body>

<audio id="player" controls="controls" preload="auto" > 
	<!--<source src="D:/723-1.mp3" type="audio/mp3">-->
</audio>
<br />

请输入mp3文件夹地址<input id="path" type="text" />
<br />
请输入mp3专辑序号<input id="id" type="text" />
<br />
请输入mp3数量<input id="num" type="text" />
<br />

<input type="button" onclick="startgetlen()" value="输入完成" />

<div id ="result"></div>

</body>
</html>