技術標籤：JSjavascriptcss音樂播放元件

效果樣式

介紹

仿照網易雲音樂的音樂播放元件，使用JavaScript動態生成內容，無需更改原有HTML結構，只需要匯入js與css檔案即可在頁面中擁有與網易雲音樂同款的音樂播放元件

GitHub地址
演示頁面

使用

1.匯入music.js和music.css檔案

<script src="./music.js"></script>
<link rel="stylesheet" href="music.css">

2.music.js中預設提供了三首本地歌曲與三張預設封面，歌曲與位於檔案目錄中的images與Localmusic資料夾中

3.提供了三個用於插入與刪除歌曲的方法

//新增單個歌曲
pushMusic();//接收一個物件作為引數，其中物件的musicName屬性用於指定歌曲地址，musicCover屬性用於指定歌曲的封面地址
pushMusic({
"musicName":"./test.mp3",
"musicCover":"./test.jpg"
});

//新增多個歌曲
pushMusicList(objArr);//接收一個物件陣列作為引數，其中物件的musicName屬性用於指定歌曲地址，musicCover屬性用於指定歌曲
pushMusicList
 
([{
"musicName":"./test1.mp3",
"musicCover":"./test1.jpg"
},{
"musicName":"./test2.mp3",
"musicCover":"./test2.jpg"
}]);

//刪除原有所有歌曲
clearMusicList();//該方法將會清除已新增的所有歌曲，需要新增歌曲後才能播放