处理器音频 JavaScript HTML5

Question

有一个js脚本：

<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。不重要。
谢谢。

Answer 1

这应该有效（未测试）：

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

Answer 2

您可以使用局部变量，稍后您只需要一个标识符来查找音频元素。您还需要将音频元素附加到 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>

处理器音频 JavaScript HTML5

Processor Audio JavaScript HTML5

javascript

audio

jquery

events