基于JavaScript實(shí)現(xiàn)一個(gè)月餅音樂播放器

更新時(shí)間：2022年09月15日 15:37:04 作者：1個(gè)俗人

這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的月餅音樂播放器，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以嘗試一下

前言

事情的經(jīng)過是這樣的，媳婦中秋發(fā)了一盒月餅，里面還有一個(gè)小藍(lán)牙音響，她說如果這個(gè)音響是個(gè)月餅造型之類的是不是更能體現(xiàn)出中秋的氣氛。于是我就想到了可以用代碼給她實(shí)現(xiàn)一個(gè)啊，拿出了我僅有的一點(diǎn)點(diǎn)前端看家本領(lǐng)(我是搞后端的)，浪費(fèi)我三天假期，效果圖如下，本來設(shè)想的挺好，可是由于本人能力有限，沒有達(dá)到自己預(yù)想的目標(biāo)，僅供娛樂！

頁面布局

頁面采用最簡(jiǎn)單的div+css進(jìn)行布局，首先將頁面分為三部分，分別為左邊音樂列表，中間播放器部分和右邊歌詞部分。

頁面背景

可以選擇一張比較好看的照片作為頁面背景，我就隨便選了一張中秋主題相關(guān)的作為背景，下一步準(zhǔn)備做一個(gè)設(shè)置功能可以自定義頁面背景。

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

左側(cè)列表

列表調(diào)用后端接口動(dòng)態(tài)加載數(shù)據(jù)，后端接口采用php實(shí)現(xiàn)。

<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>

js實(shí)現(xiàn)部分如下：

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
            })

中間播放器

這部分也是核心。

首先設(shè)置一個(gè)背景，本來想自己用代碼畫一個(gè)月餅的，結(jié)果超出了我的能力范圍，于是從網(wǎng)上找一張圖片，這個(gè)月餅是不是看著看誘人，其實(shí)這個(gè)地方可以根據(jù)音樂設(shè)定不同的背景，通過接口返回，在這里就先這樣吧。

給圖片加點(diǎn)特效——讓它轉(zhuǎn)起來。

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

在CSS3中transform主要包括以下幾種：旋轉(zhuǎn)rotate、扭曲skew、縮放scale和移動(dòng)translate以及矩陣變形matrix。

rotate() ：通過指定的角度參數(shù)對(duì)原元素指定一個(gè)2D rotation（2D 旋轉(zhuǎn)），需先有transform-origin屬性的定義。transform-origin定義的是旋轉(zhuǎn)的基點(diǎn)，其中angle是指旋轉(zhuǎn)角度，如果設(shè)置的值為正數(shù)表示順時(shí)針旋轉(zhuǎn)，如果設(shè)置的值為負(fù)數(shù)，則表示逆時(shí)針旋轉(zhuǎn)。如：transform:rotate(30deg)；

音樂播放采用audio標(biāo)簽。

<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>
         <!--按鈕（暫停/播放、上一曲、下一曲、聲音開關(guān)、音量調(diào)節(jié)、循環(huán)播放）-->
         <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>
         <!--音頻時(shí)間-->
         <div class="time_box">
             <span id="now_time">00:00</span>
             <span id="total_time">00:22</span>
         </div>
         <!--音頻播放進(jìn)度條-->
         <div class="time_axis">
             <div class="slideway">
                 <p id="progress_bar"></p>
                 <div id="ahead_head"></div>
             </div>
         </div>
</div>

audio相關(guān)屬性：

autoplay：自動(dòng)播放（一般瀏覽器會(huì)禁止此行為）。
controls：顯示音頻控件。
loop：循環(huán)播放。
muted：靜音。
preload：加載方式，分auto(當(dāng)頁面加載后載入整個(gè)音頻)、metadata(當(dāng)頁面加載后只載入元數(shù)據(jù))、none(當(dāng)頁面加載后不載入音頻)。
src：音頻地址。

js實(shí)現(xiàn)

// 啟動(dòng)播放方法
function plays(){
    //_audioDom.load();
    let playPromise = _audioDom.play() ;
    if (playPromise !== undefined) {
        playPromise.then(() => {
            _audioDom.play()
        }).catch(() => {})
    }
}

右側(cè)歌詞部分

主要用于展示當(dāng)前播放音樂的標(biāo)題和歌詞信息，數(shù)據(jù)采用js動(dòng)態(tài)加載。

<!--音頻標(biāo)題-->
    <div class="title_box">
        <span id="music_title">你笑起來真好看</span>
    </div>
    <!--歌詞區(qū)域-->
    <div id="music_lyric">
        <span class="lyric_prev"></span>
        <span class="lyric_now"></span>
        <span class="lyric_next"></span>
    </div>

js部分實(shí)現(xiàn)：

 /** 當(dāng)前播放時(shí)間發(fā)生改變的時(shí)候 **/
_audioDom.ontimeupdate = function(){
    _totalTime.innerHTML = timeFormat(_audioDom.duration);	// 音頻總時(shí)間;
    _nowTime.innerHTML = timeFormat(_audioDom.currentTime);	// 更新當(dāng)前播放的時(shí)間;
    var now_long = _audioDom.currentTime/_audioDom.duration*slidewayWidth; 			 	// 當(dāng)前時(shí)間播放的長(zhǎng)度
    _progress.style.width = now_long+'px';		 		// 進(jìn)度條長(zhǎng)度
    _aheadDom.style.left = (now_long-10)+'px'; // 進(jìn)度條頭位置

    //遍歷歌詞
    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(); // 監(jiān)聽手動(dòng)拉動(dòng)播放進(jìn)度條
};