html javascript audio 音频监听器

Posted 2023-04-06 夏华东的博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html javascript audio 音频监听器相关的知识，希望对你有一定的参考价值。

html javascript audio 音频监听器

<!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>

处理器音频 JavaScript HTML5

【中文标题】处理器音频 JavaScript HTML5【英文标题】：Processor Audio JavaScript HTML5 【发布时间】：2015-05-20 17:43:11 【问题描述】：

有一个js-script：

<script>
function start1() 
var audio = new Audio();
audio.src = URL.createObjectURL(document.getElementById('f1').files[0]);
audio.autoplay = true;

function start2() 
var audio = new Audio();
audio.src = URL.createObjectURL(document.getElementById('f2').files[0]);
audio.autoplay = true;

...
function stop() 
var audio = new Audio();
audio.stop();

</script>

和html代码：

<body>
<input type="file" id="f1"></input>
<input type="file" id="f2"></input>
...
<button onmousedown="start1()" onmouseup="stop()">1</button>
<button onmousedown="start2()" onmouseup="stop()">2</button>
...

通过脚本可以理解，他播放了一个声音文件，该文件是使用表单文件加载的。但是有两个问题： 1) 要求仅在按下事件时播放声音 (onmousedown)，并在释放鼠标按钮时停止 (onmouseup)。现在声音播放到最后，无论您是否单击鼠标按钮并放开它都无关紧要（因为没有测试这种情况）。 2）还需要创建一个简化版的脚本，因为要处理的函数应该是16个，而不是手动注册每个函数一样。您必须创建一个生成的脚本来处理 N 个 id（start1、start2 等、f1、f2 等）。帮助修改代码，也可以完全编码jquery。这并不重要。谢谢。

【问题讨论】：

您的问题发生是因为您只在函数内部创建本地变量，因此无法从另一个函数访问它们。你也总是使用相同的变量名 【参考方案1】：

您可以使用局部变量，您只需要一个标识符来稍后找到音频元素。您还需要将音频元素附加到 DOM。

另外，你必须使用 pause() 而不是 stop()。

        <script>
        function start(id, source) 
                var aud = document.getElementById(id);

                if (aud) 
                    aud.parentNode.removeChild(aud);
                

                var audio = new Audio();
                audio.setAttribute("id", id);
                audio.src = URL.createObjectURL(document.getElementById(source).files[0]);
                document.body.appendChild(audio);
                audio.autoplay = true;
            

            function stop(id) 
                var aud = document.getElementById(id);
                aud.pause();
            
    </script>

    <input type="file" id="f1"></input>
    <input type="file" id="f2"></input>
    <button onmousedown="start('1', 'f1')" onmouseup="stop('1')">1</button>
    <button onmousedown="start('2', 'f2')" onmouseup="stop('2')">2</button>

【讨论】：

【参考方案2】：

这应该可以工作（未经测试）：

<script> var a1 = new Audio(); var a2 = new Audio(); function start1() a1.src = URL.createObjectURL(document.getElementById('f1').files[0]); a1.autoplay = true; function start2() a2.src = URL.createObjectURL(document.getElementById('f2').files[0]); a2.autoplay = true; function stop() a1.stop(); a2.stop(); </script>

【讨论】：

这个例子不起作用。和我一样。你刚刚问了 VAR 并把它们带到了功能上。

以上是关于html javascript audio 音频监听器的主要内容，如果未能解决你的问题，请参考以下文章

自动播放使用 javascript 创建的 html 音频

如何使用 javascript 从 Audio Element 录制音频

用javascript控制html5中audio的音频总时长，为啥在IE中，通过window.onload获取不到，而点击按钮可以

html5 <audio> 播放时用javascript设置边框颜色

处理器音频 JavaScript HTML5

javascript 音频加载