Javascript 音樂庫

Javascript 能夠讓我們實現很多有趣的功能，其中一個很酷的功能就是音樂庫了。音樂庫指的是我們可以在網站上存儲和播放音樂，這樣我們就能讓網站變得更加生動有趣。

讓我們來看一下如何創建一個音樂庫，首先我們需要定義一個數組來存儲音樂，然后我們可以在數組中加入一些歌曲，例如：

var musicList = [
{
name: "Shape of You",
artist: "Ed Sheeran",
url: "music/shape-of-you.mp3",
cover: "images/shape-of-you.jpg"
},
{
name: "Despacito",
artist: "Luis Fonsi",
url: "music/despacito.mp3",
cover: "images/despacito.jpg"
},
{
name: "See You Again",
artist: "Wiz Khalifa ft. Charlie Puth",
url: "music/see-you-again.mp3",
cover: "images/see-you-again.jpg"
}
];

這里我們定義了一個 musicList 數組，其中包含了三首歌曲。每首歌曲都有歌曲名、藝術家、歌曲文件的 URL 和封面的 URL。我們可以繼續添加更多的歌曲到數組中。

接著，我們需要使用 HTML5 的 Audio 元素來播放我們的音樂。Audio 元素是 HTML5 的新功能，可以很方便地在網頁中播放音樂：

var audio = new Audio();
audio.src = musicList[0].url;
audio.play();

這里我們定義了一個新的 Audio 對象，并將第一首歌曲的 URL 賦值給它。然后我們調用 play 方法來播放音樂。我們還可以通過調用 pause 方法來暫停音樂，例如：

audio.pause();

除了播放音樂，我們還可以為音樂添加一些交互效果。例如，當我們切換歌曲時，可以自動更新封面圖片和歌曲信息。這可以通過監聽 Audio 元素的 ended 事件來實現：

audio.addEventListener("ended", function() {
currentMusicIndex++;
if (currentMusicIndex >= musicList.length) {
currentMusicIndex = 0;
}
audio.src = musicList[currentMusicIndex].url;
audio.play();
});

這里我們為 Audio 元素添加了一個 ended 事件監聽器。當一首歌曲播放完畢后，我們會自動切換到下一首歌曲，并更新頁面中的封面圖片和歌曲信息。

除了使用 Audio 元素播放音樂，我們還可以使用一些第三方庫來實現更好的音樂播放效果。例如，我們可以使用 SoundManager2 庫來實現更多的音效和交互效果：

var soundManager = new SoundManager2();
soundManager.setup({
url: '/path/to/swf/',
onready: function() {
// Ready to use; soundManager.createSound() etc. can now be called.
}
});

SoundManager2 庫還支持很多高級功能，例如跨瀏覽器支持和自定義音效控制。

這樣，我們就可以使用 Javascript 實現一個簡單的音樂庫了。當然，要實現更加完整和復雜的音樂庫，我們還需要考慮音樂文件的格式、存儲和索引等問題。