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

Posted on 2013-08-15 18:25:00

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

注意 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>