javascript如何添加背景音樂歌詞-前端問答-PHP中文網

背景音樂和歌詞是網站設計中常用的元素之一，它們可以讓網站更具吸引力和個人化。在本文中，我們將介紹如何透過 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中文網其他相關文章！