JS简单控制audio的播放与暂停详解

马黑黑 · 发表于 2022-1-15 08:02

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 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

能不能强行自动播放的，发现有些西瓜视频改了设置也不会自动播放

马黑黑 · 发表于 2022-1-15 12:27

绿叶清舟发表于 2022-1-15 11:30
能不能强行自动播放的，发现有些西瓜视频改了设置也不会自动播放

其实，自动播放是不礼貌的，也不够友好，这是W3C的理念。

自动播放还要建立在浏览器是否支持，当代主流浏览器，默认都不开放自动播放功能，需要手动去设置。如果浏览器未开启声音的自动播放功能，那么，任何网页前端的设置都是无效的。

另外，audio本身就有自动播放设置，无需JS去操纵。autoplay="autoplay"就是自动播放，有它就行，只要访客的浏览器开启了允许自动播放音频。