자바스크립트로 배경음악 가사 추가하는 방법

배경 음악과 가사는 웹 사이트 디자인에서 일반적으로 사용되는 요소 중 하나이며 웹 사이트를 더욱 매력적이고 개인화할 수 있도록 해줍니다. 이 글에서는 JavaScript를 통해 웹사이트에 배경 음악과 가사를 추가하는 방법을 보여드리겠습니다.

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. 배경 음악 가사 추가

배경 음악 가사를 추가하려면 웹사이트에 가사 파일을 추가해야 합니다. 가사 파일은 일반적으로 텍스트 파일 형태로 존재하며 각 줄에는 가사의 시간과 텍스트가 포함됩니다. 다음은 간단한 가사 파일의 예입니다.

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

이 예에서 첫 번째 줄은 대괄호로 묶인 노래 정보입니다. 각 후속 라인에는 가사의 시간과 텍스트가 포함되어 있으며 시간은 분, 초, 분수 초(mm:ss.xx)로 표시되는 대괄호로 묶여 있습니다.

웹사이트에 가사를 추가하려면 가사 각 줄의 시간과 텍스트를 포함하는 "가사"라는 배열을 만들어야 합니다. 코드 샘플은 다음과 같습니다.

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"라는 개체를 만듭니다. 이 개체를 사용하려면 ID = "lyrics"인 div를 HTML에 추가해야 합니다.

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

이제 사용자가 오디오를 재생하면 가사가 올바른 시간에 강조 표시됩니다. setInterval() 메서드와 audio.currentTime 속성을 사용하여 활성 가사를 업데이트합니다. 또한 사용자가 가사를 클릭하면 오디오가 해당 시간으로 이동합니다.

결론

이 기사에서는 JavaScript를 사용하여 웹 사이트에 배경 음악과 가사를 추가하는 방법을 살펴보았습니다. 배경 음악을 추가하려면 먼저 오디오 요소를 생성하고 JavaScript를 사용하여 재생, 일시 중지, 중지 및 볼륨을 제어해야 합니다. 가사를 추가하려면 배열에 추가하고 JavaScript를 사용하여 표시 및 업데이트를 설정해야 합니다. 이러한 기술을 사용하면 웹 사이트에 생동감과 개인화를 추가할 수 있습니다.

위 내용은 자바스크립트로 배경음악 가사 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!