音乐播放

html中

<div id="container">
    <ul class="Umusic">
        <li class="clickMusic">打上火花</li>
        <li>Lemon</li>
        <li>You Are The Reason</li>
        <li>Dancing With Your Ghost</li>
    </ul>
    <audio src="" controls class="music"></audio>
</div>

css样式

<style>
    *{
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }
    #container{
        width: 450px;
        height: 450px;
        margin: 20px auto;
        border: 1px solid gray;
        border-radius: 8px;
        background-image: url('./bg.jpg');
        background-size: contain;
    }
    #container ul{
        margin: 9px;
        background-color: rgba(1, 1, 1, .2);
        height: 380px;
        border-radius: 4px;
    }
    #container ul li{
        text-align: center;
        padding: 8px 20px;
        line-height: 40px;
        color: #fff;
    }
    #container .music{
        width: 100%;
    }
    #container ul li:hover{
        height: 40px;
        background-color: #F0F8FF;
        border-radius: 6px;
        width: 390px;
        color: #000;
        cursor: pointer;
        opacity: .7;
    }
    #container .clickMusic{
        height: 40px;
        background-color: #F0F8FF;
        border-radius: 6px;
        width: 390px;
        color: #000;
    }
</style>

js中

<script>
    // dom
    var Omusic = document.getElementsByClassName('music')[0];
    var OUmusic = document.getElementsByClassName('Umusic')[0];
    var Oli = document.getElementsByTagName('li');
    // 用于存储音乐,此处以下载为例
    var musicTemp = ['./DAOKO,米津玄師 - 打上花火.mp3', './Lemon.mp3', './You Are The Reason.mp3', './Dancing With Your Ghost.mp3'];
    Omusic.src = musicTemp[0];
    for(var i = 0; i < Oli.length; i++){
        // 避免闭包
        (function(i){
            // 点击播放
            var flag = true
            Oli[i].onclick = function(){
                flag = !flag;
                if(flag && Oli[i].getAttribute('class') == 'clickMusic'){
                    // 点击暂停
                    Omusic.pause();
                }else{
                    Omusic.src = musicTemp[i];
                    Omusic.play();
                    // 将其余类名置空
                    for(var j = 0; j < Oli.length; j++){
                        Oli[j].className = '';
                    };
                }
                Oli[i].className = 'clickMusic';
            }
        })(i)
    }

    // 循环播放
    Omusic.onended = function(){
        var ended = getPlay();
        if(ended == Oli.length - 1){
            // 当前为最后一首
            Omusic.src = musicTemp[0];
            Oli[0].className = 'clickMusic';
            Oli[ended].className = '';
            Omusic.play();
        }else{
            Omusic.src = musicTemp[ ended + 1 ];
            Oli[ended + 1].className = 'clickMusic';
            Oli[ended].className = '';
            Omusic.play();
        }
    }

    // 获得当前播放
    function getPlay(){
        for(var i = 0; i < Oli.length; i++){
            if(Oli[i].className == 'clickMusic'){
                return i;
            }
        }
    }