js實現(xiàn)音樂播放器
更新時間：2022年07月13日 17:12:04 作者：#%^*$&
這篇文章主要為大家詳細介紹了js實現(xiàn)音樂播放器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)音樂播放器的具體代碼，供大家參考，具體內(nèi)容如下
音樂播放的主要js代碼
音樂數(shù)據(jù)的數(shù)組對象
想向前端網(wǎng)頁提供數(shù)據(jù)，并且為后面的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
? ? },全局變量
//創(chuàng)建音頻播放器對象
var player =document.createElement('audio');
//設置當前正在播放的歌曲的索引
var currentIndex=0;
//聲明一個標記，記錄歌曲的播放狀態(tài)
var isplay=false;自調(diào)用函數(shù)
主要功能是通過循環(huán)遍歷使用html字符串向前端動態(tài)的添加音樂數(shù)據(jù)，并初始化播放源（currentIndex標記）
(function() {
//綁定數(shù)據(jù)到頁面中
var html = '';
//循環(huán)遍歷歌曲列表，根據(jù)歌曲數(shù)目在頁面生成對應的html代碼
for (var i = 0; i < musics.length; i++) {
var m = musics[i];
//根據(jù)循環(huán)的次數(shù)創(chuàng)建對應的歌曲項
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>`;
}
//將生產(chǎn)html插入到指定的dom節(jié)點中
document.getElementById('tbody').innerHTML = html;
//初始化播放源
player.src=musics[currentIndex].path;
})();添加點擊事件
循環(huán)遍歷的給所有的音樂對象添加點擊事件
//為列表項觸發(fā)點擊事件
var trs = document.querySelectorAll('.music-item');
for (var i=0;i<trs.length;i++) {
? ? trs[i].addEventListener('click',function () {
? ? ? ? //清除狀態(tài)
? ? ? ? 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
//清除上一首歌的歌曲狀態(tài)
function clearstatus() {
? ? //還原上一首正在播放的歌曲表的背景顏色
? ? trs[currentIndex].style.background='';
? ? //清除當前行下的第一個單元格的內(nèi)容（清除圖標）
? ? trs[currentIndex].getElementsByTagName('td')[0].innerHTML=''
}
//開始播放
function startPlay() {
? ? //將狀態(tài)標記為正在播放
? ? 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';
? ? //將正在播放的歌曲名顯示到底部控制區(qū)域
? ? 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();
? ? }
});將當前歌曲的播放時長與總時長在界面上動態(tài)改變
//記錄歌曲的當前播放時間
var now =0;
//記錄歌曲的總播放時長
var total=0;
//當播放器的數(shù)據(jù)被加載時觸發(fā)
player.addEventListener('loadeddata',function () {
? ? //獲取當前播發(fā)器的播放位置以及總播放時長（單位s）
? ? now=player.currentTime;
? ? total=player.duration;
? ? //將歌曲的播放時間顯示到控制區(qū)域
? ? 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);
}為播放器綁定播放完成事件以及上下首的切換
同意要清除上一首歌的播放狀態(tài)，改變?nèi)肿兞縞urrentIndex就可以實現(xiàn)
//為播放器綁定播放完成事件
player.addEventListener('ended',function () {
? ? //清除上一首播放狀態(tài)
? ? clearstatus();
? ? currentIndex++;
? ? if(currentIndex>=musics.length){
? ? ? ? currentIndex=0;
? ? }
? ? //重新為播放器設置播放源
? ? player.src=musics[currentIndex].path;
? ? //繼續(xù)播放
? ? startPlay();
});
//上一首
document.querySelector('.btn-pre').addEventListener('click',function () {
? ? clearstatus();
? ? currentIndex--;
? ? if(currentIndex<0){
? ? ? ? currentIndex=musics.length-1;
? ? }
? ? //重新為播放器設置播放源
? ? player.src=musics[currentIndex].path;
? ? //繼續(xù)播放
? ? startPlay();
});
//下一首
document.querySelector('.btn-next').addEventListener('click',function () {
? ? clearstatus();
? ? currentIndex++;
? ? currentIndex=currentIndex%musics.length;
? ? //重新為播放器設置播放源
? ? player.src=musics[currentIndex].path;
? ? //繼續(xù)播放
? ? startPlay();
});通過進度條控制歌曲播放
對鼠標進行監(jiān)聽，得到鼠標最后的落點，計算出進度條的起始位置與該點占據(jù)總長度的比例，然后簡單的數(shù)學運算，我們知道歌曲總長度就很清楚的得到鼠標落點的歌曲該播放的位置
//改變歌曲的播放進度
(function(box,bar) {
? ? //監(jiān)聽鼠標是否按下
? ? var status=false;
? ? //鼠標按下事件監(jiān)聽
? ? document.querySelector(box).addEventListener('mousedown',function (e) {
? ? ? ? player.removeEventListener('timeupdate',updateProgress);
? ? ? ? move(e);
? ? ? ? status=true;
? ? })
? ? //鼠標抬起事件監(jiān)聽
? ? document.addEventListener('mouseup',function () {
? ? ? ? player.currentTime=now;
? ? ? ? player.addEventListener('timeupdate',updateProgress);
? ? ? ? status=false;
? ? })
? ? //鼠標移動事件監(jiān)聽
? ? document.querySelector(box).addEventListener('mousemove',function (e) {
? ? ? ? if(status==true){
? ? ? ? ? ? move(e)
? ? ? ? }
? ? })
? ? //鼠標滑動執(zhí)行
? ? 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');以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文通過實例代碼給大家介紹了通過封裝scroll.js 獲取滾動條的值的相關知識，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
javascript實現(xiàn)iframe框架延時加載的方法
這篇文章主要介紹了javascript實現(xiàn)iframe框架延時加載的方法,可基于setTimeout實現(xiàn)這一功能,是非常實用的技巧,需要的朋友可以參考下2014-10-10
JavaScript內(nèi)置對象Math與String詳細介紹
這篇文章主要介紹了JavaScript內(nèi)置對象Math與String的介紹與使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08 
javascript實現(xiàn)數(shù)組內(nèi)值索引隨機化及創(chuàng)建隨機數(shù)組的方法
這篇文章主要介紹了javascript實現(xiàn)數(shù)組內(nèi)值索引隨機化及創(chuàng)建隨機數(shù)組的方法,涉及javascript數(shù)組索引及隨機數(shù)的相關實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08 
這篇文章主要介紹了js對圖片base64編碼字符串進行解碼并輸出圖像的具體實現(xiàn)，大家可以參考下面的示例
2014-03-03 
本方法是基于iframe實現(xiàn)的，需求是form表單提交帶有文件上傳的input標簽，示例如下，感興趣的朋友可以參考下
2014-05-05 
一文詳解JSON.parse和JSON.stringify的用法
Json.stringify()和toString()兩者雖然都可以講目標值轉為字符串,但是還是有本質(zhì)區(qū)別的,下面這篇文章主要給大家介紹了關于JSON.parse和JSON.stringify用法的相關資料,需要的朋友可以參考下
2023-01-01 
這篇文章主要介紹了javascript獲取web應用根目錄的方法,需要的朋友可以參考下
2014-02-02 
判斷語句這個我們不陌生,就是判斷是否滿足指定的條件,如果滿足則執(zhí)行一定的代碼,否則跳過,下面這篇文章主要給大家介紹了關于JavaScript中判斷的優(yōu)雅寫法,需要的朋友可以參考下
2021-10-10