使用H5audio特性实现简单的音乐播放器

最新推荐文章于 2025-04-28 09:04:25 发布

19年，重新开始写

最新推荐文章于 2025-04-28 09:04:25 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5+css3 文章标签： audio 音乐

本文链接：https://blog.csdn.net/qq_27905183/article/details/53070010

html5+css3 专栏收录该内容

50 篇文章

订阅专栏

本文详细介绍了如何利用HTML5的audio元素构建一个基本的音乐播放器。内容包括audio标签的属性设置、事件监听、控制播放暂停、音量调节等功能的实现，帮助开发者掌握H5audio在网页音乐播放中的应用。

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

<!Doctype html>
<html>
    <head>
        <title>成兮音乐浏览器</title>
        <meta http-equiv="Keywords" content="music" />
        <meta http-equiv="author" content="chengxi" />
        <style>
            #mysele{
                width: 150px ;
            }
        </style>
        <script>
            //定义属于window的全局变量
            var musics = [
                "D://music/告白气球.mp3" ,
                "D://music/轩辕剑.mp3" ,
                "D://music/守婚如玉.mp3" ,
            ] ;
            //记录当前播放的音乐所处的musics索引
            var index = 0 ;
            //记录选择的播放方式，默认为sequence顺序播放
            var playtype = "sequence" ;
            window.onload = function() {
                var typesele = document.getElementById("mysele") ;
                //select下拉列表的值改变时触发该事件
                typesele.onchange = function() {
                    window.playtype = typesele.value ;
                } ;
                var player = document.getElementById("easyaudio") ;
                player.src = musics[index] ;
                //当前音乐播放完成后触发该事件
                player.onended = function() {
                    //随机播放
                    if(playtype == "random") {
                        //生成一个随机数
                        index = Math.floor(Math.random() * musics.length) ;
                    }
                    //顺序播放
                    else if(playtype == "sequence") {
                        index = index++ % musics.length ;
                    }
                    //单曲循环则最终index不变
                    player.src = musics[index] ;
                    //改变完成后自动播放
                    player.play() ;
                } ;
            } ;
    </head>
    <body>
        <select id="mysele">
            <option value="sequence" selected>顺序播放</option>
            <option value="random">随机播放</option>
            <option value="loop">单曲循环</option>
        </select>
        <audio id="easyaudio" controls>
            您的浏览器不支持audio元素
        </audio>
    </body>
</html>