Javascript控制html5 Audio标签

9 Replies

在上一篇文章：Html5 audio标签(属性)的使用详解中已经把关于audio标签的如何使用以及支持属性说清楚了。这里写篇文章记录一下：如何使用js控制html5的audio标签。

javascript动态创建audio标签

在页面中添加audio元素的方法主要是两种，一种是在html中加入audio代码，可以加入一些属性（autoplay,preload）等，这些在之前的文章已经说过了。另外一种是js动态加载进来的。代码如下：

var audio=document.creatElement(“audio”);
audio.src=”audio/source.ogg”;//路径
audio.play();

或者更简单一些
audio=new Audio(“audio/source.ogg”);//路径
audio.play();

另外audio的属性，preload有三种不同的载入方式，我们可以通过preload=”auto”来实现音频的自动加载，但是我们无法通过直观的方式了解音频加载的进度，以及是否准备播放。这里提供了一个“canplaythrough”事件来监听音频是否已经加载完成。代码示例如下：

<!DOCTYPE html >
<html lang="en">
<head>
<title>Preload Ready</title>
<script type="text/javascript">
        var audio = document.createElement("audio");
        audio.src = "http://www.niumowang.org/wp-content/uploads/2012/03/beyond.ogg";
        audio.addEventListener("canplaythrough", function () {
            alert('音频文件已经准备好，随时待命');
        }, false);
    </script>
</head>
<body>
</body>
</html>

运行代码复制代码另存代码(提示：可以编辑后运行)

第一次运行时间会长一些，第二次运行由于文件已经缓存到本地，所以会直接弹出提示框。

javascript控制audio的播放，暂停，停止

js如何控制audio标签的播放比较简单，在上面好多案例中已经提到了。主要是audio.play();同样暂停也比较简单audio.pause();就能很轻易搞定，看到这里你估计以为想要停止的话，也会使用这种语义化的函数了，呵呵，其实不是这样的audio.stop()并不能停止audio的播放。

如果你需要停止或者重新播放audio，必须设置它的currentTime，可见如下语句：

audio.currentTime = 0;

下面我给出一个完成的示例，包括了开始播放，暂停播放，停止播放

<!DOCTYPE html >
<html lang="en">
<head>
<title>Preload Ready</title>
<script type="text/javascript">
var audio = document.createElement("audio");
audio.src = "http://www.niumowang.org/wp-content/uploads/2012/03/beyond.ogg";
audio.addEventListener("canplaythrough",
function() {
    alert('音频文件已经准备好，随时待命');
},
false);
function aPlay() {
    audio.play();
}
function aPause() {
    audio.pause();
}
function aStop() {
    audio.currentTime = 0;
    audio.pause();
}
function aSkip() {
    audio.currentTime = 50;
    audio.play();
 }
    </script>
</head>
<body>
<input type="button" οnclick="aPlay();" value="播放音频">
<input type="button" οnclick="aPause();" value="暂停音频">
<input type="button" οnclick="aStop();" value="停止音频">
<input type="button" οnclick="aSkip();" value="跳到第50秒">
</body>
</html>

运行代码复制代码另存代码(提示：可以编辑后运行)

注意：以上代码中的停止加上了pause()，另外跳到50秒加上了play()。这里主要是因为一旦play开始运行无法停止的，所以需要设置currentTime后使得音频暂停。另外跳转到50秒后，加上play()的做法是如果音频在没有播放的情况下，跳转到50秒时音频不会自动播放；而如果音频在播放中，那么跳到50秒的时候还是播放的，这里的play()可以忽略。当然具体情况可以自行定义。

javascript控制audio的声音大小：

控制声音的大小比较简单，大概同play，pause那一套一样，主要是多了一个参数。

示例：audio.volume = 0;//表示静音 audio.volume = 1; 表示声音最大，声音值可以取0-1之间

演示不写了，可以自己修改上面代码运行框中的内容。

javascript控制audio的快进，快退，以及显示进度与时长

控制快进，快退的原理比较简单，只不过是设置audio的currentTime，案例如下

比如：audio.currentTime += 10;//10秒快进

<!DOCTYPE html >
<html lang="en">
<head>
<title>Preload Ready</title>
<script type="text/javascript">
var audio = document.createElement("audio");
audio.src = "http://www.niumowang.org/wp-content/uploads/2012/03/beyond.ogg";
audio.addEventListener("canplaythrough",
function() {
    alert('音频文件已经准备好，随时待命');
},
false);
function aPlay() {
    audio.play();
}
function go() {
    audio.currentTime += 10;
    audio.play();
}
function back() {
    audio.currentTime -= 10;
    audio.play();;
}
    </script>
</head>
<body>
<input type="button" οnclick="aPlay();" value="播放音频">
<input type="button" οnclick="go();" value="快进10秒">
<input type="button" οnclick="back();" value="快退10秒">
</body>
</html>

运行代码复制代码另存代码(提示：可以编辑后运行)

关于显示进度的方法也不是很复杂，不过如果你想实现js配合css做一个进度条的模拟也许复杂一点。如果你对js以及css比较熟悉的话，解决的思路有很多。甚至可以做出很多酷炫的效果。我在这里只是点一下如何调用出该音频文件的时长以及播放到进度的时间。

调用出音频的时长不难解决 “audio.duration;” 就是了

调用处该文件的播放进度，这里需要用到一个时间监听。currentTime代表当前播放的时间，而且当currentTime改变的时候会触发timeupdate事件。因此，我们监听timeupdate，并且输出currentTime即可完成进度的判断。不多说，看示例代码：

<!DOCTYPE html >
<html lang="en">
<head>
<title>Preload Ready</title>
<script type="text/javascript">
var audio = document.createElement("audio");
audio.src = "http://www.niumowang.org/wp-content/uploads/2012/03/beyond.ogg";
audio.addEventListener("canplaythrough",
function() {
    alert('音频文件已经准备好，随时待命');
},
false);
audio.addEventListener("timeupdate", showtime, true);
function showtime() {
    document.getElementById("ltime").innerHTML = audio.duration;
    document.getElementById("ctime").innerHTML = audio.currentTime;
}
function aPlay() {
    audio.play();
}
function go() {
    audio.currentTime += 10;
    audio.play();
}
function back() {
    audio.currentTime -= 10;
    audio.play();
}
</script>
</head>
<body>
 总时长：
<div id="ltime">
</div>
<br/>
当前播放：
<div id="ctime">
</div>
<br/>
<input type="button" οnclick="aPlay();" value="播放音频">
<input type="button" οnclick="go();" value="快进10秒">
<input type="button" οnclick="back();" value="快退10秒">
</body>
</html>

运行代码复制代码另存代码(提示：可以编辑后运行)

OK，基本的操作已经说完了。

最后留下参考资料给大家：
http://msdn.microsoft.com/zh-CN/ie/hh377903
https://wiki.mozilla.org/Audio_Data_API
http://msdn.microsoft.com/en-us/library/gg589489(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/gg589528(v=vs.85).aspx

通过上面的一些扩展链接能够了解更多关于audio标签的使用，以及配合一些css3做出的游戏或者特效。感兴趣的朋友自行查看。