[html5]html5音频audio标签及视频video标签用法实例

audio 标签

如果此浏览器显示了文字“你的浏览器目前不支持HTML5的audio标签”，则说明此浏览器对HTML5的audio标签不支持，反之则支持。
这样的检测方法适用于很多新增闭合标签，无须通过JavaScript脚本去判断。

audio标签的属性与HTML4时代的embed标签有很多类似的地方，应用起来也比较容易，

下面列出audio标签的相关属性：

preload             preload                     这是预加载处理属性，只要标签被处理，就会自动加载相关数据。但是如果使用 "autoplay"，则忽略该属性

<audio controls>
<!--如果浏览器支持ogg格式，则优先使用song.ogg-->
<source src="song.ogg">
<!--如果浏览器不支持ogg格式，则降级使用song.mp3-->
<source src="song.mp3">
</audio>

var audio = document.getElementById('audio');//获得audio标签对象
audio.currentPosition; //得到要播放的位置
audio.play();

<video>
<!--如果浏览器支持video，也支持H.264，用movie.mp4-->
<source src="movie.mp4">
<!--如果浏览器支持video，仅支持Ogg，用movie.ogv-->
<source src="movie.ogv">
<!--如果浏览器不支持video，尝试Flash-->
<object data="videoplayer.swf" type="application/x-shockwave-flash">
<param name="movie" value="movie.swf"/>
</object>
<!--如果浏览器不支持video，也不支持Flash，给出下载链接-->
<a href="下载链接">你的浏览器啥都不支持，只能下载</a>
</video>

video和audio标签均使用基于抽象HTMLMediaElement的相同DOM接口。
下面介绍了标准的IDL规范接口，方便读者学习控制各种视频及音频流。

事件：

使用前提条件：准备状态最近等于或少于当前的数据，暂停则为假。其状态为要么搜索为真，要么当前回放位置不包含在缓冲的数据中

回放被启动 
准备状态最近等于或多于未来的数据，暂停则为假，搜索也为假；或者当前回放位置包含在缓冲的数据中

使用前提条件：准备状态最近增加到未来的数据或更多

如果浏览器现在就开始回放操作的话，媒体资源能以当前的回放速率一直工作，而不用停下来等待进一步的缓冲
使用前提条件： 准备状态最近等于足够的数据

寻找IDL的属性被修改为真，搜索操作用去的时间很长

寻找IDL的属性被修改为假

作为正常回放的一部分，当前回放位置被改变；或是以一种有趣的方式进行回放，如间断进行

因为到达了媒体资源的终点，所以回放被停止
使用前提条件： 当前的时间等同于媒体资源结束的时间；结束为真

defaultPlaybackRate或是playbackRate属性已被更新

duration属性已被更新

volume属性或是muted属性被修改。在相关属性的安装已经返回后，开始工作
 

Audio Data API是 HTML5 规范中的媒体元素 <audio> 与 <video> 的补充功能，它让开发者可以存储和读取音效的外部数据（也有人将之称为后设数据）以及音频本身的原生数据。开发者可以具象化这些音效数据，分析这些数据，甚至创造出新的音效数据。这是对浏览器进行音频领域的一个巨大探索和拓展。

下面代码是对上述两个事件进行说明用的源码：

<audio id="myaudio" src="song.ogg" controls="true"></audio>
<pre id="raw">hello</pre>
<script type="text/javascript">
function loadedMetadata(){
channels = audio.mozChannels; //声道的数量
rate = audio.mozSampleRate; //取样频率（次/秒）
frameBufferLength = audio.mozFrameBufferLength; //总样本数
}
function audioAvailable(event){
var frameBuffer = event.frameBuffer;
var t = event.time;
var text = "当前位置：" + t + "\n";
text += frameBuffer[0] + " " + frameBuffer[1];
raw.innerHTML = text;
}
var raw = document.getElementById('raw');
var audio = document.getElementById('myaudio');
audio.addEventListener('mozAudioAvailable',audioAvailable, false); //对事件进行监听
audio.addEventListener('loadedMetadata',loadedMetadata, false); //对事件进行监听
</script>

根据本API，我们可以用JavaScript脚本设定音频流的格式，然后写入音频数据。开发人员只需要建立一个音频对象，然后使用mozSetup()方法来设定声道的数量跟频率（Hz）即可。

下面请看源码：

var testA = new Audio(); //实例化一个audio对象
testA.mozSetup(2,44100); //设定此对象的格式为「双声道，44.1kHz」
var ADU = [0.242, 0.127, 0.0,-0.058,-0.242,...]; //用JavaScript数组来存放声音的数据（当然，
//你也可以使用你熟悉的其他方法来存放声音
//数据）
var audio_Stream = testA.mozWriteAudio(ADU); //用mozWriteAudio()方法来写入音频流

由于mozAudioAvailable 事件与mozWriteAudio()方法都是使用Float32Array传值，因此，把一个音频流的输出直接接上（或是处理过后接上）另一个音频流是可以做到的。办法很简单，只需要修改数组中的内容即可。同时，你也可以做到随时屏蔽、合成、分轨音量和并轨音频等。

由于篇幅原因，请访问  http://www.html5star.com/article-199-1.html  查看声音制造器演示案例