Comment ajouter des paroles de musique de fond avec javascript

La musique de fond et les paroles sont l'un des éléments couramment utilisés dans la conception de sites Web, elles peuvent rendre le site Web plus attrayant et personnalisé. Dans cet article, nous allons vous montrer comment ajouter une musique de fond et des paroles à votre site Web via JavaScript.

1. Ajouter une musique de fond

Afin d'ajouter une musique de fond, nous devons créer un élément HTML pour héberger l'audio. Un élément audio peut être créé en utilisant le code suivant :

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

Cela créera un élément audio avec l'identifiant "audio" et ajoutera le fichier audio "music.mp3" comme source.

Nous devons maintenant utiliser JavaScript pour contrôler la lecture audio, la pause, l'arrêt et le contrôle du volume. Nous pouvons créer un objet JavaScript appelé "audioPlayer" pour gérer ces fonctions. Voici le code complet :

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

Le code ci-dessus crée un objet nommé "audioPlayer" qui comprend les fonctions de lecture, pause, arrêt et contrôle du volume. Pour utiliser cet objet, assurez-vous d'ajouter le bouton correspondant et le curseur de volume au HTML :

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

Désormais, lorsque l'utilisateur clique sur le bouton de lecture, la lecture audio commencera ; lorsque l'utilisateur clique sur le bouton pause, l'audio se mettra en pause ; cliquez sur le bouton d'arrêt, l'audio se mettra en pause et reviendra à la position de départ ; utilisez le curseur de volume pour contrôler le volume de l'audio.

2. Ajouter des paroles de musique de fond

L'ajout de paroles de musique de fond nécessite l'ajout du fichier de paroles au site Web. Les fichiers de paroles existent généralement sous la forme de fichiers texte, où chaque ligne contient l'heure et le texte des paroles. Voici un exemple de fichier de paroles simple :

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

Dans cet exemple, la première ligne contient les informations sur la chanson, entre crochets. Chaque ligne suivante contient l'heure et le texte des paroles, l'heure étant entre crochets exprimée en minutes, secondes et fractions de seconde (mm:ss.xx).

Afin d'ajouter des paroles au site Web, nous devons créer un tableau appelé « paroles » qui contient l'heure et le texte de chaque ligne de paroles. Voici l'exemple de code :

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

Maintenant, nous devons créer un objet JavaScript nommé "lyricsDisplay" pour configurer l'affichage et la mise à jour des paroles. Voici le code complet :

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

Dans le code ci-dessus, nous créons un objet nommé "lyricsDisplay", qui inclut les fonctions d'affichage et de mise à jour des paroles. Pour utiliser cet objet, assurez-vous d'ajouter un div avec id = "lyrics" à votre HTML :

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

Maintenant, lorsque l'utilisateur jouera l'audio, les paroles seront mises en surbrillance au bon moment. Nous utilisons la méthode setInterval() et la propriété audio.currentTime pour mettre à jour les paroles actives. De plus, lorsque l'utilisateur clique sur les paroles, l'audio passe à l'heure correspondante.

Conclusion

Dans cet article, nous avons examiné comment ajouter une musique de fond et des paroles à votre site Web à l'aide de JavaScript. Pour ajouter de la musique de fond, vous devez d'abord créer un élément audio et utiliser JavaScript pour contrôler sa lecture, sa pause, son arrêt et son volume. Pour ajouter des paroles, vous devez les ajouter à un tableau et utiliser JavaScript pour configurer leur affichage et leur mise à jour. En utilisant ces techniques, vous pouvez ajouter de la vivacité et de la personnalisation à votre site Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!