So fügen Sie Hintergrundmusiktexte mit Javascript hinzu

Hintergrundmusik und Liedtexte sind eines der am häufigsten verwendeten Elemente beim Website-Design. Sie können die Website attraktiver und persönlicher machen. In diesem Artikel zeigen wir Ihnen, wie Sie über JavaScript Hintergrundmusik und Liedtexte zu Ihrer Website hinzufügen.

1. Hintergrundmusik hinzufügen

Um Hintergrundmusik hinzuzufügen, müssen wir ein HTML-Element erstellen, um das Audio zu hosten. Ein Audioelement kann mit dem folgenden Code erstellt werden:

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

Dadurch wird ein Audioelement mit der ID „audio“ erstellt und die Audiodatei „music.mp3“ als Quelle hinzugefügt.

Jetzt müssen wir JavaScript verwenden, um die Audiowiedergabe, Pause, Stopp und Lautstärkeregelung zu steuern. Wir können ein JavaScript-Objekt namens „audioPlayer“ erstellen, um diese Funktionen zu verarbeiten. Hier ist der vollständige Code:

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

Der obige Code erstellt ein Objekt namens „audioPlayer“, das Wiedergabe-, Pause-, Stopp- und Lautstärkeregelungsfunktionen enthält. Um dieses Objekt zu verwenden, stellen Sie sicher, dass Sie dem HTML die entsprechende Schaltfläche und den Lautstärkeregler hinzufügen:

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

Wenn der Benutzer nun auf die Wiedergabeschaltfläche klickt, wird die Audiowiedergabe gestartet. Wenn der Benutzer auf die Pause-Schaltfläche klickt, wird die Audiowiedergabe angehalten. Klicken Sie auf die Stopp-Taste, der Ton wird angehalten und kehrt zur Ausgangsposition zurück. Verwenden Sie den Lautstärkeregler, um die Lautstärke des Tons zu steuern.

2. Hinzufügen von Hintergrundmusiktexten

Das Hinzufügen von Hintergrundmusiktexten erfordert das Hinzufügen der Liedtextdatei zur Website. Liedtextdateien liegen normalerweise in Form von Textdateien vor, wobei jede Zeile die Zeit und den Text des Liedtextes enthält. Hier ist ein Beispiel für eine einfache Textdatei:

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

In diesem Beispiel enthält die erste Zeile die Songinformationen, eingeschlossen in eckige Klammern. Jede nachfolgende Zeile enthält die Zeit und den Text des Liedtextes, wobei die Zeit in eckigen Klammern in Minuten, Sekunden und Sekundenbruchteilen (mm:ss.xx) angegeben ist.

Um der Website Liedtexte hinzuzufügen, müssen wir ein Array namens „Lyrics“ erstellen, das die Zeit und den Text jeder Liedzeile enthält. Hier ist das Codebeispiel:

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

Jetzt müssen wir ein JavaScript-Objekt mit dem Namen „lyricsDisplay“ erstellen, um die Anzeige und Aktualisierung von Liedtexten einzurichten. Das Folgende ist der vollständige Code:

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

Im obigen Code erstellen wir ein Objekt mit dem Namen „lyricsDisplay“, das die Anzeige- und Aktualisierungsfunktionen von Liedtexten enthält. Um dieses Objekt zu verwenden, stellen Sie sicher, dass Sie ein Div mit der ID = „lyrics“ zu Ihrem HTML hinzufügen:

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

Wenn der Benutzer jetzt das Audio abspielt, werden die Liedtexte zum richtigen Zeitpunkt hervorgehoben. Wir verwenden die Methode setInterval() und die Eigenschaft audio.currentTime, um den aktiven Liedtext zu aktualisieren. Wenn der Benutzer außerdem auf den Liedtext klickt, springt der Ton zur entsprechenden Zeit.

Fazit

In diesem Artikel haben wir uns angesehen, wie Sie mithilfe von JavaScript Hintergrundmusik und Liedtexte zu Ihrer Website hinzufügen. Um Hintergrundmusik hinzuzufügen, müssen Sie zunächst ein Audioelement erstellen und JavaScript verwenden, um dessen Wiedergabe, Pause, Stopp und Lautstärke zu steuern. Um Liedtexte hinzuzufügen, müssen Sie diese zu einem Array hinzufügen und ihre Anzeige und Aktualisierung mithilfe von JavaScript einrichten. Durch den Einsatz dieser Techniken können Sie Ihrer Website etwas Lebendigkeit und Personalisierung verleihen.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Hintergrundmusiktexte mit Javascript hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!