评论资讯 [ 总 913 则 ]
·马黑 - 2024-12-19 08:19
·马黑 - 2024-12-16 23:53
·马黑 - 2024-12-15 22:34
·马黑 - 2024-12-14 23:53
·马黑 - 2024-12-13 18:38
·悄然 - 2024-12-7 06:47
·马黑 - 2024-12-5 23:17
·马黑 - 2024-12-1 17:26
·马黑 - 2024-11-28 11:41
·悄然 - 2024-11-24 21:37
·马黑 - 2024-12-16 23:53
·马黑 - 2024-12-15 22:34
·马黑 - 2024-12-14 23:53
·马黑 - 2024-12-13 18:38
·悄然 - 2024-12-7 06:47
·马黑 - 2024-12-5 23:17
·马黑 - 2024-12-1 17:26
·马黑 - 2024-11-28 11:41
·悄然 - 2024-11-24 21:37
友情链接
网站统计
JS教程三——简单控制audio的播放与暂停详解
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="函数名()"。
这样,如果播放器加载正常,音频格式和资源正常,这两个按钮的点击操作可以控制播放器的播放与暂停功能。
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教程四——动态创建元素
发表评论:
评论列表 [0条]