首页 > web前端 > 前端问答 > javascript如何添加背景音乐歌词

javascript如何添加背景音乐歌词

WBOY
发布: 2023-05-09 19:23:07
原创
1166 人浏览过

背景音乐和歌词是网站设计中常用的元素之一,它们可以让网站更具吸引力和个性化。在本文中,我们将介绍如何通过 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">
登录后复制

现在,当用户单击播放按钮时,音频将开始播放;单击暂停按钮时,音频将暂停播放;单击停止按钮时,音频将暂停并返回到开始位置;使用音量滑块可以控制音频的音量。

  1. 添加背景音乐歌词

添加背景音乐歌词需要将歌词文件添加到网站中。歌词文件通常是以文本文件的形式存在,其中每一行都包含歌词的时间和文本。以下是一个简单的歌词文件示例:

[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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板