简单html音乐播放器

最新推荐文章于 2024-04-08 13:08:36 发布

LmbdInf

最新推荐文章于 2024-04-08 13:08:36 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：代码

本文链接：https://blog.youkuaiyun.com/LDZ1943/article/details/45441229

代码专栏收录该内容

24 篇文章

订阅专栏

html5 AudioPlayer

使用方法：

将此文件放在音乐文件目录，多选文件，点击播放。

<span style="font-family:Courier New;font-size:14px;"><!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>html5 audio</title>
        <script src="jquery-2.1.3.min.js">
            
        </script>
    </head>
    <body>
        <input type=file id="file" multiple="multiple" onchange="handerFiles(this.files)"></input>
        <audio controls id="audio" src=""> </audio>
        <ol id="playlist">
            
        </ol>
    </body>
    <script>
        function handerFiles(files)
        {
            var playlist=document.getElementById("playlist");
            for(var i=0;i<files.length;i++){
                var li=document.createElement("li");
                li.innerHTML=files[i].name;
                playlist.appendChild(li);
            }
            $("li").click(function(){
                var audio=document.getElementById("audio");
                //选择相对路径下的mp3文件播放
                audio.src=this.innerHTML;
            });


        }
    </script>
</html>
</span>