音乐自动切换和轮播

最新推荐文章于 2021-05-31 00:43:08 发布

原创最新推荐文章于 2021-05-31 00:43:08 发布 · 808 阅读

1 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请注明出处。

文章标签：

#音乐 #video

前端专栏收录该内容

72 篇文章

订阅专栏

本文分享了如何实现音乐自动切换并在所有歌曲播放完成后进行循环播放的效果。通过修改video元素的src属性，达到节省资源的目的。

前言：前两天有个同学问我音乐自动切换，并在所有歌曲都播放完成以后实现循环播放的效果。自己折腾了一下做了出来，今天整理桌面的时候突然看见，在拖到回收站的一瞬间想着还是写一篇博客分享一下。实现的方法有很多种，我这里简单的实现。

1、通过修改video的src（这种应该是最好节省资源的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>welcome</title>
    <style type="text/css">
        .content {
            width: 600px;
            margin:0 auto;
            border:1px solid red;
        }
        .left-bar {
            width: 300px;
            height: 200px;
            float: left;
            border:1px solid red;
        }
        ul li {
            list-style: none;
            margin-top: 20px;
            cursor: pointer;
        }
        li:hover {
            color: orange;
        }
    </style>
</head>

<body>
<div class="left-bar">
    <ul>
        <li class="music-name">十年</li>
        <li class="music-name">朋友</li>
        <li class="music-name">勇气</li>
    </ul>
</div>
<div class="content">
    <video src="" id="video1" controls autoplay></video>
    <button id="btn">按钮</button>
</div>

<script>
    window.onload = function() {
        // 歌曲列表
        var music = [
            {id: 1, name:"十年"},
            {id: 2, name:"朋友"},
            {id: 3, name:"勇气"}
        ]
        // 记录当前是哪首歌曲
        var currentMusic = 0;
        // 获取DOM
        var oVideo1 = document.querySelector("#video1");
        // 初始化
        oVideo1.src = music[0].name + '.mp3';

        // 歌曲结束事件
        oVideo1.onended = function() {
            currentMusic += 1;
            // 判断是否是最后一首
            if(currentMusic === music.length) {
                currentMusic = 0;
            }
            var sr = music[currentMusic].name + '.mp3';
            this.src=sr;
        }

        // 获取左边歌曲列表的DOM
        var aList = document.getElementsByClassName("music-name");
        for(var i=0; i<aList.length; i++) {
            // 为了知道具体是那一个li
            aList[i].index = i;
            // 给每一个li设定一个事件
            aList[i].onclick = function() {
                oVideo1.src = music[this.index].name + ".mp3";
                currentMusci = this.index;
            }
        }
    }
</script>

</body>
</html>