用JavaScript操纵HTML5的本地音频

HTML5的音频元素是一个非常强大的元素并且可以避免过多依赖第三方插件。例如QuickTime，Flash。最新的浏览器，比如Chrome10+和Firefox3.6+都已经嵌入了JavaScript库，并且还提供了方法和属性来操纵<audio>元素。在这篇文章中，我们将探讨几种最重要的方法并探讨如何使用JavaScript来运行audio文件。

摘要：尽管这篇文章主要介绍Audio对象，但是这些方法和属性也同样适用于Video对象。

Audio Methods

.load()；

---Loads and re-loads the audio element for playback。（加载或者重加载audio元素实现重播）

audioElement.load();  

.play()；

---Starts playing the audio file。（开始播放音频文件）

audioElement.play(); 

.pause()；

Pauses playback of the audio file。（暂停播放音频文件）

audioElement.pause(); 

canPlayType(type)；

---Checks with browser to see if type of audio file is supported。（检查浏览器是否支持音频文件）

audioElement.canPlayType('audio/ogg; codecs="vorbis"'); 

 

Audio Properties

.currentTime

---Sets or returns the playback position in the audio file， Value is in seconds。（设置或返回音频文件开始播放的位置，返回值以“秒”为单位）

 

audioElement.currentTime = seconds;

.duration

---Returns the length of the audio file in seconds。（返回播放音频在某秒上的播放的长度）

 

var seconds = audioElement.duration;

.src

---The url where the audio file exists。（音频文件的url）

 

audioElement.src = 'audio.ogg';

.volume

---Sets or returns the volume of the audio file。（设置或返回音频文件的体积）

 

audioElement.volume = value;

注意：以上并没有把音频的所有方法和属性列出来，只介绍了常用的几个方法和属性。

集合起来使用

开发人员可以使用JavaScript来创建动态音频元素和自定义用户接口，来进行互动。

首先，创建一个标准的html文档并且把下面<script>标签里的内容拷贝下来。

 

<script type="text/javascript" language="javascript" >

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'audio.ogg');
function PlayAudio()
{
    audioElement.load;
    audioElement.play();
}
function PauseAudio()
{
    audioElement.pause();
}
</script>

现在，让我们来回顾一下上面的代码。

 

var audioElement = document.createElement('audio');

在页面加载的时候创建<audio>元素并且把它分配给audioElement变量。把这个对象赋值给变量，在页面会话时，脚本函数可以使用它来引用和操纵对象（元素）。

 

audioElement.setAttribute('src', 'audio.ogg');

给“src”这个属性赋值，告诉它在哪里可以找到音频文件。

 

function PlayAudio()
{
    audioElement.load;
    audioElement.play();
}

PalyAudio这个函数加载和运行音频文件。首先，load()方法被调用，一旦音频文件加载完成，play()方法将被调用来启动音频文件。

 

function PauseAudio()
{
    audioElement.pause();
}

PauseAudio这个函数可以暂停音频播放。如果这个PauseAudio函数被再次调用，那么音频文件将重新加载并再次运行。但是，你可以使用currentTime这个属性来操作音频文件的开始和暂停。运行一下上面的程序，来看看效果吧！

开发人员要记住的是，这个<audio>并没有被所有浏览器支持。此外需要说明的是，大多数浏览器只支持一些固定类型的音频文件播放格式。Chrome10+和Firefox3.6+以上的版本都已经嵌入了最新的JavaScript库，大家可以放在上面运行。

来源：developerdrive http://sd.csdn.net/a/20120607/2806501.html