处理器音频 JavaScript HTML5答案

【问题标题】：Processor Audio JavaScript HTML5处理器音频 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。这并不重要。
谢谢。

【问题讨论】：

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

标签： javascript jquery events audio

【解决方案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 并把它们带到了功能上。