HTML5之音频Audio标签的应用

转载 2012年03月22日 13:42:37

HTML5之音频标签的应用




        在过去,我们如果想在Web上播放音乐,基本都是通过Flash来播放,但并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放音乐了。

audio标签:


目前HTML5的audio标签仅支持3种音频格式,如下表:

 

IE9

FireFox 5.0

Safari 5.5

Chrome 12

Opera 11.5

Mp3

×

×

Ogg

×

×

Wav

×

×





Audio标签的属性有:

属性

值(可省略)

描述

src

url

要播放的音频的 URL,路径可为网络路径或相对路径。

controls

controls

向用户显示控件,比如播放按钮。

loop

loop

每当音频结束时重新开始播放。

preload

preload

音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。

autoplay

autoplay

则音频在就绪后马上播放。




编辑代码
<h1>最近觉得《大高原》这首歌不错,就在案例中使用了:</h1>
<audio src="http://zhangmenshiting2.baidu.com/data2/music/5814678/5814678.mp3?xcode=0f479d949c4372d1165aae570e00d8bd&mid=0.76911343441060" controls="controls" autoplay="true">您的浏览器不支持 audio 标签。</audio>

HTML5<audio>标签--音频播放全解析

HTML5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在Html5还没确定之前,如果想要在听音乐看视频唯一的办法就是用flash 意思是当你没有给浏览器装...
  • CPPCPPCPPCPP
  • CPPCPPCPPCPP
  • 2016年12月15日 00:45
  • 1243

html5 audio读取文件流播放音频

最近要解决一个html5 播放音频的问题,在前台地址中不能直接写
  • xxzblog
  • xxzblog
  • 2014年11月20日 14:21
  • 2529

HTML5中使用audio元素播放音频

HTML5中的audio元素播放音频简介
  • daviemeng
  • daviemeng
  • 2017年08月02日 21:19
  • 426

【前端知识点】HTML5 浅谈 媒体标签<video><audio>

html5播放器细谈,从大众自带浏览器 到 wechat和QQ以x5内核的浏览器,以及UC其他特殊的浏览器在此不再细谈:)当然也会分析iphone ios系统和Android手机系统的差别。【基本属性...
  • chaunceyw
  • chaunceyw
  • 2016年07月21日 16:51
  • 2783

html5音频属性<audio>以及常见手机开发坑

前言:h5新引入了一个播放音频的属性 音频格式    HTML5 Audio支持的格式有:wav,mp3和ogg格式,首先看看各大浏览器的支持情况 浏览器 MP...
  • CROOTJAVA
  • CROOTJAVA
  • 2018年01月08日 21:52
  • 81

解决H5视频(video)音频(audio)不兼容IE8的问题

HTML5 不兼容低版本IE的问题,找了很多种解决方式,最终找到一种比较简单易操作的。 解决办法是引入html5media 这款插件。 使用html5media.js可以在所有浏览器上观看h...
  • mrliao0820
  • mrliao0820
  • 2017年09月06日 18:37
  • 335

HTML5用audio标签做一个最简单的音频播放器

在做系统的时候,要求做一个音频播放器,就在网上查找了一些资料,发现这样的资料还是很千篇一律的,EasyUI框架并没有给我们一个音频播放器的功能,在bootstrap上有,但是也是结合html5来写的,...
  • u010540106
  • u010540106
  • 2015年10月27日 21:30
  • 4506

html5 audio 速度问题

Audio playbackRate Example Canvas not supported Play Increase speed Decrease spe...
  • bonlog
  • bonlog
  • 2014年03月15日 07:53
  • 3142

HTML5中 audio标签的样式修改

由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比...
  • l333f
  • l333f
  • 2017年03月08日 17:48
  • 4348

html5 audio标签切换播放音乐的方法

html5 audio标签切换播放音乐的方法 测试1 测试2 测试3 测试4 $('.ceshiqiehuan').each(function () { $...
  • oMiracle123
  • oMiracle123
  • 2017年01月13日 16:05
  • 2205
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5之音频Audio标签的应用
举报原因:
原因补充:

(最多只允许输入30个字)