JavaScriptでBGMの歌詞を追加する方法

バックグラウンド ミュージックと歌詞は、Web サイトのデザインでよく使用される要素の 1 つであり、Web サイトをより魅力的でパーソナライズしたものにすることができます。この記事では、JavaScript を使用して Web サイトに BGM と歌詞を追加する方法を説明します。

1. バックグラウンド ミュージックの追加

バックグラウンド ミュージックを追加するには、オーディオをホストする 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">

これで、ユーザーが再生ボタンをクリックするとオーディオの再生が開始され、ユーザーが一時停止ボタンをクリックすると、音声は一時停止されます。 ; [停止] ボタンをクリックすると、音声は一時停止され、開始位置に戻ります。 ; 音声の音量を制御するには、音量スライダーを使用します。

2. BGM の歌詞を追加する

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 サイトの他の関連記事を参照してください。