HTML音频：音乐播放网页

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

任务描述

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

本关网页显示效果如下图所示：

操作效果如下图所示：

相关知识

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

使用HTML5 audio元素播放

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

<audio controls="controls" height="100" width="100"><source src="./audio/青石巷.mp3" type="audio/mp3" /><source src="./audio/青石巷.wav" type="audio/wav" /><source src="./audio/青石巷.ogg" type="audio/ogg" /><embed height="100" width="100" src="song.mp3" />
</audio>

显示效果如图：

HTML5 <audio> 元素会尝试以 mp3、wav或 ogg 格式来播放音频。如果失败，代码将回退尝试元素。

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

为兼容多种浏览器，我们指定了许多不同格式的音频文件，因为不同浏览器支持不同的音频格式。具体如下：

属性

另外，我们还能为<audio>元素添加不同的属性，为播放器带来更多的功能，常见的一些属性如下表所示：

其中，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>

播放效果如下：

从实例中，我们可以看到：
autoplay= "autoplay"指定了页面加载完成之后自动播放，同样的，我们看到loop="loop"指定了播放完成之后自动循环播放。

提示：

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

使用雅虎媒体播放器播放

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

例如：

<a href="./audio/song.mp3">点击播放</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

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

效果如下：

在使用雅虎播放器时，我们需要添加一行脚本：

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

使用超链接播放

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

例如：

<a href="./audio/青石巷.mp3">点击播放</a>

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

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

任务要求

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

最深最平和的快乐，就是静观天地与人世，慢慢品味出它的美与和谐。这份快乐，乍一看也许平淡无奇，事实上它深远而悠长，在我，生命的享受就在其中了。

代码文件：

<!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>

HTML音频：音乐播放网页相关推荐

js 音频音乐播放封装函数代码
js函数代码 /*** 音频到网上找* src:音频链接**/ function playSound(src){var src;var borswer = window.navigator.userA ...
基于vue的前端音乐播放器网页
本着对vue的兴趣,试着用vue做了个仿照网易云样式的简单的音乐播放网页,用的是网易云的api,因为是抱着玩的心态做的,所以有些缺陷也就不完善了,写在博客上纪念一下. 发现音乐的界面,轮播图用了三秒定 ...
vue + element UI【实战】音乐播放器/语音条（内含音频的加载、控制，事件监听，信息获取，手机网页阴影的去除等技巧）
相关技巧,详见注释 <template><div class="container"><h2>{{ mu ...
php项目网页音乐播放器插件,基于HTML5 canvas和Web Audio的音频播放器插件
wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web A ...
10款Flash和Javascript网页音乐播放器
关联:9 Fresh jQuery Media Players 10款音乐播放器, 有基于javascript的网页音乐播放器,也有基于Flash的音乐播放器.赶快挑一款,分享你喜爱的音乐吧! 1. ...
用js创建audio对象实现网页迷你音乐播放器
主要是靠咋没的audio对象,我就不多说废话了,也不会说,直接上代码: HTML <!DOCTYPE html> <html><head><meta http ...
HTML5之audio实战，网页音乐播放器开发
今天我们就基于 HTML5 audio 来,开发一个网页音乐播放器. 在HTML5 新特性中,audio .video 是我们比较关心的新元素,我们终于可以脱离 Flash ,来开发音频.视频播 ...
原生html+js网页版简陋音乐播放器
本文属于html+js+css基础教程,今天准备撸一个简陋版的音乐播放器.主流的浏览器原本就支持影音播放功能非常强,这里是利用浏览器原本提供的音视标签audio实现个简陋的音乐播放器.由于教程不涉及到 ...
一个网页显示歌词的音乐播放器
使用方法: (点击下载) 首先你要下载歌词, 下载地址: https://www.kugeci.com/ . 下载的歌词需要图中这样格式, 有些会出现 [00:00:000] 或 [00:00:000 ...

HTML音频：音乐播放网页

HTML音频：音乐播放网页

任务描述

相关知识

使用HTML5 audio元素播放

属性

使用雅虎媒体播放器播放

使用超链接播放

任务要求

HTML音频：音乐播放网页相关推荐

最新文章

热门文章