处理器音频JavaScript HTML5
[英]Processor Audio JavaScript HTML5
问题描述
There is a js-script: 
有一个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>
and html code: 和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>
...
As can be understood through the script, he plays a sound file that loads by using the form files. 通过脚本可以理解，他播放的声音文件是通过使用表单文件加载的。
But there are two problems: 但是有两个问题：
1) requires that sound is played only during events pressing (onmousedown) and stops when the mouse button is released (onmouseup). 1）要求仅在按下事件时才会播放声音（按下鼠标时），并在释放鼠标按钮时停止播放声音（按下鼠标时）。 Now the sound is played to the end it does not matter whether you clicked the mouse button and let go of it (because there is no test for this condition). 现在，声音播放到最后，无论您单击鼠标按钮并放开它都无所谓（因为对此条件没有测试）。
2) also need to create a simplified version of the script, as the functions for processing should be 16 pieces, but not manually register the same each function. 2）还需要创建脚本的简化版本，因为要处理的功能应为16个，但不能手动注册每个功能。 You must create a generated script that will process the N-number of id (start1, start2, etc., f1, f2, etc). 您必须创建一个生成的脚本来处理ID的N个数（start1，start2等，f1，f2等）。
Help to modify the code, you can also fully code jquery. 帮助修改代码，也可以完全对jquery进行编码。 It is not critical. 这并不重要。
Thank you. 谢谢。
2 个解决方案
解决方案1
0 2015-05-20 17:58:56
这应该工作（未经测试）：
<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>
解决方案2
0 已采纳 2015-05-20 18:40:16
You can use local variables, you just need an identifier to find the audio element later. 您可以使用局部变量，只需要一个标识符即可在以后找到音频元素。 You also need to append the audio element to the DOM. 您还需要将音频元素附加到DOM。
Also, you have to use pause() not stop(). 另外，您必须使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.