這篇文章為大家講如何用JSd代碼實現音樂播放。

　　音樂播放的主要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');

       后續更多精彩內容，歡迎關注。