有时我们需要使用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