HTML5 - 使用JavaScript控制<audio>音频的播放

有时我们需要使用js来控制播放器实现音乐的播放，暂停。或者使用js播放一些音效。

 

1，通过JavaScript控制页面上的播放器

比如把页面上添加一个<audio>用来播放背景音乐（由于controls属性未设置，我们是看不见播放界面的）

1 2 3 4

<audio id="bgMusic">     <source = src="hangge.mp3" type="audio/mp3">     <source = src="hangge.ogg" type="audio/ogg"> </audio>

通过pause()和play()方法可以使音乐暂停和继续播放（结合currentTime属性可以实现停止和重新播放）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var audio = document.getElementById("bgMusic");   //播放(继续播放) audio.play();   //暂停 audio.pause();   //停止 audio.pause(); audio.currentTime = 0;   //重新播放 audio.currentTime = 0; audio.play();

2，也可以动态的创建<audio>元素

1 2 3 4 5 6 7 8

//方式1 var audio = document.createElement("audio"); audio.src = "hangge.mp3"; audio.play();   //方式2 var audio = new Audio("hangge.mp3"); audio.play();

通过canPlayType()方法可以判断浏览器支持的编码方式，从而设置对应的音频文件。

1 2 3 4 5

if (audio.canPlayType("audio/mp3")) {     audio.src = "hangge.mp3"; }else if(audio.canPlayType("audio/ogg")) {     audio.src = "hangge.ogg"; }

原文出自：www.hangge.com  转载请保留原文链接：http://www.hangge.com/blog/cache/detail_897.html