現在的網站開發越來越傾向于多媒體展示,在網站中加入一些背景音樂也是一種不錯的選擇。在HTML5中,我們可以使用audio標簽來設置多首音樂。
首先,我們需要在HTML文檔中添加一個audio標簽,并為其設置一個id名:
<audio id="music"></audio>
接下來,我們可以在JavaScript中設置音樂源文件,并為音樂添加控制按鈕:
let music = document.getElementById("music"); music.src = "music1.mp3"; let playBtn = document.createElement("button"); playBtn.innerHTML = "Play"; playBtn.onclick = function() { music.play(); }; let pauseBtn = document.createElement("button"); pauseBtn.innerHTML = "Pause"; pauseBtn.onclick = function() { music.pause(); }; document.body.appendChild(playBtn); document.body.appendChild(pauseBtn);
在上面的例子中,我們首先獲取了id為"music"的audio標簽,然后將音樂的源文件設置為"music1.mp3"。接著,我們創建了一個名為"playBtn"的按鈕,并為其添加了一個點擊事件,點擊該按鈕將啟動音樂播放。同理,我們還創建了一個名為"pauseBtn"的按鈕,點擊該按鈕將暫停音樂播放。最后,我們將這兩個按鈕添加到HTML文檔的body中。
如果我們需要添加多首音樂,只需要重復上面的步驟即可。在JavaScript中,我們只需要更改id名和音樂源文件即可實現多首音樂播放。同時,我們還可以為每首音樂添加控制按鈕,從而讓用戶可以自由控制播放和暫停。