一键运行更多功能的JavaScript（记录在浏览器中的音频） [英] One button to run more functions JavaScript (recording audio in browser)

问题描述

您好我有这个源$ C ​​$ C，记录在浏览器中的音频。 Record.js 调用另一个脚本，提供了录制音频，并将其保存到服务器上。

Hi I have this source code to record audio in browser. Record.js calls another scripts that provides recording audio and save it to the server.

的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);
    });
  };

现在这个的录音系统的工作在这个步骤进行：

Now this recording system works in this steps:

1. 函数的init（）时，页面加载immediatelly运行和用户允许后在消息麦克风 startusermedia 函数运行
   2点击按钮运行可开始录制音频 toggleR​​ecording（按钮）功能之后


2. 在按钮运行第二次点击 toggleR​​ecording 函数停止录制音频

1. function init() runs immediatelly when page is loaded and after user allows microphone in message startusermedia function runs 2 after clicking on button runs toggleRecording(button) function which starts recording audio
2. second click on button runs toggleRecording function which stop recording audio

我想在此步骤来解决这个系统，如果它是可能的：
1.按钮运行函数初始化和startusermedia和togglerecording首先点击所以录音将点击后立即启动
2.单击将称之为toggleR​​ecording功能停止录制

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. click will call "toggleRecording" function to stop recording

这题目是与我的previous问题：运行2功能通过一个按钮的Javascript

This topic is related to my previous question: Run 2 functions with one button Javascript

推荐答案

如果我得到你的问题正确，你只需要像这样：

If I get your question correctly you just need something like this:

var recording = false;
var recordButton = document.getElementById('recordButton');
function startRecording() {
   if(!recording)
   {
      init();
      startusermedia(recordButton); 
  }

  toggleRecording(recordButton);
  recording = !recording;

}

和按钮：

<button type="submit" onclick="startRecording();" data-run="0" id="recordButton"></button>

这篇关于一键运行更多功能的JavaScript（记录在浏览器中的音频）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！