バックグラウンド ミュージックと歌詞は、Web サイトのデザインでよく使用される要素の 1 つであり、Web サイトをより魅力的でパーソナライズしたものにすることができます。この記事では、JavaScript を使用して Web サイトに BGM と歌詞を追加する方法を説明します。
バックグラウンド ミュージックを追加するには、オーディオをホストする 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">
これで、ユーザーが再生ボタンをクリックするとオーディオの再生が開始され、ユーザーが一時停止ボタンをクリックすると、音声は一時停止されます。 ; [停止] ボタンをクリックすると、音声は一時停止され、開始位置に戻ります。 ; 音声の音量を制御するには、音量スライダーを使用します。
BGM の歌詞を追加するには、歌詞ファイルを Web サイトに追加する必要があります。歌詞ファイルは通常、テキスト ファイルの形式で存在し、各行に歌詞の時間とテキストが含まれます。単純な歌詞ファイルの例を次に示します。
[00:00.00]歌名 - 歌手 [00:10.00]第一句歌词 [00:15.00]第二句歌词 [00:20.00]第三句歌词 [00:25.00]第四句歌词
この例では、最初の行は角括弧で囲まれた曲情報です。後続の各行には時刻と歌詞のテキストが含まれており、角括弧で囲まれた時刻は分、秒、小数秒で表されます (mm:ss.xx)。
Web サイトに歌詞を追加するには、歌詞の各行の時刻とテキストを含む「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 を使用して Web サイトに BGM と歌詞を追加する方法について説明しました。 BGM を追加するには、まずオーディオ要素を作成し、JavaScript を使用してその再生、一時停止、停止、音量を制御する必要があります。歌詞を追加するには、歌詞を配列に追加し、JavaScript を使用して表示と更新を設定する必要があります。これらのテクニックを使用すると、Web サイトに活気とパーソナライズを加えることができます。
以上がJavaScriptでBGMの歌詞を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。