HTML5使用js jq控制<audio>的播放暂停

野性酷女 2022-07-12 01:21 437阅读 0赞

正所谓节后三天瘟！第一天上班脑子迷迷糊糊。一上来就写一端代码控制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标签博客的时候，补充一下！这里就不过多废话了！

最后留一个坑！就是判断播放结束。该用什么？

[demo]: http://szy1000.oschina.io/audio/
[stackoverflow]: http://stackoverflow.com/questions/16194228/how-pause-a-html5-video-with-javascript