<audio> 标签简介
定义和用法
<audio> 标签定义声音,比如音乐或其他音频流。
实例
一段简单的 HTML 5 音频:
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
提示和注释
提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。
属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
preload | preload |
如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的音频的 URL。 |
全局属性
<audio> 标签支持 HTML 5 中的全局属性。
事件属性
<audio> 标签支持 HTML 5 中的事件属性。
播放暂定简单实例
<audio id="myaudio"></audio>
<span class="btnOne" id="play" onclick="playAudio();">Play</span>
<input type="text" id="audiofile" size="80" value="../images/wind.mp3" /> <script type="text/javascript">
var currentFile = "";
function playAudio() {
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
var btn = document.getElementById('play');
var audioUrl = document.getElementById('audiofile'); //判断时候有值
if (audioUrl.value !== currentFile) {
oAudio.src = audioUrl.value;
currentFile = audioUrl.value;
} //播放或停止
if (oAudio.paused) {
oAudio.play();
btn.textContent = "Pause";
} else {
oAudio.pause();
btn.textContent = "Play";
} } catch (e) {
alert(e);
}
}
}
</script>
简单实例2:使用Bootstrap按钮
<div class="container">
<p>../content/audio/海阔天空.mp3</p>
<button class="btn btn-primary">
<i class="glyphicon glyphicon-play"></i>
</button>
</div>
<audio id="myAudio"></audio>
<script>
var currentFile = '../content/audio/海阔天空.mp3';
//判断浏览器是否支持audio
if (!window.HTMLAudioElement) {
alert('您的浏览器不支持audio标签');
} else {
//绑定按钮事件
$('.btn').click(function () {
var icon = $(this).find('i');
var myAudio = document.getElementById('myAudio');
//播放
if (myAudio.src.length <= 0) {
myAudio.src = currentFile;
}
if (myAudio.paused) {
myAudio.play();
icon.removeClass('glyphicon-play').addClass('glyphicon-pause');
} else {
myAudio.pause();
icon.addClass('glyphicon-play').removeClass('glyphicon-pause');
}
});
}
</script>
<audio> 标签简介的更多相关文章
- HTML5 <Audio>标签API整理(一)
简单实例: <audio id="myAudio"></audio> <script> var myAudio = document.getEl ...
- HTML5 <Audio>标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
- 用<audio>标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...
- HTML5的Audio标签打造WEB音频播放器
目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...
- 论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...
- 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况
对比audio标签 和 Web Audio API 各平台浏览器的支持情况: audio element Web Audio API desktop browsers Chrome 14 Yes ...
- (转载)SPRINGMVC表单标签简介
SpringMVC表单标签简介 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍Spri ...
- 使用audio标签播放音频文件
HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签.使用audio标签可以控制音频的播放与停止,循环播放与播放次数设置,以及播放位置等等. 例如 ...
- H5页面实现一个Audio标签加载多个音频文件,并进行播放和展示音频长度
最近微信项目中有需求,要将微信端发送过来的amr格式的语音文件,在项目中的页面上进行展示和播放,实现方式如下: 1.首先java后台收到微信端的消息推送的时候,使用 ffmpeg将amr格式的音频文件 ...
随机推荐
- SQLLoader7(只导入数据文件的其中几行记录)
数据文件: D:\oracletest\test1.txt SMITH CLERK ALLEN SALESMAN WARD SALESMAN JONES MANAGER MARTIN SALESMAN ...
- 跨域调用webservice
本人第一次在博客园写博客. 最近研究js的跨域调用,举个小例子. ASP.net 中webservice 源代码 /// <summary> /// Service1 的摘要说明 ...
- [canvas]通过动态生成像素点做绚丽效果
本例中的粒子就是实实在在的像素,由js代码在canvas上动态生成的像素点!这些像素点通过一个运动方法有规律地动了起来.透过这个思路,我们可以想到很多很炫的效果,但是这个性能有待考察.实验证明,动态控 ...
- 1203.4——循环语句 之 for
for循环的一般形式为:for(表达式1; 表达式2; 表达式3){ 语句块} 它的执行过程如下:1) 先求解表达式1. 2) 求解表达式2,若其值为真(非0),则执行循环体,否则结束循环. 3 ...
- BlockingQueue
BlockingQueue的使用 http://www.cnblogs.com/liuling/p/2013-8-20-01.html BlockingQueue深入分析 http://blog.cs ...
- 写一个Windows上的守护进程(7)捕获异常并生成dump
写一个Windows上的守护进程(7)捕获异常并生成dump 谁都不能保证自己的代码不出bug.一旦出了bug,最好是崩溃掉,这样很快就能被发现,若是不崩溃,只是业务处理错了,就麻烦了,可能很长时间之 ...
- (转)android ndk 给结构体赋值的方法
转自:http://www.cnweblog.com/fly2700/archive/2012/03/21/320083.html 1,java 代码 结构体定义 public class Media ...
- Js之Location对象
Window对象的location属性引用的是Location对象,它表示该窗口中当前显示的文档的URL,并定义了方法来使窗口载入新的文档.Document对象的location属性也引用到Locat ...
- 如何解决安卓SDK无法下载Package的问题
转载自:http://jingyan.baidu.com/article/8275fc86dbe84046a03cf69d.html 有些用户在安装好Android SDK后,打开Android SD ...
- PHP浮点数引起的四舍五入问题
同事在开发中,遇到一个浮点数问题,过来问我,问题如下: $a = 0.705; $b = 20.795; $c = 20.715; $d = 20.745; echo sprintf('%0.2f', ...