html javascript audio 音频监听器html javascript audio 音频监听器

148 阅读 0 评论 98 点赞

我是靠谱客的博主紧张大白，这篇文章主要介绍html javascript audio 音频监听器html javascript audio 音频监听器，现在分享给大家，希望可以做个参考。

html javascript audio 音频监听器

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>audio监听播放完毕</title>
</head>
<body>

<audio src="../../audio/eyJuYW1lIjoibnVtYmVyX2h1bWVuIn0.YiMBkg.Sc4UTg6jfaqRhGBxW0AnYOuiAGQ/play.mp3" id="audio"
       controls="true" autoplay="true">
    Your browser does not support the audio element.
</audio>
<script>
    let audio = document.getElementById("audio");
    // 音频不循环播放
    audio.loop = false;
    // addEventListener:
    // true - 事件句柄在捕获阶段执行
    // false - 默认。事件句柄在冒泡阶段执行
    audio.addEventListener('loadstart', function () {
        console.log("客户端开始请求数据");
    }, false);
    audio.addEventListener('progress', function () {
        console.log("客户端正在请求数据");
    }, false);
    audio.addEventListener('error', function () {
        console.log("请求数据时遇到错误 ");
    }, false);
    audio.addEventListener('stalled', function () {
        console.log("网速失速 ");
    }, false);
    audio.addEventListener('play', function () {
        console.log("play()和autoplay开始播放时触发 ");
    }, false);
    audio.addEventListener('pause', function () {
        console.log("暂停触发");
    }, false);
    audio.addEventListener('loadedmetadata', function () {
        console.log("当指定的音频/视频的元数据已加载时");
    }, false);
    audio.addEventListener('loadeddata', function () {
        console.log("当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。");
    }, false);
    audio.addEventListener('waiting', function () {
        console.log("等待数据，并非错误");
    }, false);
    audio.addEventListener('playing', function () {
        console.log("正在播放时触发。");
    }, false);
    audio.addEventListener('canplay', function () {
        console.log("可以播放，但中途可能因为加载而暂停");
    }, false);
    audio.addEventListener('canplaythrough', function () {
        console.log("可以播放，歌曲全部加载完毕");
    }, false);
    audio.addEventListener('seeking', function () {
        console.log("当用户开始移动/跳跃到音频/视频中的新位置时");
    }, false);
    audio.addEventListener('seeked', function () {
        console.log("当用户已移动/跳跃到音频/视频中的新位置时");
    }, false);
    audio.addEventListener('timeupdate', function () {
        console.log("播放时间改变");
    }, false);
    audio.addEventListener('ended', function () {
        console.log("播放结束");
    }, false);
    audio.addEventListener('ratechange', function () {
        console.log("播放速率改变");
    }, false);
    audio.addEventListener('durationchange', function () {
        console.log("资源长度改变");
    }, false);
    audio.addEventListener('volumechange', function () {
        console.log("音量改变");
    }, false);
</script>
</body>
</html>

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>audio监听播放完毕</title>
</head>
<body>
<!--src:音频播放路径-->
<audio src="../../audio/eyJuYW1lIjoibnVtYmVyX2h1bWVuIn0.YiMBkg.Sc4UTg6jfaqRhGBxW0AnYOuiAGQ/play.mp3" id="audio"
       controls="true" autoplay="true">
    Your browser does not support the audio element.
</audio>
<script>
    let audio = document.getElementById("audio");
    // 音频不循环播放
    audio.loop = false;
    // addEventListener:
    // true - 事件句柄在捕获阶段执行
    // false - 默认。事件句柄在冒泡阶段执行
    audio.addEventListener('loadstart', function () {
        console.log("客户端开始请求数据");
    }, false);
    audio.addEventListener('progress', function () {
        console.log("客户端正在请求数据");
    }, false);
    audio.addEventListener('error', function () {
        console.log("请求数据时遇到错误 ");
    }, false);
    audio.addEventListener('stalled', function () {
        console.log("网速失速 ");
    }, false);
    audio.addEventListener('play', function () {
        console.log("play()和autoplay开始播放时触发 ");
    }, false);
    audio.addEventListener('pause', function () {
        console.log("暂停触发");
    }, false);
    audio.addEventListener('loadedmetadata', function () {
        console.log("当指定的音频/视频的元数据已加载时");
    }, false);
    audio.addEventListener('loadeddata', function () {
        console.log("当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。");
    }, false);
    audio.addEventListener('waiting', function () {
        console.log("等待数据，并非错误");
    }, false);
    audio.addEventListener('playing', function () {
        console.log("正在播放时触发。");
    }, false);
    audio.addEventListener('canplay', function () {
        console.log("可以播放，但中途可能因为加载而暂停");
    }, false);
    audio.addEventListener('canplaythrough', function () {
        console.log("可以播放，歌曲全部加载完毕");
    }, false);
    audio.addEventListener('seeking', function () {
        console.log("当用户开始移动/跳跃到音频/视频中的新位置时");
    }, false);
    audio.addEventListener('seeked', function () {
        console.log("当用户已移动/跳跃到音频/视频中的新位置时");
    }, false);
    audio.addEventListener('timeupdate', function () {
        console.log("播放时间改变");
    }, false);
    audio.addEventListener('ended', function () {
        console.log("播放结束");
    }, false);
    audio.addEventListener('ratechange', function () {
        console.log("播放速率改变");
    }, false);
    audio.addEventListener('durationchange', function () {
        console.log("资源长度改变");
    }, false);
    audio.addEventListener('volumechange', function () {
        console.log("音量改变");
    }, false);
</script>
</body>
</html>