欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年09月15日 15:37:04   作者：1個俗人  
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)一個簡單的月餅音樂播放器，文中的示例代碼講解詳細，感興趣的小伙伴可以嘗試一下

前言

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

頁面布局

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

頁面背景

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

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

左側(cè)列表

列表調(diào)用后端接口動態(tài)加載數(shù)據(jù)，后端接口采用php實現(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實現(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è)置一個背景，本來想自己用代碼畫一個月餅的，結(jié)果超出了我的能力范圍，于是從網(wǎng)上找一張圖片，這個月餅是不是看著看誘人，其實這個地方可以根據(jù)音樂設(shè)定不同的背景，通過接口返回，在這里就先這樣吧。

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

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

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

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

音樂播放采用audio標簽。

<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>
         <!--音頻時間-->
         <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>

audio相關(guān)屬性：

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

js實現(xiàn)

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

右側(cè)歌詞部分

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

<!--音頻標題-->
    <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部分實現(xiàn)：

 /** 當前播放時間發(fā)生改變的時候 **/
_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(); // 監(jiān)聽手動拉動播放進度條
};

總結(jié)

雖然大體效果出來了，但是跟預(yù)想的還是有很大差距，因為不是專業(yè)的前端，整體實現(xiàn)比較簡單，只能做到這了，僅供娛樂！

到此這篇關(guān)于基于JavaScript實現(xiàn)一個月餅音樂播放器的文章就介紹到這了,更多相關(guān)JavaScript音樂播放器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論