html5中audio的详细使用

标签：无法   界面   cti   放音   幸好   rdl   margin   浏览器   art   

html5的audio功能上已经非常强大，回放，跳转，缓冲等以前只能用flash才能实现的功能，html5的audio都能轻松搞定

最近的一个项目使用到了这个功能，把我使用的情况写下来，供大家参考, 因为我需要的功能很简单，所以做的不复杂，如果要使用更多的功能，可以参考下面的api，能实现很多高大上的功能

audio 相关的  api

<audio src=”音频的地址”>备用（当浏览器不支持audio时显示的内容）</audio>

控制函数功能说明

• load()   加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载
• play()    加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放
• pause() 暂停处于播放状态的音频、视频文件

audio 的只读媒体特性有：

只读属性属性说明

• duration   获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
• paused     如果媒体文件被暂停，则返回true，否则返回false
• ended       如果媒体文件播放完毕，则返回true
• startTime  返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并一部分内容已经不在缓冲区
• error          在发生了错误后返回的错误代码
• currentSrc  以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件

audio 可脚本控制的特性值：

• autoplay       自动播放已经加载的的媒体文件，或查询是否已设置为autoplay
• loop              将媒体文件设置为循环播放，或查询是否已设置为loop
• currentTime 以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置
• controls        显示或者隐藏用户控制界面
• volume         在0.0到1.0间设置音量值,或查询当前音量值
• muted           设置是否静音
• autobuffer     媒体文件播放前是否进行缓冲加载，如果设置了autoplay，则忽略此特性

对于这些属性，主流的浏览器都支持。可是别以为就没有了兼容性，在音频播放流中，有两个阵营。firefox 和 opera 支持 ogg 音频，safari 和 ie 支持 mp3.幸好Google的chrome都支持。

<div id="audioControl">
	<div class="play">
		<span id="play">Play</span>
	</div>
</div>

<audio id="media" src="test.mp3"></audio>

var media = $(‘#media‘)[0];
var audioTimer = null;

//绑定播放暂停控制
$(‘.play‘).bind(‘click‘, function() {
    playAudio();
}); 

//播放暂停切换
function playAudio() {
    if(media.paused) {
        play();
    } else {
        pause();
    }
}

//播放
function play() {
    media.play();
    $(‘#play‘).html(‘Pause‘);
}

//暂停
function pause() {
    media.pause();
    $(‘#play‘).html(‘Play‘);
}

html5中audio的详细使用

标签：无法   界面   cti   放音   幸好   rdl   margin   浏览器   art   

原文地址：http://www.cnblogs.com/itjeff/p/7382160.html