65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 HTML5 和 JavaScript 创建音乐播放列表

MattZand
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.50/5 (2投票s)

2019年8月14日

CPOL

9分钟阅读

viewsIcon

75254

了解如何利用 HTML5 音频和视频标签的强大功能

有许多 JavaScript 库可以用于在网站上展示视频和播放音乐内容。然而，随着 HTML5 及其音频和视频元素的出现，开发人员现在可以轻松地将视频和音频播放器添加到他们的网站，而无需使用第三方 JavaScript 库。在本教程中，我们将回顾 audio 标签的主要属性，并展示如何通过添加一些 JavaScript 代码来创建一个音乐播放列表。

项目背景

作为一名网页设计师或自由职业者，您可能会遇到需要将一些音频或视频文件集成到网页中的情况。例如，您正在为一家夜总会构建网站，他们要求您添加背景音乐或一位书籍作者想在其网站上添加一个预告片。其他情况是您只需要在网页上列出几个音频或视频文件。在所有提到的场景中，您都可以简单地使用 HTML5 来将音频或视频文件添加到页面。此外，大多数 JS 音频播放器库存在两个问题：

  1. 它们通常附带许多可能在您的项目中用不到的功能或选项；然而，您仍然需要下载并使用所有库文件。这可能会增加服务器和网站的额外负载。
  2. JS 库有时会与其他 JS 框架冲突，或者当您更新 JS 框架或 CMS 插件时会停止工作。例如，您可能会安装新版本的 jQuery，却不知道您的音频 JS 库不支持它。总之，考虑到第三方 JS 库的缺点以及 HTML5 的易用性，强烈建议在需要时使用 HTML5 音频标签。

在本简短教程中，我们将向您展示如何使用 HTML5 <audio /> 元素，并通过基本 JavaScript 将其扩展为一个基本的音乐播放列表。

值得注意的是，虽然在本教程中我们侧重于 HTML5 audio 标签，但本教程中涵盖的所有主题都可以应用于 HTML5 video 标签。这意味着，您可以按照此方法创建一个简单的 YouTube 频道，只需将 <audio> 替换为 <video> 标签即可。

项目先决条件

要学习并完成本教程，需要具备 HTML5、CSS 和 JavaScript 的基本知识。

项目文件

单击 此处 下载项目源文件。您也可以查看其 实时演示。

HTML5 音频标签概述

以下是将 audio 添加到网页的简单语法。

<audio src="./files/audio.ogg">
</audio>

您可以查看 W3School 网站，了解基本的 audio 标签元素，如媒体源、媒体格式、浏览器支持等。在本教程中，我们将简要回顾其主要属性，然后继续使用 JavaScript 进行更高级的用法，以实现对 HTML5 audio 标签的更多操作。

HTML5 音频标签属性

<audio /> 标签附带的属性可以帮助您管理页面上媒体的行为。主要属性有 **Controls**、**Autoplay**、**Loops** 和 **Preload**。

**Controls** 属性包含以下默认音频控件组件：**播放**和**暂停**按钮、**音量控制**以及音轨时长。您可以像下面这样将其添加到 **audio** 标签中：

<audio controls="controls">
<source src="./files/audio.ogg"/>
</audio>

**Autoplay** 属性可以在页面加载时自动播放音频，而无需显示播放器。您可以像下面这样添加此属性：

<audio autoplay="autoplay">
<source src="./files/audio.ogg"/>
</audio>

**Loop** 允许音频反复播放。您可以像下面这样添加此属性：

<audio loop="loop"autoplay >
<source src="./files/audio.ogg"/>
</audio>

Preload 属性告诉浏览器如何处理媒体文件。此属性接受以下值：

  1. auto：如果用户需要，浏览器可以下载整个文件（这是默认值）。
  2. metadata：用户可能不需要整个媒体，所以浏览器只能检查文件的元数据（长度），并且
  3. none：如果用户不需要，浏览器将不会下载文件。这可以用来最小化服务器负载。

下面的代码告诉浏览器，在用户单击 **Play** 按钮之前，不要加载音频文件。

<audio preload="none">
<source src="./files/audio.ogg"/>
</audio>

带 JavaScript 的音频标签

