正所谓节后三天瘟!第一天上班脑子迷迷糊糊。一上来就写一端代码控制audio,凭借仅存的记忆,还不错!弄出来了!中间遇到了一点点小坑,特地拿出来晒晒,免得以后再吃亏!
任务要求:利用js或者jq控制音频的播放,不要原生的控制器。
正所谓: js未动,html先行。 (为了方便演示:其中MP3的资源,我利用线上的了)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>javascript</p>
<input type="button" value="播放" id="play">
<audio id="bgMusic" >
<source src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" type="audio/mp3">
<source src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" type="audio/ogg">
</audio>
</body>
</html>
一个小建议:第一次打开,audio标签后面加上autoplay打开网页就自动播放了,再加上controls就会出现默认的控制器,否则页面什么都没有,看上去还以为出问题呢!确认加载无误,就可以删除了。
先完成最基础的功能就是播放/暂停。利用audio.play()和audio.pause()就可以轻松的实现了。注意:不是stop();
接下来就是如何利用一个按钮实习播放 暂停。像toggle一样。这个坑让我停留的时间有点长。先上代码!
window.οnlοad=function(){
var play=document.getElementById('play');
var bgm = document.getElementById('bgMusic');
play.onclick = function () {
console.log(bgm.paused);
if (bgm.paused) {
bgm.play();
play.value="播放";
}else{
bgm.pause();
play.value="暂停";
}
}
}
这里主要说的就是判断条件。我一直以为是audio.pause属性 结果少了一个“d” .希望大家注意一下:是:audio.paused.
还有一个就是静音的效果。判断的条件与设置都比较特殊,一同抛出来。
if(bgm.muted){
bgm.muted = false;
mute.value="外音";
}else{
bgm.muted = true;
mute.value="静音";
}
在这里 我放上demo的连接 大家自己去下载吧!
最后再来说一个jquery实现这样的效果,会遇到的一个坑!
$(document).ready(function () {
$("#toggle").click(function(){
if($("#bgMusic").get(0).paused){
$("#bgMusic").get(0).play()
$("#toggle").val("play");
}else{
$("#bgMusic").get(0).pause();
$("#toggle").val("stop");
}
})
})
看完代码估计大家也知道是什么了,就是 get(0)! 这个bug的解决还是得益于stackoverflow。
特意标出的三个小坑,希望帮助到大家!
还有快进 快退 进度条都没有来得及做。我将在写关于video标签博客的时候,补充一下!这里就不过多废话了!
最后留一个坑!就是判断播放结束。该用什么?