基于JavaScript实现一个月饼音乐播放器

<div id="back_box" style="background-image: url('Http://121.196.234.193/test/images/background.jpeg');"></div>

<div class="music_con">
        <div class="m_search">
            <input type="text" class="Word search-word" placeholder="搜索"><input type="image" src="http://121.196.234.193/test/images/search.png" class="search-btn" placeholder="">
        </div>
        <ul id="lists">
        </ul>
    </div>

ajax('GET', mp3Url, '', function(data){
                musicList = JSON.parse(data);
                str = '';
                for (var i =0, l= musicList.length; i<l; i++) {
                    if (i==0) {
                        str+='<li class="default">'
                    } else {
                        str +='<li>'
                    }
                    str +=   '<a href="./index.html" rel="external nofollow" >' +
                        '<label>'+musicList[i].title+'</label>' +
                        '<i> - </i>' +
                        '<span>'+musicList[i].singer+'</span>' +
                        '</a>' +
                        '</li>';
                }
                document.getElementById('lists').innerHTML= str
            })

<div class="PlayEy" style="transfORM: rotate(0deg);"></div>

<div class="btns-bg">
    <div class="PlayEy" style="transform: rotate(0deg);"></div>
    <div class="Btn"></div>
    <div class="Play" id="btn_play" item="1" style="background-image: url('http://121.196.234.193/test/images/pause.png'); width: 29px; height: 36px;">
        <audio src="http://121.196.234.193/test/music/1.mp3" id="audio_box" data-id="1"></audio>
    </div>
         <!--按钮（暂停/播放、上一曲、下一曲、声音开关、音量调节、循环播放）-->
         <div id="btn_prev"></div>
         <div id="btn_next"></div>

       <div id="volume_toggle" item="1" style="background-position: -152px 0px;"></div>
       <div class="volume_box">
       <input id="volume_change" type="range" min="1" max="10" value="5" style="background:linear-gradient(to right, #059CFA, #ebeff4 50%, #ebeff4)">
      </div>
     <div id="loop_type" item="1" style="background-position: -105px -58px;"></div>
         <!--音频时间-->
         <div class="time_box">
             <span id="now_time">00:00</span>
             <span id="total_time">00:22</span>
         </div>
         <!--音频播放进度条-->
         <div class="time_axis">
             <div class="slideway">
                 <p id="progress_bar"></p>
                 <div id="ahead_head"></div>
             </div>
         </div>
</div>

// 启动播放方法
function plays(){
    //_audioDom.load();
    let playPromise = _audioDom.play() ;
    if (playPromise !== undefined) {
        playPromise.then(() => {
            _audioDom.play()
        }).catch(() => {})
    }
}

<!--音频标题-->
    <div class="title_box">
        <span id="music_title">你笑起来真好看</span>
    </div>
    <!--歌词区域-->
    <div id="music_lyric">
        <span class="lyric_prev"></span>
        <span class="lyric_now"></span>
        <span class="lyric_next"></span>
    </div>

 
_audioDom.ontimeupdate = function(){
    _totalTime.innerHTML = timeFormat(_audioDom.duration);	// 音频总时间;
    _nowTime.innerHTML = timeFormat(_audioDom.currentTime);	// 更新当前播放的时间;
    var now_long = _audioDom.currentTime/_audioDom.duration*slidewayWidth; 			 	// 当前时间播放的长度
    _progress.style.width = now_long+'px';		 		// 进度条长度
    _aheadDom.style.left = (now_long-10)+'px'; // 进度条头位置

    //遍历歌词
    for (var i = 0, l = lyricArr.length; i < l; i++) {
        if (_audioDom.currentTime > lyricArr[i][0]) {
            if(i>=1){
                _lyricPrev.innerHTML = lyricArr[i-1][1];
                _lyricNow.innerHTML = lyricArr[i][1];
                if(lyricArr.hasOwnProperty(i+1)){
                    _lyricNext.innerHTML = lyricArr[i+1][1];
                }else {
                    _lyricNext.innerHTML = '';
                }
            }else{
                _lyricPrev.innerHTML = '';
                _lyricNow.innerHTML = lyricArr[i][1];
                _lyricNext.innerHTML = lyricArr[i+1][1];
            }
        }
    }
    addListenTouch(); // 监听手动拉动播放进度条
};