### 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 `` 元素来进行播放。
显示效果如图:
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]
HTML5 `` 元素会尝试以 mp3、wav或 ogg 格式来播放音频。如果失败,代码将回退尝试 元素。
``元素定义外部内容的容器,能够将音频嵌入网页中。
为兼容多种浏览器,我们指定了许多不同格式的音频文件,因为不同浏览器支持不同的音频格式。具体如下:
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]
### 属性 ###
另外,我们还能为``元素添加不同的属性,为播放器带来更多的功能,常见的一些属性如下表所示:
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]
其中,preload会在页面加载完成后,自动的对音频进行预加载并准备播放。
举例:
你的浏览器不支持该音频格式。 Your browser does not support this audio format.
播放效果如下:
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]
从实例中,我们可以看到:
`autoplay= "autoplay"`指定了页面加载完成之后自动播放,同样的,我们看到`loop="loop"`指定了播放完成之后自动循环播放。
提示:
一种更简洁的写法是 ``,无需指定属性的值。
## 使用雅虎媒体播放器播放 ##
在播放音频时,一种更加简便的方式是:使用雅虎播放器。这样我们就无需转化为多种格式的音频,保障了各个浏览的兼容性。
例如:
点击播放时,会弹出完整的播放器。
效果如下:
![在这里插入图片描述][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]
**代码文件:**
HTML - 音频青石巷
你的浏览器不支持该音频格式。 Your browser does not support this audio format.
HTML5 audio 播放示例
注意:音频控件显示效果在不同浏览器中有些许差别。
[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