js實現音樂播放器

2022-07-13 18:02:39

本文範例為大家分享了js實現音樂播放器的具體程式碼，供大家參考，具體內容如下

音樂播放的主要js程式碼

音樂資料的陣列物件

想向前端網頁提供資料，並且為後面的js程式碼提供了音樂路徑

 {
        ablum: "海闊天空",
        artist: "Beyond",
        id: 1,
        name: "大地",
        path: "musics/1592373302464.mp3",
        size: 4147913,
        style: "搖滾",
        uptime: 1592373302000
    },
    {
        ablum: "xxx",
        artist: "GALA ",
        id: 2,
        name: "追夢赤子心",
        path: "musics/1592373330188.mp3",
        size: 8357216,
        style: "搖滾",
        uptime: 1592373330000
    },
    {
        ablum: "123",
        artist: "筷子兄弟",
        id: 3,
        name: "父親",
        path: "musics/1592373363687.mp3",
        size: 12050851,
        style: "懷舊",
        uptime: 1592373363000
    },
    {
        ablum: "xxx",
        artist: "Bruno Mars ",
        id: 4,
        name: "Just The Way You Are",
        path: "musics/1592383891287.mp3",
        size: 3602925,
        style: "搖滾",
        uptime: 1592383891000
    },
    {
        ablum: "xxx",
        artist: "Jason Chen",
        id: 5,
        name: "童話",
        path: "musics/1592383916578.mp3",
        size: 4143707,
        style: "流行",
        uptime: 1592383916000
    },

全域性變數

//建立音訊播放器物件
var player =document.createElement('audio');
//設定當前正在播放的歌曲的索引
var currentIndex=0;
//宣告一個標記，記錄歌曲的播放狀態
var isplay=false;

自呼叫函數

主要功能是通過迴圈遍歷使用html字串向前端動態的新增音樂資料，並初始化播放源（currentIndex標記）

(function() {
//繫結資料到頁面中
    var html = '';
//迴圈遍歷歌曲列表，根據歌曲數目在頁面生成對應的html程式碼
    for (var i = 0; i < musics.length; i++) {
        var m = musics[i];
        //根據迴圈的次數建立對應的歌曲項
        html += `<tr class="music-item" data-index="${i}">
                 <td class="tb-space" style="text-align: center"></td>
                 <td><a href="javascript:;">${m.name}</a></td>
                 <td><a href="javascript:;">${m.artist}</a></td>
                 <td><a href="javascript:;">${m.ablum}</a></td>
                 <td>${fmtSize(m.size)}</td>
                 <td class="tb-space"></td>
               </tr>`;
    }
    //將生產html插入到指定的dom節點中
    document.getElementById('tbody').innerHTML = html;
    //初始化播放源
    player.src=musics[currentIndex].path;
})();

新增點選事件

迴圈遍歷的給所有的音樂物件新增點選事件

