处理器音频 JavaScript HTML5
Posted
技术标签:
【中文标题】处理器音频 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 并把它们带到了功能上。以上是关于处理器音频 JavaScript HTML5的主要内容，如果未能解决你的问题，请参考以下文章
我应该如何使用 JavaScript/HTML5 处理繁重的音频负载？