html5最简单音乐播放器

最新推荐文章于 2024-04-09 14:05:15 发布

Jos1n

最新推荐文章于 2024-04-09 14:05:15 发布

阅读量4.7k

点赞数 2

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/Jos1n/article/details/75304093

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>音乐播放器</title>
    <script>
        var music = [
            "Always - T[尹美莱].wav.mp3",
            "Aoa - 猫步轻悄(Like A Cat).mp3",
            "Aoa - 短裙.mp3",
            "Bye Bye Sea - 星光瀑布.mp3",
            "EXO-K - MAMA - 2012Mnet M!CountDown现场.mp3"
        ];

        var index = 0;
        var playtype;

        window.onload = function ()
        {
            var typesel = document.getElementById("typesel");
            typesel.onchange = function ()
            {
                window.playtype = typesel.value;//获取下拉菜单的值
            }

            var player = document.getElementById("player");
            player.src = music[index];   //指定播放器播放哪个音乐
            player.onended = function ()  //当前音乐结束后执行
            {
                if (playtype == "random")
                {
                    index = Math.floor(Math.random() * music.length);
                    player.src = music[index];
                }
                else
                {
                    player.src = music[++index % music.length];
                }
                player.play();
            }
        }
    </script>
</head>
<body>
    <select id="typesel">
        <option value="sequence">顺序播放</option>
        <option value="random">随机播放</option>
    </select><br />
    <audio id="player" style="width:500px" controls>不能播放</audio>
</body>
</html>

Jos1n

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
html5最简单音乐播放器

音乐播放器 var music = [ "Always - T[尹美莱].wav.mp3", "Aoa - 猫步轻悄(Like A Cat).mp3", "Aoa - 短裙.mp3", "Bye Bye Sea - 星光瀑布.mp3", "EXO-K -
复制链接

扫一扫