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