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

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

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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页