這次帶給大家原生JS做出一個音樂播放器,原生JS做出一個音樂播放器的注意事項有哪些,下面就是實戰案例,一起來看一下。
前 言
## 最近在複習JS,覺得音樂播放器是個蠻有趣的東西,今天就來用我們最原生的JS寫一個小小的音樂播放器~
# 主要功能:
1、支援循環、隨機播放
2、在播放的同時支援圖片的旋轉
# 3、支援點選進度條調整播放的位置,以及調整音量
# 4、顯示音樂的播放時間
5、支援切歌:上一首、下一首、點選歌名切歌;暫停播放等~
# 新增音樂有兩種方式:
①可以用一個audo標籤,這樣應該把音樂的位址存放到一個陣列中;
# ②第二種方式是,有幾首歌就添加幾個audo標籤,然後獲取所有的背景音樂(示例中我們先添加三首音樂,放到一個數組中,當然,大家可以挑選自己喜歡的任何歌曲)。
<audio id="play1"> <source src="auto/旅行.mp3"></source> </audio> <audio id="play2"> <source src="auto/薛明媛,朱贺 - 非酋.mp3"></source> </audio> <audio id="play3"> <source src="auto/杨宗纬 - 越过山丘.mp3"></source> </audio>
play1=document.getElementById("play1"); play2=document.getElementById("play2"); play3=document.getElementById("play3"); play=[play1,play2,play3];
1點選播放、暫停
# 首選我們應該要清楚的是,在點擊按鈕播放的時候應該實現的有:
# ①音樂開始播放;
②進度條開始隨歌曲的播放往前走;
# ③圖片開始隨歌曲播放旋轉;
# ④播放時間開始計時;
# 那麼相對應的,再次點擊播放按鈕的時候,我們就可以讓它實現暫停:
①歌曲暫停;
②讓進度條同時暫停;
# ③讓播放時間計時同時暫停;
④圖片停止旋轉;
注意:上述開始暫停操作一定要同步!
理清楚我們的思路以後,就可以來一 一實現了~
# 點擊播放/暫停
//点击播放、暂停 function start(){ minute=0; if(flag){ imagePause(); play[index].pause(); }else{ rotate(); play[index].play(); reducejindutiao(); addtime(); jindutiao(); for (var i=0;i<play.length;i++) { audioall[i].style.color="white"; } audioall[index].style.color="red"; } }
因為播放和暫停在同一個按鈕上,所以都會呼叫上述方法,我們來詳細看一下各個函數都實現了怎樣的功能:
圖片旋轉
//图片旋转,每30毫米旋转5度 function rotate(){ var deg=0; flag=1; timer=setInterval(function(){ image.style.transform="rotate("+deg+"deg)"; deg+=5; if(deg>360){ deg=0; } },30); }
# 上述是圖片轉動的函數,當音樂播放的時候呼叫rotate()函數,就可以實現圖片的旋轉!
同樣清除定時器的函數,當音樂暫停的時候呼叫imagePause(),圖片旋轉的定時器被清除掉:
function imagePause(){ clearInterval(timer); flag=0; }
這樣圖片旋轉的功能我們就已經實現了~
進度條
# 先定義兩個寬度長度大小一樣顏色不同的兩個p,利用currenttime屬性來過去目前的播放的時間,設一個p一開始的長度為零,然後透過目前播放的事件來調整p長度大小就能達到滾動條的效果了。
function jindutiao(){ //获取当前歌曲的歌长 var lenth=play[index].duration; timer1=setInterval(function(){ cur=play[index].currentTime;//获取当前的播放时间 fillbar.style.width=""+parseFloat(cur/lenth)*300+"px"; },50) }
這樣,進度條就完成啦~
# 播放時間
音樂的播放時間也是利用currenttime隨時改變,但要注意currenttime的計時單位為秒。
//播放时间 function addtime(){ timer2=setInterval(function(){ cur=parseInt(play[index].currentTime);//秒数 var temp=cur; minute=parseInt(temp/60); if(cur%60<10){ time.innerHTML=""+minute+":0"+cur%60+""; }else{ time.innerHTML=""+minute+":"+cur%60+""; } },1000); }
2切歌我做了兩種方式實作切歌:
# ①點選上一曲、下一曲按鈕實現切歌;
//上一曲 function reduce(){ qingkong(); reducejindutiao(); pauseall(); index--; if(index==-1){ index=play.length-1; } start(); } //下一曲 function add(){ qingkong(); reducejindutiao(); pauseall(); index++; if(index>play.length-1){ index=0; } start(); }
②點選歌名,實現歌曲的切換;
//点击文字切歌 function change(e){ var musicName=e.target; //先清空所有的 for (var i=0;i<audioall.length;i++) { audioall[i].style.color="white"; if(audioall[i]==musicName){ musicName.style.color="red"; qingkong(); reducejindutiao(); pauseall(); index=i; start(); } } }
注意:切歌時不要忘了我們的進度條!
將進度條捲動的計時器清除掉,然後p的長度還原為0;
//将进度条置0 function reducejindutiao(){ clearInterval(timer1); fillbar.style.width="0"; }
同時音樂停止:
//音乐停止 function pauseall(){ for (var i=0;i<play.length;i++) { if(play[i]){ play[i].pause(); } } }
清空所有定時器:
function qingkong(){//清空所有的计时器 imagePause(); clearInterval(timer2); }
3点击进度条调整播放进度及音量
首先应该理清一下逻辑:当点击进度条的时候,滚动条的宽度应该跟鼠标的offsetX一样长,然后根据进度条的长度来调整听该显示的时间。
(1) 给滚动条的p添加一个事件,当滚动条长度变化的时候歌曲的当前播放的时间调整,300是滚动条的总长度;
//调整播放进度 function adjust(e){ var bar=e.target; var x=e.offsetX; var lenth=play[index].duration; fillbar.style.width=x+"px"; play[index].currentTime=""+parseInt(x*lenth/300)+""; play[index].play(); }
(2) 改变音量的滚动条,跟改变播放时间类似,利用volume属性(值为零到一);
//调整音量大小 function changeVolume(e){ var x=e.offsetX+20; play[index].volume=parseFloat(x/200)*1; //改变按钮的位置 volume3.style.left=""+x+"px"; }
4随机、循环播放
循环播放音乐的时候,直接index++当index的范围超过歌曲的长度的时候,index=0重新开始。随机播放的函数类似,当歌曲播放完毕的时候,随机产生一个0到play.length的数字就可以了。
//随机播放歌曲 function suiji(e){ var img=e.target; img2.style.border=""; img.style.border="1px solid red"; } //顺序播放 function shunxu(e){ var img=e.target; img1.style.border=""; img.style.border="1px solid red"; clearInterval(suijiplay); shunxuplay=setInterval(function(){ if(play[index].ended){ add(); } },1000); }
这样我们整个音乐播放器就完成了,大家可以自己写一个好看的界面,就更完美了
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是原生JS做出一個音樂播放器的詳細內容。更多資訊請關注PHP中文網其他相關文章!