如何使用HTML5的Audio标签打造WEB音频播放器

如何使用HTML5的Audio标签打造WEB音频播放器，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

目前，WEB页面上没有标准的方式来播放音频文件，大多数的音频文件是使用插件来播放，而众多浏览器都使用了不同的插件。而HTML5的到来，给我们提供了一个标准的方式来播放WEB中的音频文件，用户不再为浏览器升级诸如Adobe Flash、Apple QuickTime等播放插件，只需使用现代浏览器就可以聆听任何可以发出声音的WEB网站。

WEB中的Audio标签

HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中：<audio>标签。使用audio标签可以控制音频的播放与停止，循环播放与播放次数设置，以及播放位置等等

目前支持audio标签的浏览器有：

IE9，Firefox， Opera，Chrome和Safari都支持<audio>标签。

注意：IE8和更早的版本，不支持<audio>标签。

如何使用Audio

要在HTML5中播放音频，需要在body中插入以下代码：

<audio controls="controls">   <source src="music.ogg" />   <source src="music.mp3" />   <source src="music.wav" /> </audio>

你可以在<audio>和</audio>标签之间插入文字内容，这样如果浏览器不支持audio，那么会显示这些文字。

也许你会问auto中怎么会包含3个source标签呢？这是为了浏览器和音频格式的兼容性，浏览器制造商并非都同意使用某一种音频文件格式。例如，Chrome、Internet Explorer 9 (IE9) 和 Safari 浏览器不支持 WAV 文件，这是一种使用非压缩格式且正在衰败的标准。我们将每个视频文件名放在单独的 <source> 标签里，并且音频容器中的所有源标签都由<audio></audio> 构成，如下所示。那么，无论访问者使用什么浏览器，它都将自动选择所读取的第一个文件类型，并为您播放声音。

HTML5浏览器和音频格式兼容性

HTML5 让开发人员可以更轻松地提供大量WEB体验。<audio>标签是令人兴奋的新添内容，不再需要外部音乐播放器，使音频的提供像显示图像一样简单。有了基于标准的音频控件和让用户更易于与声音进行交互的新浏览器功能，你可以轻松的在WEB页面上定制MP3播放器了。

以上就上有关使用HTML5的Audio标签打造WEB音频播放器的全部内容，亿速云全面介绍编程技术、操作系统、数据库、web前端技术等内容。

看完上述内容，你们掌握如何使用HTML5的Audio标签打造WEB音频播放器的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！