HTML5中audio标签的使用

HTML5中的新元素标签
src:音频文件路径。
autobuffer:设置是否在页面加载时自动缓冲音频。
autoplay:设置音频是否自动播放。
loop:设置音频是否要循环播放。
controls:属性供添加播放、暂停和音量控件。

这些属性和<video>元素标签的属性很类似

如何工作:

<audio src="song.mp3"></audio>

同样<audio></audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的:

<audio src="song.ogg" controls="controls">Your browser does not support the audio tag.</audio>

常用的控制函数:
1.load():加载音频、视频软件
2.play():加载并播放音频、视频文件或重新播放暂停的的音频、视频
3.pause():暂停出于播放状态的音频、视频文件
4.canPlayType(obj):测试是否支持给定的Mini类型的文件

可脚本控制的属性值:
1.autoplay:自动播放已经加载的的媒体文件
2.loop为true:的时候则设定为自动播放
3.currentTime:以s为单位返回从开始播放到目前所花的时间
4.controls:显示或者隐藏用户控制界面
5.volume:音量值,从0.0至1.0之间
6.muted:设置是否静音
7.autobuffer:是否进行缓冲加载

Audio 对象属性

属性                        描述

audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。

autoplay 设置或返回是否在就绪(加载完成)后随即播放音频。

buffered 返回表示音频已缓冲部分的 TimeRanges 对象。

controller 返回表示音频当前媒体控制器的 MediaController 对象。

controls 设置或返回音频是否应该显示控件(比如播放/暂停等)。

crossOrigin 设置或返回音频的 CORS 设置。

currentSrc 返回当前音频的 URL。

currentTime 设置或返回音频中的当前播放位置(以秒计)。

defaultMuted 设置或返回音频默认是否静音。

defaultPlaybackRate 设置或返回音频的默认播放速度。

duration 返回音频的长度(以秒计)。

ended 返回音频的播放是否已结束。

error 返回表示音频错误状态的 MediaError 对象。

loop 设置或返回音频是否应在结束时再次播放。

mediaGroup 设置或返回音频所属媒介组合的名称。

muted 设置或返回是否关闭声音。

networkState 返回音频的当前网络状态。

paused 设置或返回音频是否暂停。

playbackRate 设置或返回音频播放的速度。

played 返回表示音频已播放部分的 TimeRanges 对象。

preload 设置或返回音频的 preload 属性的值。

readyState 返回音频当前的就绪状态。

seekable 返回表示音频可寻址部分的 TimeRanges 对象。

seeking 返回用户当前是否正在音频中进行查找。

src 设置或返回音频的 src 属性的值。

textTracks 返回表示可用文本轨道的 TextTrackList 对象。

volume 设置或返回音频的音量。

Audio 对象方法

方法 描述
addTextTrack() 向音频添加新的文本轨道。

canPlayType() 检查浏览器是否能够播放指定的音频类型。

fastSeek() 在音频播放器中指定播放时间。

getStartDate() 返回新的 Date 对象,表示当前时间线偏移量。

load() 重新加载音频元素。

play() 开始播放音频。

pause() 暂停当前播放的音频。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,099评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,828评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,540评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,848评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,971评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,132评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,193评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,934评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,376评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,687评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,846评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,537评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,175评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,887评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,134评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,674评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,741评论 2 351

推荐阅读更多精彩内容