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

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

WEB中的Audio标签

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

属性 描述
autoplay true | false 如果是 true,则音频在就绪后马上播放。
controls true | false 如果是 true,则向用户显示控件,比如播放按钮。
end numeric value 定义播放器在音频流中的何处停止播放。默认地,声音会播放到结尾。
loopend numeric value 定义在音频流中循环播放停止的位置,默认是 end 属性的值。
loopstart numeric value 定义在音频流中循环播放的开始位置。默认是 start 属性的值。
playcount numeric value 定义音频片断播放多少次。默认是 1。
src url 所播放音频的 url。
start numeric value 定义播放器在音频流中开始播放的位置。默认地,声音在开头进行播放。

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

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

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

如何使用Audio

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

  1. <audio controls="controls">
  2. <source src="music.ogg" />
  3. <source src="music.mp3" />
  4. <source src="music.wav" />
  5. </audio>

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

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

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

音频格式 Chrome Firefox IE9 Opera Safari
OGG 支持 支持 支持 不支持 不支持
MP3 支持 不支持 支持 不支持 支持
WAV 不支持 支持 不支持 支持 不支持

此外,不同浏览器音频空间外观也不一样。

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

下载地址

时间: 2024-10-18 14:51:50

使用HTML5的Audio标签打造WEB音频播放器的相关文章

HTML5之audio实战,网页音乐播放器开发

今天我们就基于 HTML5 audio  来,开发一个网页音乐播放器. 在HTML5 新特性中,audio .video 是我们比较关心的 新 元素,我们终于可以脱离 Flash ,来开发音频.视频播放器了,对于 一个HTML 新元素,无非就是 属性.事件 .方法等等,关于audio 的具体的属性.事件 .方法,请谷歌. 看我们的HTML代码: audio.html <!DOCTYPE html> <html> <head> <meta charset="

HTML5使用Audio标签实现音乐的播放与暂停

最近工作中遇见音乐列表并点击试听,可以试听与暂停的效果.其实HTML5实现这个功能还是很简单的. 首先在网页中嵌入音乐的外链 <a href="javascript:void(0);" onclick="music.changeClass(this,'media');" class="btn btn-green" data-id="edit_btn" data-width="440" data-hei

基于canvas和Web Audio的音频播放器

wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web Audio 的浏览器中工作.包括 Firefox, Chrome, Safari, Mobile Safari 和 Opera浏览器. 在线演示:http://www.htmleaf.com/Demo/201503151525.html 下载地址:http://www.htmleaf.com/html

关于HTML5中audio音频播放器的一些理解

最近由于工作需要音频,了解到了HTML5中新兴的audio音频播放器.关于它本身的自带的属性不过多介绍,但是需要着重提到的就是它自身就有play()和pause()两个函数可以拿来直接使用,也就是我们经常遇到的播放和暂停功能.下面是我写的实例,有兴趣的朋友可以下载附件观看.今天晚上能把这个问题搞出来,基本上HTML5中audio的一些常见,常用的需求都可以解决了.开心- <!DOCTYPE HTML> <html> <head> <meta charset=&qu

Html5之高级-5 HTML5音频处理(在H5中播放音频、编程实现音频播放器)

一.在HTML5中播放音频 audio 元素 - audio元素可以实现在HTML页面中嵌入音频内容,该元素的属性可以设置是否自动播放.预加载及循环播放等 - audio元素提供了播放.暂停和音量控件来控制音频 - 使用audio元素提供三种音频格式的文件:MP3.Ogg.Wav - MP3: 采用mpeg音频解码器 - Ogg: 采用ogg音频解码器 - Wav: 采用wav音频解码器 - 语法结构 audio 属性 - audio 元素支持以下属性 - src: 指定播放文件的URL,可通过

【jquery】一款不错的音频播放器——Amazing Audio Player

前段时间分享了一款视频播放器,点击这里.今天介绍一款不错的音频播放器——Amazing Audio Player. 介绍: Amazing Audio Player 是一个使用很方便的 Windows 和 MAC 应用程序,允许你创建 HTML5 音频播放器的网站.该音频播放器兼容 iPhone,ipad,Android,Chrome,Firefox,Safari,Opera 和 IE 7 / 8 / 9 / 10.同时它也可以发布成为一个 WordPress 的音频播放器插件,Joomla 音

HTML5和jQuery轻量级音频播放器

Light-AudioPlayer是一款基于jQuery,HTML5和CSS3的轻量级音频播放器插件.该音乐播放器采用CSS3制作界面,具有体积小,自适应各种屏幕等特点.可以在桌面和移动设备中正常工作.该音乐播放器的特点有: 轻量级:整个插件在JS.CSS压缩后最小只有4KB 快速响应:采用CSS3特性,自适应各种屏幕,使Light AudioPlayer在手机和平板上也能良好的运作 触摸支持:你可以用光标,也可以用你的手指.每一个动作都有它的触摸事件的定义和功能 JavaScript被禁用?不

HTML5实现Winamp2.9音频播放器插件

Winamp2-js是一款使用html5和javascript来实现Winamp 2.9音频播放器的插件.该Winamp音频播放器插件有支持拖拽文件,自定义皮肤,支持可视化模式等特点.特点还有: 实际的Winamp皮肤文件存储在本地计算机上,你可以任意调用自己的Winamp 2皮肤. 可以通过拖拽.弹出按钮或"options"按钮来调用本地音频文件或皮肤. 有两种可视化模式:示波器和曲谱模式. 支持热键. 支持"Shade"迷你模式. 在线演示:http://www

Android通过意图使用内置的音频播放器

如果实现一个音频文件的播放,那么在应用程序中提供播放音频文件功能的最简单的方式是利用内置的"Music(音乐)"应用程序的功能--即使用系统自带的或已安装好的音乐播放器来播放指定的音频文件. 本例比较简单,下面直接给出源代码: 布局文件activity_main: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http:/