正如我们在上一节中所讨论的，仅使用 HTML5 标签可以让浏览器下载并播放音乐或音频。然而，通过将 JavaScript 代码添加到 HTML 中，我们可以完成更多工作。以下是一些 JS 有用的情况。例如，下面的代码展示了 JS 执行音频播放和暂停操作的一个简单用法。

HTML 代码很简单。JS 通过 ID 选择 HTML 元素，并使用 audio_info **全局变量**来监听和操作音频播放器的行为。因此，当我们运行下面的代码时，用户就可以播放和暂停音频。要利用 JS 在音频标签操作中的强大功能，我们需要深入探索 HTML audio_info 的属性和方法。

<audio id="audio1">
<source src="sample.mp3" />
</audio>
<button id="play">Play</button><button id="stop">Stop</button>

用于添加 Play 和 Pause 功能的 JS 代码是：

    var audio_info = document.getElementById('audio1');
    document.getElementById('play').addEventListener('click', function(){
        audio_info.play();
    }, false);
//
    document.getElementById('stop').addEventListener('click', function(){
        audio_info.pause();
    }, false);

HTML5 媒体属性

audio_info 全局变量可以接受以下属性：

  • autoplay：行为类似于属性的值（见上一节）。
  • currentTime：包含当前的播放时间（以秒为单位）。设置此属性将把播放时间设置为定义的值。
  • duration：（**只读**）长度（以秒为单位）。
  • paused：（**只读**）指示播放是否已暂停。
  • volume：获取或设置媒体元素的音量：0.0 为静音，1.0 为最大音量。

HTML5 媒体方法

该元素还有一些方法，我们在上一节中已经看到了 play() 和 pause()，这里是其他的：

  • canPlayType (mimetype)：确定浏览器是否可以播放传入参数的 mimetype。此函数可以返回：如果浏览器无法播放该类型，则为空（空 string）；如果浏览器似乎可以播放该类型，则可能返回 "probably"；如果无法确定该类型是否可播放，则可能返回 "maybe"。
  • fastSeek (time)：这将直接跳转到指定的时间。
  • load()：此方法将开始从服务器加载媒体。

当使用 <audio /> 标签执行操作时，会触发一些事件，在将所有这些事件与我们的音乐播放器项目一起使用之前，让我们先回顾一下一些事件。

HTML5 媒体事件

以下是我们可以在 audio 元素上使用的事件列表：

  • progress：用户代理正在获取媒体数据。
  • error：获取媒体数据时发生错误。
  • play：开始播放。在 play() 方法返回后，或者当 autoplay 属性导致开始播放时触发。
  • pause：暂停播放。在 pause() 方法返回后触发。
  • loadeddata：用户代理可以第一次渲染当前播放位置的媒体数据。
  • waiting：播放停止，因为下一帧不可用，但用户代理预计该帧很快就会可用。
  • playing：开始播放。
  • canplay：用户代理可以恢复播放媒体数据，但估计如果现在开始播放，媒体资源将无法以当前播放速率播放到结束，而无需停止以进一步缓冲内容。
  • seeking：seeking IDL 属性变为 true，并且 seek 操作花费的时间足够长，以至于用户代理可以触发该事件。
  • seeked：seeking IDL 属性变为 false。
  • timeupdate：当前播放位置在正常播放过程中或以一种特别有趣的方式（例如不连续地）发生了变化。**注意**：此事件每秒触发一次。
  • ended：由于媒体资源已到达末尾而停止播放。
  • volumechange：volume 属性或 muted 属性已更改。在相关属性的 setter 返回后触发。

更多事件可以在以下网址找到：http://www.w3.org/wiki/HTML/Elements/audio#Media_Events

音乐播放器

现在我们已经学习了如何将 JS 与 HTML5 audio 标签结合使用，是时候将它们整合起来构建我们的音乐播放器了。提醒一下，我们在上一节中回顾的事件列表将在创建音乐播放器时派上用场。我们将项目分为两部分。在第一部分中，我们运行 HTML 和 JS，通过使用一些事件来获取音频元素的信息。在第二部分中，我们将完全扩展我们的脚本来构建我们的音乐播放列表。

获取音频元素信息

