HTML5的Audio标签使用详解

2015-8-18 云破天开 网站 评论(12) 阅读(2343)

一直在纠结360浏览器极速模式下不支持music标签,在自己网页里放歌曲,在极速模式下不能播放跟360投诉过也没有解决。今天发现了HTML5的Audio标签,解决了我一直以来纠结的问题。看来确实该用点新技术了。下面我把使用HTML5播放音乐的方法分享给大家。


HTML5 audio

在HTML5标准网页里面,我们可以运用audio标签来完成我们对声音的调用及播放。以下是最经常见到的运用HTML5三种基本格式:

1.最少的代码

<audio src="song.ogg" controls="controls"></audio>

2.带有不兼容提醒的代码

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

3.尽量兼容浏览器的写法

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

HTML5音频格式

当前,HTML5 Audio标签支持三种格式的音频,分别是wav mp3和ogg格式。而目前主流浏览器对他们的支持如下:

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis    
MP3    
Wav    

IE8以及IE8以下不支持HTML5的audio标签

HTML 5 Audio属性

  1. autoplay:唯一可选值为autoplay,出现autoplay属性并准确赋值时,音频将会自动播放
  2. controls:唯一可选值为controls,出现controls属性并准确赋值时,音频播放控件将会显示,控件包括:播放、暂停、定位、音量、全屏切换、字幕(如果可用)、音轨(如果可用)。
  3. loop:唯一可选值为loop,出现loop属性并准确赋值时,音频将会循环播放。
  4. preload:可选值有auto(当页面加载后载入整个音频)、meta(当页面加载后只载入元数据)和none(当页面加载后不载入音频) 如果设置了前面的autoplay属性,那么preload将会被忽略。
  5. src:指定音频URL地址,可以是相对的URL也可以是绝对的URL 当然还可以像第2和第3个例子一样,用source标签来指定源。



标签: 网站

评论:

孤军奋战
2015-09-13 19:03
正在学习h5
清风美文
2015-09-11 16:24
最近正在研究html5呢,做梦都是代码.
雪鹰领主
2015-09-10 13:49
[思考]
园子大魔王
2015-09-09 19:52
正在狂撸html5
朱海涛自媒体
2015-08-31 19:46
写的不错支持一下
mntpz.com
2015-08-23 08:42
呵呵,用的阿里ECS。
mntpz.com
2015-08-21 20:36
照例看看。还渲染在七夕里,博客都不更新了哈?
御坂网络
2015-08-21 13:53
要是浏览器没有兼容问题该多好啊
云破天开
2015-08-21 14:05
@御坂网络:是啊,那开发起来就省事多了。
wys.me
2015-08-19 07:44
呵呵,现在是html5的时代。这也会过去的。
云破天开
2015-08-19 10:47
@wys.me:很久没关注技术了。感觉跟不上时代了。

发表评论: