```這將會建立一"/> ```這將會建立一">
背景音樂和歌詞是網站設計中常用的元素之一,它們可以讓網站更具吸引力和個人化。在本文中,我們將介紹如何透過 JavaScript 添加背景音樂和歌詞到網站中。
為了新增背景音樂,我們需要建立一個 HTML 元素來承載音訊。可以使用以下程式碼建立音訊元素:
<audio id="audio" src="music.mp3"></audio>
這將建立一個 id 為 "audio" 的音訊元素,並將音訊檔案 "music.mp3" 新增為其來源。
現在我們需要使用 JavaScript 控制音訊播放、暫停、停止和音量控制。我們可以建立一個名為 "audioPlayer" 的 JavaScript 物件來處理這些功能。以下是完整的程式碼:
<audio id="audio" src="music.mp3"></audio> <script> var audioPlayer = { audio: null, playButton: null, pauseButton: null, stopButton: null, volumeSlider: null, init: function() { this.audio = document.getElementById("audio"); this.playButton = document.getElementById("play"); this.pauseButton = document.getElementById("pause"); this.stopButton = document.getElementById("stop"); this.volumeSlider = document.getElementById("volume"); this.bindEvents(); }, bindEvents: function() { var self = this; this.playButton.addEventListener("click", function() { self.audio.play(); }); this.pauseButton.addEventListener("click", function() { self.audio.pause(); }); this.stopButton.addEventListener("click", function() { self.audio.pause(); self.audio.currentTime = 0; }); this.volumeSlider.addEventListener("input", function() { self.audio.volume = self.volumeSlider.value / 100; }); } }; audioPlayer.init(); </script>
上面的程式碼建立了一個名為 "audioPlayer" 的對象,它包括播放、暫停、停止和音量控制功能。要使用此對象,請確保HTML 中添加相應的按鈕和音量滑塊:
<button id="play">播放</button> <button id="pause">暂停</button> <button id="stop">停止</button> <input type="range" id="volume" min="0" max="100" value="50">
現在,當用戶單擊播放按鈕時,音頻將開始播放;單擊暫停按鈕時,音頻將暫停播放;點擊停止按鈕時,音訊將暫停並返回到開始位置;使用音量滑桿可以控制音訊的音量。
新增背景音樂歌詞需要將歌詞檔案加入網站。歌詞檔案通常以文字檔案的形式存在,其中每一行都包含歌詞的時間和文字。以下是一個簡單的歌詞檔案範例:
[00:00.00]歌名 - 歌手 [00:10.00]第一句歌词 [00:15.00]第二句歌词 [00:20.00]第三句歌词 [00:25.00]第四句歌词
在這個範例中,第一行是歌曲訊息,以方括號包含。後面的每一行都包含歌詞的時間和文本,時間以方括號包含,以分鐘、秒和小數秒(mm:ss.xx)表示。
為了將歌詞加入網站中,我們需要建立一個名為 "lyrics" 的數組,其中包含每一行歌詞的時間和文字。以下是程式碼範例:
var lyrics = [ { time: 0, text: "第一句歌词" }, { time: 5, text: "第二句歌词" }, { time: 10, text: "第三句歌词" }, { time: 15, text: "第四句歌词" } ];
現在我們需要建立一個名為 "lyricsDisplay" 的 JavaScript 物件來設定歌詞的顯示和更新。以下是完整的程式碼:
<audio id="audio" src="music.mp3"></audio> <div id="lyrics"></div> <script> var audioPlayer = { // 略 }; var lyricsDisplay = { lyrics: null, display: null, activeLyric: -1, init: function(lyrics) { this.lyrics = lyrics; this.display = document.getElementById("lyrics"); this.render(); this.highlightLyric(); this.bindEvents(); }, render: function() { var html = ""; for (var i = 0; i < this.lyrics.length; i++) { html += "<div data-time='" + this.lyrics[i].time + "'>" + this.lyrics[i].text + "</div>"; } this.display.innerHTML = html; }, highlightLyric: function() { var self = this; var timer = setInterval(function() { self.activeLyric++; if (self.activeLyric == self.lyrics.length - 1) { clearInterval(timer); } for (var i = 0; i < self.lyrics.length; i++) { if (i === self.activeLyric) { self.display.children[i].className = "active"; } else { self.display.children[i].className = ""; } } var nextTime = self.lyrics[self.activeLyric + 1].time; var currentTime = audioPlayer.audio.currentTime; if (nextTime > currentTime) { break; } }, 100); }, bindEvents: function() { var self = this; audioPlayer.audio.addEventListener("timeupdate", function() { self.highlightLyric(); }); } }; var lyrics = [ { time: 0, text: "第一句歌词" }, { time: 5, text: "第二句歌词" }, { time: 10, text: "第三句歌词" }, { time: 15, text: "第四句歌词" } ]; audioPlayer.init(); lyricsDisplay.init(lyrics); </script>
在上面的程式碼中,我們建立了一個名為 "lyricsDisplay" 的對象,該物件包括歌詞的顯示和更新功能。要使用此對象,請確保 HTML 中新增一個具有 id = "lyrics" 的 div:
<div id="lyrics"></div>
現在,當使用者播放音訊時,歌詞將在正確的時間中高亮顯示。我們使用 setInterval() 方法和 audio.currentTime 屬性來更新活動歌詞。另外,當使用者點擊歌詞時,音訊將跳到相應的時間。
結論
在本文中,我們介紹如何使用 JavaScript 將背景音樂和歌詞加入網站。要新增背景音樂,首先需要建立音訊元素並使用 JavaScript 控制其播放、暫停、停止和音量。要新增歌詞,需要將其新增到陣列中,並使用 JavaScript 設定其顯示和更新。透過使用這些技術,您可以為您的網站添加一些生動和個性化的元素。
以上是javascript如何添加背景音樂歌詞的詳細內容。更多資訊請關注PHP中文網其他相關文章!