Bagaimana untuk menambah lirik muzik latar belakang dengan javascript

Muzik latar belakang dan lirik adalah salah satu elemen yang biasa digunakan dalam reka bentuk tapak web, ia boleh menjadikan tapak web lebih menarik dan diperibadikan. Dalam artikel ini, kami akan menunjukkan kepada anda cara menambahkan muzik latar belakang dan lirik pada tapak web anda melalui JavaScript.

1. Tambah muzik latar belakang

Untuk menambah muzik latar belakang, kita perlu mencipta elemen HTML untuk mengehoskan audio. Elemen audio boleh dibuat menggunakan kod berikut:

<audio id="audio" src="music.mp3"></audio>

Ini akan mencipta elemen audio dengan id "audio" dan menambah fail audio "music.mp3" sebagai sumbernya.

Kini kita perlu mengawal main balik audio, jeda, berhenti dan kawalan kelantangan menggunakan JavaScript. Kita boleh mencipta objek JavaScript yang dipanggil "audioPlayer" untuk mengendalikan fungsi ini. Berikut ialah kod lengkap:

<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>

Kod di atas mencipta objek bernama "audioPlayer", yang merangkumi fungsi main, jeda, henti dan kawalan kelantangan. Untuk menggunakan objek ini, pastikan anda menambah butang dan peluncur kelantangan yang sesuai pada HTML anda:

<button id="play">播放</button>
<button id="pause">暂停</button>
<button id="stop">停止</button>
<input type="range" id="volume" min="0" max="100" value="50">

Kini apabila pengguna mengklik butang main, audio akan mula dimainkan dan apabila pengguna mengklik butang jeda, audio akan dijeda ;Apabila anda mengklik butang Berhenti, audio akan berhenti seketika dan kembali ke kedudukan permulaan Gunakan peluncur kelantangan untuk mengawal kelantangan audio.

2. Tambah lirik muzik latar belakang

Menambah lirik muzik latar belakang memerlukan penambahan fail lirik ke tapak web. Fail lirik biasanya wujud dalam bentuk fail teks, di mana setiap baris mengandungi masa dan teks lirik. Berikut ialah contoh fail lirik mudah:

[00:00.00]歌名 - 歌手
[00:10.00]第一句歌词
[00:15.00]第二句歌词
[00:20.00]第三句歌词
[00:25.00]第四句歌词

Dalam contoh ini, baris pertama ialah maklumat lagu, disertakan dalam kurungan segi empat sama. Setiap baris berikutnya mengandungi masa dan teks lirik, dengan masa yang disertakan dalam kurungan segi empat sama dinyatakan dalam minit, saat dan saat pecahan (mm:ss.xx).

Untuk menambah lirik pada tapak web, kita perlu mencipta tatasusunan yang dipanggil "lirik" yang mengandungi masa dan teks setiap baris lirik. Berikut ialah contoh kod:

var lyrics = [
  { time: 0, text: "第一句歌词" },
  { time: 5, text: "第二句歌词" },
  { time: 10, text: "第三句歌词" },
  { time: 15, text: "第四句歌词" }
];

Sekarang kita perlu mencipta objek JavaScript bernama "lyricsDisplay" untuk menyediakan paparan dan kemas kini lirik. Berikut ialah kod lengkap:

<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>

Dalam kod di atas, kami mencipta objek bernama "lyricsDisplay", yang merangkumi fungsi paparan dan kemas kini lirik. Untuk menggunakan objek ini, pastikan anda menambah div dengan id = "lirik" dalam HTML anda:

<div id="lyrics"></div>

Kini apabila pengguna memainkan audio, lirik akan diserlahkan pada masa yang betul. Kami menggunakan kaedah setInterval() dan sifat audio.currentTime untuk mengemas kini lirik yang aktif. Selain itu, apabila pengguna mengklik pada lirik, audio akan melompat ke masa yang sepadan.

Kesimpulan

Dalam artikel ini kami melihat cara menambah muzik latar belakang dan lirik pada tapak web anda menggunakan JavaScript. Untuk menambah muzik latar belakang, anda perlu mencipta elemen audio dan menggunakan JavaScript untuk mengawal main, jeda, berhenti dan kelantangannya. Untuk menambah lirik, anda perlu menambahkannya pada tatasusunan dan menggunakan JavaScript untuk menyediakan paparan dan kemas kininya. Dengan menggunakan teknik ini, anda boleh menambahkan sedikit kemeriahan dan pemperibadian pada tapak web anda.

Atas ialah kandungan terperinci Bagaimana untuk menambah lirik muzik latar belakang dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!