JS简单控制audio的播放与暂停详解
本帖最后由 马黑黑 于 2022-1-15 08:52 编辑JS要操纵audio网页元素，首先必须先获得元素的操作句柄，也就是说JS要知道它要操纵的对象是谁，通常可以用下面的JS内置函数：
getElementById()
这个函数由四个单词组成：get，获取；Element，元素；By，通过；Id，索引号，注意大小写，注意函数后面有小括号。连起来的意思用人话说就是通过元素的id索引获取（对象的操作句柄）。对象位于web文档（document）中，假设有一个 audio 音频元素自定义了 id 为 yinpin，那么，我们这样去获取该元素的操作句柄：
document.getElementById('yinpin')
为了便于写代码，我们要用一个变量来装载这个句柄，JS用 var 来声明变量：
var bfq = document.getElementById('yinpin');// bfq 是自定义的句柄名称
至此，bfq 就是 id名为 yinpin 的网页元素（audio对象）的操作句柄，换句话说就是，bfq 就是音频播放器，我们在JS里就可以这样控制audio播放器的播放和暂停：
bfq.play(); //audio播放音乐(play是audio自身的方法）
bfq.pause(); //audio暂停播放（pause是audio自身的方法）
我们把上述获得句柄、操作指令等封装成自定义函数，以便将来播放和暂停按钮可以调用。JS用 function() 定义用户函数，请通过看以下代码领会。以下是完整的HTML和JS代码：
<p><audio id="yinpin" src="https://wj.zp68.com/lxx/yunhua/20211217/01.mp3" controls="controls"></audio></p>
<button id="bf" onclick="boFang();"> 播放 </button>
<button id="zt"onclick="zanTing();"> 暂停 </button>
<script>
var bfq = document.getElementById('yinpin'); //播放器句柄
function boFang() { //定义播放函数
bfq.play();
}
function zanTing() { //定义播放函数
bfq.pause();
}
</script>
上面的JS代码，我们定义了两个函数，一个是 boFang()，用于播放控制，一个是 zanTing()，用于暂停控制。这两个函数在 HTML 按钮（button）标签分别被两个按钮的 onclick() 事件调用，onclick="函数名()"。
这样，如果播放器加载正常，音频格式和资源正常，这两个按钮的点击操作可以控制播放器的播放与暂停功能。
能不能强行自动播放的，发现有些西瓜视频改了设置也不会自动播放 绿叶清舟 发表于 2022-1-15 11:30
能不能强行自动播放的，发现有些西瓜视频改了设置也不会自动播放
其实，自动播放是不礼貌的，也不够友好，这是W3C的理念。
自动播放还要建立在浏览器是否支持，当代主流浏览器，默认都不开放自动播放功能，需要手动去设置。如果浏览器未开启声音的自动播放功能，那么，任何网页前端的设置都是无效的。
另外，audio本身就有自动播放设置，无需JS去操纵。autoplay="autoplay"就是自动播放，有它就行，只要访客的浏览器开启了允许自动播放音频。 这个很好地解释了“音乐的播放与暂停（测试）”那个帖子里操控的一些功能，但具体应用上还是不同，那个帖子里的更复杂些。{:4_204:} 这个里讲的是audio自身的方法，那个帖子里直接涉及了一个，并和audio进行关联。厉害{:4_187:} 红影 发表于 2022-1-15 13:50
这个很好地解释了“音乐的播放与暂停（测试）”那个帖子里操控的一些功能，但具体应用上还是不同，那个帖子 ...
简单是复杂的基础，会了简单的才能理解和构造复杂的 红影 发表于 2022-1-15 13:53
这个里讲的是audio自身的方法，那个帖子里直接涉及了一个，并和audio进行关联。厉害
这里为了方便理解，用了两个按钮分别控制播放和暂停它们合并成一个，代码就会复杂，增加对基本知识的理解难度。
做完整的h5音频播放器涉及到的知识与算法很多，我们这里学会简单操控基本的播放器功能就相当不错了。 马黑黑 发表于 2022-1-15 14:20
简单是复杂的基础，会了简单的才能理解和构造复杂的
是的，否则更加无从下手。 马黑黑 发表于 2022-1-15 14:27
这里为了方便理解，用了两个按钮分别控制播放和暂停它们合并成一个，代码就会复杂，增加对基本知识的理解 ...
试着修改了一下那个帖子里的按钮，隐藏了播放器并变直接播放了。这个按钮好，加分应该不会飞出去了。
<style type="text/css">
.cBtn {
width:36px;
height:36px;
font-family:'微软雅黑';
font-size:12px;
color:#29E829;
border:0px;
background:dddddd;
outline:none;
border-radius:50%;
box-shadow:0px 0px 2px #999;
cursor:pointer;
}
.cBtn:hover {
color:000000;
box-shadow:0px 0px 3px #000;
}
</style>
<audio id="audio" style="width:1px;height:1px;"
src="https://wj.zp68.com/lxx/yunhua/20211217/01.mp3" controls="controls" autoplay="autoplay"></audio><br><br>
<input class="cBtn" type="button" id="btn" value="‖" onclick="var op = document.getElementById('audio');var
bt = document.getElementById('btn');if(op.paused){ op.play();bt.value = '‖'; }else {op.pause();bt.value =
'▶'; };"> 红影 发表于 2022-1-15 20:13
试着修改了一下那个帖子里的按钮，隐藏了播放器并变直接播放了。这个按钮好，加分应该不会飞出去了。
...
还是有点不一样，练习的时候鼠标上去会绿色箭头变黑，发到论坛不会变化了。 红影 发表于 2022-1-15 20:15
还是有点不一样，练习的时候鼠标上去会绿色箭头变黑，发到论坛不会变化了。
在坛子里，编辑时最好不要切换模式，修改帖子没这个问题 黑黑这个帖写的通俗易懂{:4_187:} 马黑黑 发表于 2022-1-15 20:58
在坛子里，编辑时最好不要切换模式，修改帖子没这个问题
没看懂，编辑不要切换模式是指的什么？ 红影 发表于 2022-1-16 00:00
没看懂，编辑不要切换模式是指的什么？
进入高级模式并勾选“纯文本”选项卡后，不要再去点那个选项卡。这是指编辑有JS代码时的情形，其余情况不论 红影 发表于 2022-1-16 00:00
没看懂，编辑不要切换模式是指的什么？
进入高级模式并勾选“纯文本”选项卡后，不要再去点那个选项卡。这是指编辑有JS代码时的情形，其余情况不论 红影 发表于 2022-1-16 00:00
没看懂，编辑不要切换模式是指的什么？
进入高级模式并勾选“纯文本”选项卡后，不要再去点那个选项卡。这是指编辑有JS代码时的情形，其余情况不论 小辣椒 发表于 2022-1-15 22:36
黑黑这个帖写的通俗易懂
感谢小辣椒认可 马黑黑 发表于 2022-1-16 08:22
进入高级模式并勾选“纯文本”选项卡后，不要再去点那个选项卡。这是指编辑有JS代码时的情形，其余情况不 ...
没有重复点呢，是在本地测试了一下就发了的。 红影 发表于 2022-1-16 13:43
没有重复点呢，是在本地测试了一下就发了的。
酱紫 马黑黑 发表于 2022-1-16 13:46
酱紫
所以本地测试和真的发到论坛有时还是有点小差异。
页:
[1]
2