用一个按钮Javascript运行2个函数 [英] Run 2 functions with one button Javascript
问题描述
window.onload = function init（）。但我想在点击按钮后显示消息。 因此，我试着用这个按钮调用两个函数 - toggleRecording（button）和 init（）但是button元素有问题，所以它不起作用，但我认为它可以工作，如果它将以良好的形式写入。你能告诉我如何修改这个按钮调用这两个函数 init 和 toggleRecording 吗？我是JS的新手，我不知道它是如何工作的。
index.html
< button type =submitonclick =toggleRecording（）data-run =0>< / button>
record.js
//通过点击按钮
来启动toggleRecording（）{
var run = parseInt（getAttribute（'data-run'））; //
if（run === 1）{
recorder&& recorder.stop（）;
记录器&& recorder.exportWAV（function（blob）{
uploadAudioFromBlob（blob）;
}）;
__log（'Recording is stopped。'）;
button.setAttribute（'data-run'，0）;
}
其他{
记录器&& recorder.clear（）;
记录器&& recorder.record（）;
__log（'说...'）;
button.setAttribute（'data-run'，1）;
函数__log（e，data）{
showInfo（\\\
+ e ++（data ||''） ）;
}
var audio_context;
var recorder;
function startUserMedia（stream）{
var input = audio_context.createMediaStreamSource（stream）;
recorder =新记录器（输入）;
__log（'用于记录的系统可用。'）;
}
函数startRecording（按钮）{
记录器&& recorder.clear（）;
记录器&& recorder.record（）;
button.nextElementSibling.disabled = false;
__log（'Talk ...'）;
window.onload = function init（）{
try {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
window.URL = window.URL || window.webkitURL;
audio_context = new AudioContext;
} catch（e）{
alert（'此浏览器不支持音频！'）;
navigator.getUserMedia（{audio：true}，startUserMedia，function（e）{
__log（'没有检测到音频：'+ e）;
}）;
};
更新：
现在这个系统在这个步骤中工作：
1. 函数init（）在页面加载时和用户允许话筒之后立即运行，然后 startusermedia 函数运行
2.点击按钮后运行 toggleRecording（button）开始记录的功能
3.第二次点击按钮运行 toggleRecording 停止录制的功能
如果可能，我想在这个步骤中使用这个系统：
1.first click on按钮运行函数 init 和 startusermedia 和 togglerecording 在点击
后立即开始2.第二次点击将调用 toggleRecording 函数停止记录
它不起作用，因为 init（）实际上是一个附加到 window.onload 的变量。尝试删除 window.onload = function init（），并用函数init（）替换它（所以它不再然后调用：
< button type =submitonclick =init（）; toggleRecording （）data-run =0>< / button>
当你设置这样的事件处理程序时，你甚至不需要给函数一个名字。像> window.onload = function（）{...} 是完全有效的 - 它们被称为匿名函数。
我也注意到 toggleRecording（）存在一些实现问题，所以我尽我所能修复了这些问题。当然， getAttribute（）需要一个元素，所以我们可以使用这个来传递按钮，并在 toggleRecording（）作为按钮变量。
代码现在是：
））; // if（run === 1）{recorder&& recorder.stop（）;记录器&& recorder.exportWAV（function（blob）{uploadAudioFromBlob（blob）;}）; __log（'停止录制'）; button.setAttribute（'data-run'，0）; } else {记录器&& recorder.clear（）;记录器&& recorder.record（）; __log（讲......）; button.setAttribute（'data-run'，1）; }}函数__log（e，data）{// TODO：取消注释，我注释了它，所以StackSnippet没有错误// showInfo（\\\
+ e ++（data ||'' ））; console.log（e.data）;} var audio_context; var recorder; function startUserMedia（stream）{var input = audio_context.createMediaStreamSource（stream）;记录器=新记录器（输入）; __log（'可用于记录的系统'）;}函数startRecording（按钮）{记录器&& recorder.clear（）;记录器&& recorder.record（）; button.nextElementSibling.disabled = false; __log（'Talk ...'）;}函数init（）{try {window.AudioContext = window.AudioContext || window.webkitAudioContext; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; window.URL = window.URL || window.webkitURL; audio_context = new AudioContext; } catch（e）{alert（'这个浏览器不支持音频！'）; } navigator.getUserMedia（{audio：true}，startUserMedia，function（e）{__log（'没有检测到音频：'+ e）;}）;};
< button onclick =init（）; toggleRecording（this）>点击我< / button>
I use this HTML and JS code, which I downloaded from the web to record audio, but there is a problem because after the page is loaded on the screen immediatelly appears message to allow microphone. It is because of window.onload = function init()in source code record.js. But I want to show the message after clicking on button.
For this reason I tried to call two functions with this button - toggleRecording(button) and init() but there was a problem with "button" element, so it didn't work, but I think it could work if it will be written in good form. Can you show me example how to modify this two functions init and toggleRecording to be called by this button? I am new in JS and I don't know how it works exactly.
index.html
<button type="submit" onclick="toggleRecording()" data-run="0"></button>
record.js
//starts by click on button
function toggleRecording() {
var run = parseInt(getAttribute('data-run')); //
if(run === 1) {
recorder && recorder.stop();
recorder && recorder.exportWAV(function(blob) {
uploadAudioFromBlob(blob);
});
__log('Recording is stopped.');
button.setAttribute('data-run', 0);
}
else {
recorder && recorder.clear();
recorder && recorder.record();
__log('Speak...');
button.setAttribute('data-run', 1);
}
}
function __log(e, data) {
showInfo("\n" + e + " " + (data || ''));
}
var audio_context;
var recorder;
function startUserMedia(stream) {
var input = audio_context.createMediaStreamSource(stream);
recorder = new Recorder(input);
__log('Systém for recording is available.');
}
function startRecording(button) {
recorder && recorder.clear();
recorder && recorder.record();
button.nextElementSibling.disabled = false;
__log('Talk...');
}
window.onload=function init() {
try {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
window.URL = window.URL || window.webkitURL;
audio_context = new AudioContext;
} catch (e) {
alert('This browser do not support audio!');
}
navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
__log('No audio was detected: ' + e);
});
};
UPDATE:
Now this system works in this steps:
1. function init() runs immediatelly when page is loaded and after user allows microphone then startusermedia function runs
2.after clicking on button runs toggleRecording(button) function which starts recording
3.second click on button runs toggleRecording function which stop recording
I want to work this system in this steps if it is possible:
1.first click on button run functions init and startusermedia and togglerecording so recording will starts immediately after clicking
2.second click will call toggleRecording function to stop recording
It's not working because init() is actually a variable attached to window.onload. Try removing window.onload=function init() and replacing it with just function init() (so it no longer runs when the page loads), then call:
<button type="submit" onclick="init();toggleRecording()" data-run="0"></button>
When you're setting up event handlers like that, you don't even need to give the function a name. Something like window.onload = function() { ... } is perfectly valid - they're called anonymous functions.
I also noticed some implementation troubles with toggleRecording(), so I've done my best to fix those too. getAttribute() needs an element, of course, so we can pass the button using this, and receive it in toggleRecording() as the button variable.
Your full code is now:
//starts by click on button
function toggleRecording(button) {
var run = parseInt(button.getAttribute('data-run')); //
if (run === 1) {
recorder && recorder.stop();
recorder && recorder.exportWAV(function(blob) {
uploadAudioFromBlob(blob);
});
__log('Recording is stopped.');
button.setAttribute('data-run', 0);
} else {
recorder && recorder.clear();
recorder && recorder.record();
__log('Speak...');
button.setAttribute('data-run', 1);
}
}
function __log(e, data) {
//TODO: Uncomment this, I have it commented so there are no errors in the StackSnippet
//showInfo("\n" + e + " " + (data || ''));
console.log(e.data);
}
var audio_context;
var recorder;
function startUserMedia(stream) {
var input = audio_context.createMediaStreamSource(stream);
recorder = new Recorder(input);
__log('Systém for recording is available.');
}
function startRecording(button) {
recorder && recorder.clear();
recorder && recorder.record();
button.nextElementSibling.disabled = false;
__log('Talk...');
}
function init() {
try {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
window.URL = window.URL || window.webkitURL;
audio_context = new AudioContext;
} catch (e) {
alert('This browser do not support audio!');
}
navigator.getUserMedia({
audio: true
}, startUserMedia, function(e) {
__log('No audio was detected: ' + e);
});
};
<button onclick="init(); toggleRecording(this)">Click me</button>
这篇关于用一个按钮Javascript运行2个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
