Js簡單實現音樂播放器

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

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

音樂播放器功能如下：

支持上、下一首歌切換

開始、暫停

音量調整

音樂圖片的旋轉

實現效果

HTML部分

html部分實現了簡單的頁面布局，作為音樂播放器的按鍵我選擇了從fontawesome圖庫中導入，也就是我們看到的i標簽（下載地址：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醒不來的夢.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包時一定要記得引入！！！！

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代碼部分

變量聲明 | 將三首歌裝入數組中

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

開始播放 | 在觸發這個函數之后，開始按鈕隱藏，暫停按鈕出現，并播放歌曲，圖片開始旋轉

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

暫停播放 | 與開始播放函數同理，并暫停圖片的旋轉

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

聲音調節 | 觸發事件后使得聲音隨著進度條大小變化

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

切歌 | 在編寫程序時我們要先明白，無論切上一首歌還是下一首歌時我們需要先暫停歌曲，再進行對歌曲的操作（index++/index–），判斷index是否高于上限或低于下限，最后再開始下標為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();}

下面是圖片轉動的函數，當音樂播放的時候調用rotate（）函數，就可以實現圖片的旋轉；

同樣清除定時器的函數，當音樂暫停的時候調用imagePause()，圖片旋轉的定時器被清除掉。

function rotate(){ //圖片旋轉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);}

以上就是對實現簡單音樂播放器的所有內容，如若有不足之處望大家指出。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。