//為列表項觸發點選事件
var trs = document.querySelectorAll('.music-item');
for (var i=0;i<trs.length;i++) {

    trs[i].addEventListener('click',function () {
        //清除狀態
        clearstatus();
        var index = this.dataset.index;
        //記錄當前播放的歌曲索引
        currentIndex=index;
        //獲取需要播放的物件
        var m = musics[index];
        //設定播放源
        player.src=m.path;
        startPlay();
    })

當然，不可能一次播放多個音樂，所以在播放當前音樂時將上一首音樂清除（封裝方法見下）

封裝方法

1.清除上一首歌曲方法
2.開始播放方法（同時將全域性變數isplay設定為true）
3.暫停播放方法（同時將全域性變數isplay設定為false）
4.將總時長s轉變成mm：ss
5.將大小B裝化為MB

//清除上一首歌的歌曲狀態
function clearstatus() {
    //還原上一首正在播放的歌曲表的背景顏色
    trs[currentIndex].style.background='';
    //清除當前行下的第一個單元格的內容（清除圖示）
    trs[currentIndex].getElementsByTagName('td')[0].innerHTML=''
}
//開始播放
function startPlay() {
    //將狀態標記為正在播放
    isplay=true;
    //播放
    player.play();
    //修改當前行的背景色
    trs[currentIndex].style.background='#f0f0f0';
    trs[currentIndex].getElementsByTagName('td')[0].innerHTML='<img src="imgs/playing-list.gif" alt="">'
    //將播放按鈕的背景圖片設定為暫停圖示
    document.getElementById('btnPlay').className='btn-pause';
    //將正在播放的歌曲名顯示到底部控制區域
    document.getElementById('playingName').innerText=musics[currentIndex].name;
}

//暫停播放
function pausePlay(){
    isplay=false;
    player.pause();
    document.getElementById('btnPlay').className='btn-play';
}
//格式化歌曲播放時間 mm:ss
function fmtTime(time) {
    time*=1000;
    //使用毫秒構建日期物件
    time=new Date(time);
    var m = time.getMinutes();
    var s = time.getSeconds();
    m=m<10?'0'+m:m;
    s=s<10?'0'+s:s;
    return m+':'+s;
}


//大小轉化
function fmtSize(size) {
    size=size/(1024*1024);
    size=size.toFixed(1);
    return size+'MB';
}

播放控制按鈕

就是暫停和播放按鈕
判斷全域性變數isplay，如果是true說明當前正在播放歌曲，點選就會暫停，反之就會播放

//播放控制
document.getElementById('btnPlay').addEventListener('click',function () {
    if (isplay){
        pausePlay();
    } else{
        startPlay();
    }
});

將當前歌曲的播放時長與總時長在介面上動態改變

//記錄歌曲的當前播放時間
var now =0;
//記錄歌曲的總播放時長
var total=0;
//當播放器的資料被載入時觸發
player.addEventListener('loadeddata',function () {
    //獲取當前播發器的播放位置以及總播放時長（單位s）
    now=player.currentTime;
    total=player.duration;
    //將歌曲的播放時間顯示到控制區域
    document.querySelector('.play-current').innerText=fmtTime(now);
    document.querySelector('.play-duration').innerText=fmtTime(total);
})

為進度條繫結進度改變事件

原理很簡單，通過上面的時間變化求得百分比，設定為進度的百分比就OK了

//為播放器繫結播放進度改變事件
player.addEventListener('timeupdate',updateProgress);
    function updateProgress() {
    //獲取當前的播放進度
    now=player.currentTime;
    //計算進度的百分比
    var p =now/total*100+'%';
    document.querySelector('.progress-control').style.width=p;
    document.querySelector('.play-current').innerText=fmtTime(now);
}

為播放器繫結播放完成事件以及上下首的切換

同意要清除上一首歌的播放狀態，改變全域性變數currentIndex就可以實現

//為播放器繫結播放完成事件
player.addEventListener('ended',function () {
    //清除上一首播放狀態
    clearstatus();
    currentIndex++;
    if(currentIndex>=musics.length){
        currentIndex=0;
    }
    //重新為播放器設定播放源
    player.src=musics[currentIndex].path;
    //繼續播放
    startPlay();
});

//上一首
document.querySelector('.btn-pre').addEventListener('click',function () {
    clearstatus();
    currentIndex--;
    if(currentIndex<0){
        currentIndex=musics.length-1;
    }
    //重新為播放器設定播放源
    player.src=musics[currentIndex].path;
    //繼續播放
    startPlay();

});
//下一首
document.querySelector('.btn-next').addEventListener('click',function () {
    clearstatus();
    currentIndex++;
    currentIndex=currentIndex%musics.length;
    //重新為播放器設定播放源
    player.src=musics[currentIndex].path;
    //繼續播放
    startPlay();
});

通過進度條控制歌曲播放

對滑鼠進行監聽，得到滑鼠最後的落點，計算出進度條的起始位置與該點佔據總長度的比例，然後簡單的數學運算，我們知道歌曲總長度就很清楚的得到滑鼠落點的歌曲該播放的位置

//改變歌曲的播放進度
(function(box,bar) {
    //監聽滑鼠是否按下
    var status=false;
    //滑鼠按下事件監聽
    document.querySelector(box).addEventListener('mousedown',function (e) {
        player.removeEventListener('timeupdate',updateProgress);
        move(e);
        status=true;
    })

    //滑鼠擡起事件監聽
    document.addEventListener('mouseup',function () {
        player.currentTime=now;
        player.addEventListener('timeupdate',updateProgress);
        status=false;
    })

    //滑鼠移動事件監聽
    document.querySelector(box).addEventListener('mousemove',function (e) {
        if(status==true){
            move(e)
        }
    })

    //滑鼠滑動執行
    function move(e) {
        var eventLeft=e.offsetX;

        var w=window.getComputedStyle(document.querySelector(box)).width;
        var w1=window.getComputedStyle(document.querySelector('.play-current')).width;
        var w2=window.getComputedStyle(document.querySelector('.play-duration')).width;
        w1=parseInt(w1);
        w2=parseInt(w2);
        document.querySelector(bar).style.width=eventLeft+w1+'px';
        now=(eventLeft)/(parseInt(w)-w1-w2)*total;
        status=true;

        // var eventLeft=e.offsetX;
        // document.querySelector(bar).style.width=eventLeft+'px';
        // var w=window.getComputedStyle(document.querySelector(box)).width;
        // now=eventLeft/parseInt(w)*total;
        // status=true;

    }
})('.play-length','.progress-control');

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

js實現音樂播放器

熱門文章