最近這段時間總有小伙伴問小編博客音樂播放器（最好的本地音樂播放器）是什么，小編為此在網上搜尋了一些有關于博客音樂播放器（最好的本地音樂播放器）的知識送給大家，希望能解答各位小伙伴的疑惑。

博客音樂播放器（最好的本地音樂播放器）

做程序員已經六年有余了，也在互聯網上結實了很多程序員朋友，這幾天老是有人問我怎么找工作的問題，前端工作已經越來越難找了，要求也提高了很多，但是還是那句話，這些都只針對弱者,靠前端吃飯的永遠不愁工作。

(相關資料圖)

這里還是要說一下我自己建的前端學習群：594959296，從我一個人到現在的1731個都是看我每一篇文章看我每一個案例來的，可以說都是我們大前端的學霸啊，不定期分享干貨。想學到東西的都可以來，歡迎初學和進階中的小伙伴

效果展示

有人就說了，添加個音樂播放器還不很容易嗎？添加個

在網頁中就會出現這個一個東西：

也挺簡潔的哈！！

但是，如果是這樣的話，我還有更好的選擇：

網易云音樂外鏈播放器

1、打開網易云歌曲搜索鏈接；

2、搜一首你喜歡的歌，進入播放頁面；

3、已經看到了吧，專輯封面下面出現了“生成外鏈播放器”，我們點進去就會出現：

4、好吧（尷尬！），我們換一首趙雷的 成都

5、點擊 生成外鏈播放器 ，就會看到：

6、有 播放器尺寸、是否自動播放等功能可以選擇，方框中會出現預覽樣式。選好后，把下面的代碼放在你的頁面中就可以了。。

這可比

1、你已經看到了，并不是所有的音樂都可以用，有版權限制；

2、樣式不能修改，可能與你頁面的風格不符；

總之就是： 不能實現 充分的可定制性 。

自己動手豐衣足食，我們一起來寫一個音樂播放器吧！！

實現功能

先說說做出來是什么效果吧。在頁面中不出現播放器的樣式，而是通過點擊頁面中某個元素觸發，再次點擊可以切換歌曲。就這些吧，具體做著再說。。

布局

其實并沒有布局。頁面只有一個按鈕。

樣式

強行加個樣式，要對得起 強迫癥 這個稱號，一個按鈕也要做的漂亮一點。

JS部分

思路就是，點擊按鈕后，創建一個

1、要做音樂播放器，當然我們要有音樂才行。用一個數組來放音樂外鏈：

2、然后寫一下怎么在頁面創建

3、寫一下按鈕的onclick事件：

現在點擊按鈕后audio標簽就會被添加到頁面中。但是歌曲并不會播放，因為它現在還是這個樣子：

src并沒有值，所以肯定不會播放了。

4、下面就來給src屬性賦值吧。因為有三首歌曲，我們還要判斷一下添加哪個外鏈。

先獲取到剛才添加的audio標簽，如果獲取到了，取得index值，即當前播放的是第幾首歌（從 0 開始）。

思考一下： 第一次點擊 index = 0、第二次 index = 1、第三次 index = 2，這時我們的三首歌都播放過了，點擊第四下時 index = 3，應該停止播放的，所以 songs = [] 中要有一個占位的 空元素 。當點第五次時，歌曲列表要重新循環，所以讓此時的 index = 0。

邏輯還是很簡單的。。

細節處理

1、點我們第一次點擊按鈕時，向頁面中添加了一個audio標簽，第二次點擊時，就不必再次添加了，只需要修改src值就可以了。所以上面的代碼要修改：

添加前先判斷一下audio是否存在。

2、最后做一下簡單的封裝：

這就是一個完整的音樂播放器了。

3、調用其實就是執行go()函數，更新歌曲就修改一下songs[]數組就行了。。

今天的這個案例就寫完了，希望大家能夠學習到東西。

學習javascript也是有難度的，前提是你的html和css學的應該要很號，您不能連html這東東是干啥的都不知道就開始學javascript了，學乘除前，學好加減法總是有益無害的。

再說幾點建議：

不要急著看一些復雜的javascript網頁特效的代碼，這樣除了打擊你的自信心，什么也學不到

看網上什么幾天精通javascript的，直接跳過吧，會浪費你很多時間

這個案例就算做完了，想要完整代碼自己練習的小伙伴進我的群自助領取，已經上傳到群文件里了，群號：594959296，歡迎學習交流的小伙伴過來一起學習交流。