上周的时候,需要做一个音频列表,后边有播放和暂停控制,真正的 audio 标签其实是不显示的,所以就要用 js 控制 audio 标签。

首先你要知道什么是 audio 标签关于 audio,先上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.playSpan {
color: #9de3fe;
}
.stopSpan {
color: #ff3366;
}
</style>
</head>
<body>
<!-- 建一个audio标签 -->
<audio
id="audio"
controls="controls"
src="https://www.w3school.com.cn/i/horse.ogg"
></audio>
<!-- span标签控制音频 -->
<span class="playSpan" onclick="play()">播放</span>
<script>
function play() {
var audio = document.getElementById("audio");
var span = document.getElementsByTagName("span")[0];
if (span.className == "playSpan") {
audio.play();
span.innerText = "暂停";
span.className = "stopSpan";
/* 监听音频播放完成 */
audio.addEventListener(
"ended",
function() {
span.innerText = "播放";
span.className = "playSpan";
},
false
);
} else {
audio.pause();
span.innerText = "播放";
span.className = "playSpan";
}
}
</script>
</body>
</html>

其实重点就是那几个方法

audio.play() 音频播放
audio.pause() 音频暂停
audio 的 ended 视频停止
audio.currentTime 音频播放时间

这个地方有个重点就是上边的方法都标签的原生方法,所以当你使用 jQuery 拿到标签时,要把 jQuery 对象转成 DOM 元素,这样才能调用原生方法~

没做的时候觉得很难,做了发现 audio 也只是和普通的标签,按常理做就好了,恩~。