HTML音频：音乐播放网页

妖狐艹你老母 2021-05-16 20:37 793阅读 0赞

### HTML音频：音乐播放网页 ###

*  任务描述
 *  相关知识
 *   *  使用HTML5 audio元素播放
     *   *  属性
     *  使用雅虎媒体播放器播放
     *  使用超链接播放
 *  任务要求

# 任务描述 #

本关任务是编写一个在线播放音乐的网页，你将通过本关学习HTML播放音频的多种方式。

本关网页显示效果如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]  
操作效果如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]

# 相关知识 #

在网页中播放音频，对大家而言是一件习以为常的事，但若想要同时兼容多种浏览器和设备，并不是一件容易的事。所以，本关中，我们为大家讲解了几种通用的音频播放方案。

## 使用HTML5 audio元素播放 ##

我们可以使用 HTML5 `<audio>` 元素来进行播放。

显示效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]  
HTML5 `<audio>` 元素会尝试以 mp3、wav或 ogg 格式来播放音频。如果失败，代码将回退尝试 元素。

`<embed>`元素定义外部内容的容器，能够将音频嵌入网页中。

为兼容多种浏览器，我们指定了许多不同格式的音频文件，因为不同浏览器支持不同的音频格式。具体如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]

### 属性 ###

另外，我们还能为`<audio>`元素添加不同的属性，为播放器带来更多的功能，常见的一些属性如下表所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]  
其中，preload会在页面加载完成后，自动的对音频进行预加载并准备播放。

举例：

<body>
        <div align="center">
        <audio controls="controls" autoplay= "autoplay" loop="loop">
            <source src="./audio/song.mp3" type="audio/mp3" />
            <embed height="100" width="100" src="song.mp3" />你的浏览器不支持该音频格式。 Your browser does not support this audio format.
        </audio>
    </body>

播放效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]  
从实例中，我们可以看到：  
`autoplay= "autoplay"`指定了页面加载完成之后自动播放，同样的，我们看到`loop="loop"`指定了播放完成之后自动循环播放。

提示：

一种更简洁的写法是 `<audio controls autoplay loop></audio>`，无需指定属性的值。

## 使用雅虎媒体播放器播放 ##

在播放音频时，一种更加简便的方式是：使用雅虎播放器。这样我们就无需转化为多种格式的音频，保障了各个浏览的兼容性。

例如：

点击播放时，会弹出完整的播放器。

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 6]  
在使用雅虎播放器时，我们需要添加一行脚本：

## 使用超链接播放 ##

使用超链接的方式，浏览器会自动识别音频文件，然后使用“辅助应用程序”来播放音频文件。

例如：

播放效果同雅虎播放器效果类似。

大家可以根据具体的需求，选择其中的一种方式进行音频的播放。

# 任务要求 #

1.  添加`autoplay`属性，使音频可以自动播放；
2.  添加`loop`属性，使音频可以循环播放；
3.  添加`source`属性，加入mp3格式的文件链接，src属性值为`https://www.educoder.net/attachments/download/171679/青石巷.mp3`；
4.  在第16行中，添加`embed`标签播放方式，指定宽度和高度为100。

*  最深最平和的快乐，就是静观天地与人世，慢慢品味出它的美与和谐。这份快乐，乍一看也许平淡无奇，事实上它深远而悠长，在我，生命的享受就在其中了。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 7]  
    **代码文件：**

<!DOCTYPE html>
    
    <head>
        <meta charset="UTF-8" />
        <title>HTML - 音频</title>
    </head>
    
    <body>
        <h1 align="center">青石巷</h1>
        <br>
        <div align="center">
        <audio controls="controls" height="100" width="100" autoplay="autoplay" loop="loop">
            <source src="https://www.educoder.net/attachments/download/171686/青石巷.wav" type="audio/wav"/>
            <source src="https://www.educoder.net/attachments/download/171685/青石巷.ogg" type="audio/ogg"/>
            <source src="https://www.educoder.net/attachments/download/171679/青石巷.mp3" type="audio/mp3"/>
            <embed height="100" width="100" />
            你的浏览器不支持该音频格式。 Your browser does not support this audio format.
        </audio>
        </div>
        <br>
        <p align="center" style="color:grey;">HTML5 audio 播放示例</p>
        <p align="center" style="color:grey;"><small>注意：音频控件显示效果在不同浏览器中有些许差别。</small></p>
    </body>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20210516/96d7560a92d3462993777687053ec174.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20210516/716d083d7a4f4cd29ca585e504598129.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]: /images/20210516/a49d776c063b45888478cfc974419438.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]: /images/20210516/3ffc3d5f298a4cc88542bf2ca74b3ee7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]: /images/20210516/86c62ae7976e47afbf9810a710ada465.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]: /images/20210516/f9271de90150497f96039d7f2480359e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 6]: /images/20210516/183f1cf1d2164327a044cdaf441a9acc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 7]: /images/20210516/e55e363452804cfa85187a52b192bee8.png