很实用的本地web网页播放器

今天弄的一个基于web的本地mp3文件播放器!~ 觉得挺有意思的,本来是打算好好的弄好的,但是因为今天时间比较紧张,以及在是写代码的时候遇到了一些难题,现在都还没解决好的!~

现在把我已经弄好的代码给大家分享一下。

输入代码:

———————————————————————————————

<!DOCTYPE HTML> <html> <head> <title>html5的实际应用—简单的web本地播放器</title> <meta charset=”UTF-8″> <style type=”text/css”> header{ width:800px; height:100px; border:1px solid red; margin:0 auto; text-align:center; } footer{ width:800px; height:50px; border:1px solid red; margin:0 auto; text-align:center; line-height:50px; font-size:30px; } #main{ height:620px; width:800px; border-left:1px solid red; border-right:1px solid red; margin:0 auto; } #main #left{ width:300px; height:620px; border-right:1px solid red; display:block; float:left; } #main #right{ width:499px; height:620px; float:left; } hr{ border-top:1px solid green; } ol{ height:420px; } ol li{ height:20px; margin-top:1px; color:green; text-decoration: underline;

} h3{ height:50px; line-height:30px; } h3 audio{ height:50px; width:500px; line-height:30px; } #play{ height:30px; width:500px; line-height:30px; } </style> <script type=”text/javascript”> function play(music){ var audio=$(“play”); audio.src=music.title; audio.play(); }

function $(id){ return document.getElementById(id); }

function getMusic(){ var files=$(“files”); var file=null; var filess=files.value.split(“\\”); var myString=”F:\\音乐\\KuGou\\“; //这是比较纠结的,因为路径的问题,需要手工设置 // for(var i=0;i<(filess.length-1);i++){ // myString+=filess[i]; // myString+=”\\”; // } for(var j=0;j<files.files.length;j++){ var file=files.files[j]; var type=file.type; if(type==”audio/mpeg”||type==”audio/mp3″){ var myFiles=$(“files”); var myName=(file.name).split(“.”)[0]; myValue=myString+myName+”.krc”; myFiles.value=myValue; var li=document.createElement(“li”); li.onclick=function(){ var audio=$(“play”); audio.src=this.title; audio.play(); }; li.title=myString+file.name; li.innerHTML=file.name.substring(0,20); var ol=$(“ol”); ol.appendChild(li); } } } function removeMusic(){ var ol=$(“ol”); var lis=ol.childNodes; for(var i=lis.length-1;i>=0;i–){ ol.removeChild(lis[i]); } } function setValue(file){ //alert(file.value); } </script> </head> <body> <header><h1 style=”color:green;”>最最无聊的网页音乐播放器</h1> html5的在线播放器,最先进的技术,不一样的体验!~值得拥有。。。(最好一次播放20首)</header> <section id=”main”> <article id=”left”> <h3>音乐列表</h3> <hr/> 添加歌曲:<br/> <input type=”file” id=”files” value=”sd” multiple size=”15″ onchange=”setValue(this);”/> <input type=”submit” value=”添加” onclick=”getMusic();”/> <input type=”submit” value=”清空” onclick=”removeMusic();”/> <hr/> <ol id=”ol”>

</ol> </article> <article id=”right”> <h3 align=”center”> <audio id=’play’ controls=’controls’> <source src=’F:\音乐\KuGou\beiguo.mp3′ type=’audio/mpeg’> 三稳友情提示,你的浏览器不支持html5的audio标签. . </audio> </h3> <hr/> <h3 align=”center”>歌词显示</h3> <hr/> </article> </section> <footer>欢迎来到<a href=”http://www.yugaga.com”><font color=”red”>娱嘎嘎</font></a>的世界</footer> </body> </html>

———————————————————————————————————————

效果截图:

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/musicl1.htm

共有 0 条评论

Top