在这一部分，我们将使用以下 HTML 和 JS 代码在浏览器控制台中显示信息。

//HTML part
<audio id="audio2" controls>
    <source src=" sample.mp3" />
</audio>
//JS part
    var audio_info = document.getElementById('audio2');
    audio_info.addEventListener('playing', function(e){
        console.log('Audio playback has started ...');
        console.log('Playback started at : '+ e.target.currentTime +" seconds");
    }, false);
    audio_info.addEventListener('pause', function(e){
        console.log('Audio playback has been paused ...');
        console.log('Playback paused at : '+ e.target.currentTime +" seconds");
    }, false);

    audio_info.addEventListener('ended', function(e){
        console.log('Playback has ended');
    }, false);
    audio_info.addEventListener('volumechange', function(e){
        console.log("Volume has changed ...");
        console.log("Volume is now "+ e.target.volume);
    }, false);

在之前的 JS 代码中，我们完成了以下操作：首先，我们通过 ID 获取音频元素并将其存储在一个变量：audio_info，然后我们为 audio 元素添加以下事件的监听器：

  • playing, callback 将会记录字符串：音频播放已开始，并提供有关元素 currentTime 的信息，当用户单击播放按钮时。尝试开始、暂停，然后再次开始，以查看 currentTime 信息更新。
  • playing，当媒体暂停时触发。当用户暂停播放时，将调用 callback。
  • ended，当媒体结束时触发。
  • volumechange，当音量（元素的音量，不是您的计算机音量）发生变化时触发，callback 将记录音量值。

对于所有事件，我们都使用了 event target 来获取有关音频元素的信息，而没有使用（上一节中讨论的）audio_info 变量。在这里，我们尝试了一个 audio_info 全局变量的替代解决方案。因此，您可以在音乐播放器项目中选择使用其中任何一个。这意味着，您可以选择使用全局作用域变量还是 event target 来获取音频元素的信息。

播放列表部分

现在我们进入第二部分，在真正的音乐播放列表中使用 <audio /> 元素。在这一部分，我们将创建一个小型工具，它可以播放多个文件；这意味着在文件结束时，播放器将开始播放下一个音频文件。我们还将允许用户停止音乐，并更改音量。

这是 HTML 代码：

<div id="music_list">
    <audio controls autoplay></audio>
</div>

这是 JavaScript 代码：

function () {
    // Playlist array
    var files = [
        "sample1.mp3",
        "sample2.mp3",
        "sample3.mp3"
    ];

    // Current index of the files array
    var i = 0;

    // Get the audio element
    var music_player = document.querySelector("#music_list audio");

    // function for moving to next audio file
    function next() {
        // Check for last audio file in the playlist
        if (i === files.length - 1) {
            i = 0;
        } else {
            i++;
        }

        // Change the audio element source
        music_player.src = files[i];
    }

    // Check if the player is selected
    if (music_player === null) {
        throw "Playlist Player does not exists ...";
    } else {
        // Start the player
        music_player.src = files[i];

        // Listen for the music ended event, to play the next audio file
        music_player.addEventListener('ended', next, false)
    }

})();

显然，您可以通过通过 Ajax 或 Node.JS 将 JS 连接到数据库来加载音频文件，或者为其添加更华丽的 CSS 样式来改进此 JS 代码。同样，您可以使用 jQuery 选择器来选择和操作 HTML 元素。

结论

HTML5 <audio /> 提供了轻松将声音嵌入网页的能力。正如我们讨论和回顾了它的属性、方法和事件，您会注意到通过使用简单的 JS 代码以及我们的 HTML5 音频标签，我们可以完成更多工作。此外，如果您喜欢使用 HTML5 <video> 标签而不是 audio，您仍然可以遵循并使用本教程中讨论的主题。

值得注意的是，除非您使用服务器端编程语言或加密您的 JS 代码；否则，所有音乐曲目源文件都对您的网站访问者可见（这意味着他们可以免费下载）。因此，如果您想创建一个简单的电子商务网站来销售您的专辑或向用户收取音乐歌曲的费用，您需要进行额外的服务器端编码。

历史

  • 2019 年 8 月 14 日：初始版本
© . All rights reserved.