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="函数名()"。

这样，如果播放器加载正常，音频格式和资源正常，这两个按钮的点击操作可以控制播放器的播放与暂停功能。

前一篇: JS教程二——三元运算
下一篇: JS教程四——动态创建元素