用JavaScript實現簡易的網頁音樂播放器

最近疫情在家，利用這段時間開始自學HTML等內容，目前在寫自己的個人主頁，想用音樂來給自己的主頁增添點特色。
一開始單純用audio標簽添加音樂，帶上autoplay和loop屬性，但在讓朋友測試這個頁面的時候遇到了問題：

這個問題意味著，Safari在沒有用戶操作的情況下不會自動播放所插入的音樂，也就是說autoplay是沒有用的，但是audio自帶的control又不是很美觀，左上角放個控制的模塊也不太和諧。

為了解決所有瀏覽器都能正常播放，那我直接做一個簡單的音樂播放器就好了。

我在網上也搜索過很多方法，但很多方法對初入門者指引不太明顯，而且我也有一點點自己的審美要求，所以在這里給大家分享我的最后綜合網上的辦法得出來的一個簡單的音樂播放器，話不多說，先上代碼：

JavaScript代碼：

function playPause() {var music = document.getElementById('music');var music_btn = document.getElementById('music-btn');if (music.paused){music.play();music_btn.src='pause.png';}else {music.pause();music_btn.src='play.png';} }//播放和暫停合一，默認是打開頁面點擊播放，點擊后播放鍵就會變為暫停鍵 //這里只是我想二合一，其實可以分開的，原理一樣，把兩個判斷分到兩個按鈕，寫兩個function就ok啦 var music1 = new Array(); music1 = ["笑場.mp3","剛剛好.mp3","陪你去流浪.mp3","啞巴.mp3","怪咖.mp3"];//用數組存儲所有歌曲的路徑 //如果是本地的音樂，就寫本地的路徑，如果你使用了云存儲，就把url放在這里就好了 var num=0; var n=music1.length;//獲取數組的長度 function lastmusic() {num = (num+n-1)%n;music.src = music1[num];music.play(); }//切上一首歌 function nextmusic() {num = (num+1)%n;music.src = music1[num];music.play(); }//切下一首歌 window.onload=function () {music.addEventListener('ended', function () {nextmusic();},false) }//自動連播功能，監聽播放情況，結束之后就調用下一首歌的函數

HTML代碼：

<audio preload id='music'><source src="笑場.mp3"></audio> <a href="javascript:lastmusic()"><img src="previous.png" width="96" height="96" border="0"></a> <a href="javascript:playPause()"><img src="play.png" width="96" height="96" id="music-btn" border="0"></a> <a href="javascript:nextmusic()"><img src="next.png" width="96" height="96" border="0"></a> //插入圖片且引用上面的函數，實現功能

在這里我結合了幾個點：

• 按鍵二合一，且在按的時候會變化，播放變暫停，暫停變播放（此處是參考了網上的方案）。
• 在數組部分，網上的方法都是只存名字，然后在function的src末尾加了".mp3"，從而實現切歌，這種方法對本地文件的確適用，但是對于使用OSS對象存儲直接只有一個鏈接，現在改為直接存地址，就可以適用OSS了。
• 用a標簽調用js，可以使按鍵更美觀，就不像button標簽那樣，就算插入圖標，也會有一圈外框框，不太好看。
• 關于自動連播那里，網上的教程是直接告訴你用addEventListener，但是你直接加在進去是不行的，會報錯，大意為獲取不到對象，網頁中的javaScript腳本代碼往往需要在文檔加載完成后才能夠去執行，否則可能導致無法獲取對象的情況，加入window.onload則可以在文檔加載后再觸發，可避免報錯。

實現效果：

播放：

暫停：

在這里的圖標用的是谷歌的material design，開源的，大家可以上網搜索，或者自己畫圖標替換。

最后的話:

初學者可能對更深層的原理認知還不到位，有錯漏請大家評論指正！這篇文章也是將網上的教程大概整合一下，方便更多初學者能夠更快地看懂理解，與君共勉！一起學習！

總結

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

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