目录

项目背景

项目先决条件

项目文件

HTML5音频标签概述

HTML5音频标签属性

带有JavaScript的音频标签

HTML5媒体属性

HTML5媒体方法

HTML5媒体事件

音乐播放器

获取音频元素信息

播放列表部分

结论

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

项目背景

作为网页设计师或自由职业者，您可能遇到需要将少量音频或视频文件集成到网页的情况。例如，您正在为夜总会建立一个网站，他们要求您在后台添加音乐曲目，或者图书作者想要在其网站上添加预告视频。在其他情况下，您只需要在网页上列出几个音频或视频文件。在所有上述场景中，您只需使用简单的HTML5将音频或视频文件添加到页面即可。此外，大多数JS音频播放器库存在两个问题：

  1. 它们通常带有许多可能未在您的项目中使用的功能或选项;但是，您需要下载并使用所有库文件。它可能会在您的服务器和网站上添加额外的负载。
  2. JS库有时会与其他JS框架发生冲突，或者在更新JS框架或CMS插件时停止运行。例如，您可能会安装新版本的jQuery，而不知道您的音频JS库不支持它。简而言之，考虑到第三方JS库的缺点和HTML5易用性，强烈建议在任何需要的地方使用HTML5音频标签。

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

很高兴的知道，尽管在本教程中我们专注于HTML5音频标记，但本教程中涉及的所有主题也可以应用于HTML5视频标记。这意味着，您可以按照此配方创建一个简单的YouTube频道，并替换<audio>为<video>标记。

项目先决条件

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

项目文件

单击此处下载项目源文件。你也可以看到它的现场演示。

HTML5音频标签概述

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

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

您可以查看W3School网站以探索基本音频标签元素，例如媒体源，媒体格式，浏览器支持等。在本教程中，我们将简要回顾其主要属性，并继续使用JavaScript进行更高级的使用，以便更多地使用HTML5音频标签。

HTML5音频标签属性

<audio />标签带有这将有助于您管理您的网页上的媒体行为的属性。主要属性是控制(Controls)，自动播放(Autoplay)，循环(Loops)和预加载(Preload)。

控制(Controls)属性具有以下默认音频控制元件：播放(Play)和暂停(Pause)按钮，音量控制(Volume control)和轨道持续时间。您可以将其添加到audio标签，如下所示：

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

即使没有显示播放器，自动播放(Autoplay)属性也会在页面加载时运行音频。您可以添加以下属性：

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

循环(Loops)允许音频一遍又一遍地播放。您可以添加以下属性：

<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标签可让浏览器下载并播放音乐或音轨。但是，我们可以通过向HTML添加JavaScript代码来完成更多工作。以下是JS派上用场的几种情况。例如，下面的代码显示了JS用于对音频执行播放和暂停操作的简单用法。

HTML代码很简单。JS按ID选择HTML元素，并使用audio_info global变量来监听和操纵音频播放器的行为。因此，当我们在代码下面运行时，用户可以播放和暂停音频。为了在音频标签操作中利用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），或许如果不知道这个类型是否可以播放的话。
  • fastSeek (time)：这将直接寻求给定的时间。
  • load()：此方法将开始从服务器加载媒体

当使用<audio />标签进行操作时，会触发一些事件，让我们在将所有事件与音乐播放列表项目一起使用之前检查一些事件。

HTML5媒体事件

以下是我们可以与audio元素一起使用的事件列表：

  • progress：用户代理正在获取媒体数据。
  • error：获取媒体数据时发生错误。
  • play：播放已经开始。在play()方法返回时，或当autoplay属性导致播放开始时激发。
  • pause：播放已暂停。pause()方法返回后触发。
  • loadeddata：用户代理可以首次在当前播放位置呈现媒体数据。
  • waiting：播放已停止，因为下一帧不可用，但用户代理希望该帧很快就可用。
  • playing：播放已开始。
  • canplay：用户代理可以恢复媒体数据的回放，但是估计如果现在要开始回放，则媒体资源不能以当前回放速率呈现直到其结束，而不必停止进一步缓冲内容。
  • seeking：搜索IDL属性已更改为true并且seek操作花费的时间足以使用户代理有时间触发事件。
  • seeked：寻求IDL属性更改为false。
  • timeupdate：当前播放位置作为正常播放的一部分或以特别有趣的方式改变，例如不连续。Note：此事件将每秒触发一次。
  • ended：播放已停止，因为已达到媒体资源的结尾。
  • volumechange：volume属性或muted属性已更改。在相关属性的setter返回后触发。

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

音乐播放器

现在我们已经学会了如何将JS与HTML5音频标签结合使用，现在是时候把事情放在一起并构建我们的音乐播放器了。提醒一下，我们在上一节中回顾的事件列表在创建音乐播放器时会派上用场。我们将项目分为两部分。在第一部分中，我们运行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元素并将其存储在变量中：audio_info，然后我们在audio元素上添加以下事件的侦听器：

  • playing, callback将记录string：当用户单击播放按钮时，音频播放已开始，并且有关currentTime元素的信息。尝试启动，暂停，然后再次启动以查看currentTime更新的信息。
  • playing，当媒体暂停时，这会被激活。当用户暂停播放时，将调用回调。
  • ended，这在媒体结束时被激活。
  • volumechange，当元素（不是你的计算机）的音量发生变化时会触发，回调会记录音量值。

对于我们使用事件目标获取有关音频元素的所有事件，我们没有使用audio_info变量。在这里，我们尝试了一种audio_info全局变量的替代解决方案（在上一节中讨论过）。因此，您可以在音乐播放列表项目中使用其中任何一个。这意味着，您可以在使用全局范围变量与事件目标之间进行选择，以获取有关音频元素的信息。

播放列表部分

现在我们转到第二部分，并在真正的音乐播放列表中使用<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代码之前，最好知道这一点;您的网站访问者可以看到所有音乐曲目源文件（也就是说，他们可以免费下载）。因此，如果您想创建一个简单的电子商务网站来销售您的相册或为您的音乐歌曲或向用户收费，您需要进行额外的服务器端编码。

更多推荐

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