Js簡(jiǎn)單實(shí)現(xiàn)音樂播放器

• • HTML部分
  • CSS部分
  • js代碼部分

這段時(shí)間正好是寒假，閑來無事把大二學(xué)的web再溫習(xí)了一遍，在學(xué)習(xí)到Js時(shí)，想找一些小玩意來練練手，于是我就用原生Js做了一個(gè)簡(jiǎn)單音樂播放器。

音樂播放器功能如下：

支持上、下一首歌切換

開始、暫停

音量調(diào)整

音樂圖片的旋轉(zhuǎn)

實(shí)現(xiàn)效果

HTML部分

html部分實(shí)現(xiàn)了簡(jiǎn)單的頁面布局，作為音樂播放器的按鍵我選擇了從fontawesome圖庫中導(dǎo)入，也就是我們看到的i標(biāo)簽（下載地址：http://www.fontawesome.com.cn/）
代碼片.

<div id="Music"><div id="Music-text"><span>Music Player</span></div><div id="Music-player"><div class="Mucis-Program"><img src="music.png" id="Mpicture"><audio id="play1"><source src="./music/古巨基%20-%20誰愿放手.mp3"></audio><audio id="play2"><source src="./music/徐一%20-%20醒不來的夢(mèng).mp3"></audio><audio id="play3"><source src="./music/翁梓銘%20-%20苦盡甘來.mp3"></audio><i class="fa fa-pause fa-2x" aria-hidden="true" id="stop" onclick="zantin()"></i><i class="fa fa-play fa-2x" aria-hidden="true" id="start" onclick="st()"></i><i class="fa fa-chevron-left fa-2x" aria-hidden="true" id="preMu" onclick="reduce()"></i><i class="fa fa-chevron-right fa-2x" aria-hidden="true" id="nextMu" onclick="add()"></i><i class="fa fa-volume-down fa-2x" aria-hidden="true" id="voiceMu"></i><input type="range" min="0" max="1" step="0.01" id="voice" onclick="myVolume()"> \\音量大小 </div></div>

使用font-awesome包時(shí)一定要記得引入！！！！

CSS部分

這層疊樣式表，就不需要過多解釋了

*{margin: 0px;padding: 0px;}#Music{height: 980px;background-image: linear-gradient(#e66465, #9198e5); //漸變色}#Music-text{width: 200px;height: 100px;float: left;margin-top: 220px;margin-left: 46%;}#Music-text span{font-size: 22px;font-weight: bold;font-family: Garamond;}#Music #Music-player .Mucis-Program{width: 460px;height: 280px;margin-left: 38%;margin-top: 10px;background: rgba(255,255,255,0.4);float: left;border-radius: 25px;}#Music-player .Mucis-Program img{width: 80px;height: 80px;margin-top: 40px;margin-left: 190px;}#Music-player .Mucis-Program #stop{margin-top: 50px;margin-left: 218px;display: none;overflow: auto;}#Music-player .Mucis-Program #start{margin-top: 50px;margin-left: 218px;display: block;overflow: auto;}#Music-player .Mucis-Program #preMu{margin-top: -30px;margin-left: 60px;float: left;}#Music-player .Mucis-Program #nextMu{margin-left: 278px;margin-top: -30px;float: left;}#Music-player .Mucis-Program #voiceMu{margin-left: 218px;margin-top: 30px;float: left;}#voice{margin-left: 246px;margin-top: -24px;float: left;}i{cursor: pointer;}

js代碼部分

變量聲明 | 將三首歌裝入數(shù)組中

var py1 = document.getElementById("play1"); \\歌曲1var py2 = document.getElementById("play2"); \\歌曲2var py3 = document.getElementById("play3"); \\歌曲3var music_arr = [py1,py2,py3];var index = 0; \\數(shù)組下標(biāo)

開始播放 | 在觸發(fā)這個(gè)函數(shù)之后，開始按鈕隱藏，暫停按鈕出現(xiàn)，并播放歌曲，圖片開始旋轉(zhuǎn)

function st() { //開始document.getElementById("start").style.display = "none";document.getElementById("stop").style.display = "block"music_arr[index].play();rotate();}

暫停播放 | 與開始播放函數(shù)同理，并暫停圖片的旋轉(zhuǎn)

function zantin() { //暫停document.getElementById("stop").style.display = "none";document.getElementById("start").style.display = "block";music_arr[index].pause();imagePause();}

聲音調(diào)節(jié) | 觸發(fā)事件后使得聲音隨著進(jìn)度條大小變化

function myVolume() { //調(diào)節(jié)聲音music_arr[index].volume = document.getElementById("voice").value;}

切歌 | 在編寫程序時(shí)我們要先明白，無論切上一首歌還是下一首歌時(shí)我們需要先暫停歌曲，再進(jìn)行對(duì)歌曲的操作（index++/index–），判斷index是否高于上限或低于下限，最后再開始下標(biāo)為index的歌曲

function reduce() { //上一首歌zantin();index--;if(index == -1){index = music_arr.length-1;}st();}function add() { //下一首歌zantin();index++;if(index>music_arr.length-1){index=0;}st();}

下面是圖片轉(zhuǎn)動(dòng)的函數(shù)，當(dāng)音樂播放的時(shí)候調(diào)用rotate（）函數(shù)，就可以實(shí)現(xiàn)圖片的旋轉(zhuǎn)；

同樣清除定時(shí)器的函數(shù)，當(dāng)音樂暫停的時(shí)候調(diào)用imagePause()，圖片旋轉(zhuǎn)的定時(shí)器被清除掉。

function rotate(){ //圖片旋轉(zhuǎn)var deg = 0;timer = setInterval(function () {document.getElementById("Mpicture").style.transform="rotate("+deg+"deg)";deg+=5;if(deg>360){deg=0;}},30);}function imagePause() {clearInterval(timer);}

以上就是對(duì)實(shí)現(xiàn)簡(jiǎn)單音樂播放器的所有內(nèi)容，如若有不足之處望大家指出。

總結(jié)

以上是生活随笔為你收集整理的Js简单实现音乐播放器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。