Question

我有这个源代码在浏览器中录制音频。 Record.js调用另一个脚本，提供录制音频并将其保存到服务器。

的index.html

＆＃13;

<button type="submit" onclick="toggleRecording()" data-run="0"></button>

＆＃13;

record.js

＆＃13;

//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) {     
    showInfo("\n" + e + " " + (data || ''));  
      }

      var audio_context;
      var recorder;
      function startUserMedia(stream) { 
        var input = audio_context.createMediaStreamSource(stream); 
        recorder = new Recorder(input); 
        __log('System 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);
        });
      };

＆＃13;

现在这个录音系统按以下步骤工作：

1. function init()在加载页面时立即运行，并且在用户允许麦克风发送消息startusermedia函数运行后

运行toggleRecording(button)功能，开始录制音频

3.第二次点击按钮运行toggleRecording功能，停止录制音频。

如果有可能，我想在此步骤中使用此系统： 1.首先点击按钮运行功能init和startusermedia以及togglerecording，以便点击后立即开始录制 2.第二次点击将调用toggleRecording功能停止录制

我尝试修改record.js代码，因此我将此部分添加到源代码的顶部，因此单击按钮称为函数start_KEMT而不是toggleRecording()。创建Start_KEMT是因为我想以正确的顺序运行函数。

在record.js 中添加了部分内容

＆＃13;

var recording = false;
var recordButton = document.getElementById('recordButton');

//function which is called by click on button
function start_KEMT() {
   if(!recording)
   {
      init();
      toggleRecording(recordButton);
  }
  toggleRecording(recordButton);
  recording = !recording;
}

＆＃13;

同时修改了init()函数，因此我将其从window.onload = function init()更改为函数init()。因此，通过单击按钮调用它，而不是通过浏览器自动调用。现在它以这种方式工作：点击按钮后，它显示允许麦克风的消息，允许消息显示：＆＃34;＆＃39;录制系统可用。＆＃39; （调用函数startUserMedia）。之后录制没有开始。在第二次单击后，再次显示Web浏览器消息以允许麦克风。此错误显示在控制台中：

未捕获的TypeError：无法读取属性＆＃39; getAttribute＆＃39;为null

请举例说明如何正确行事。我是JS的新手。本主题与：One button to run more functions JavaScript (recording audio in browser)

Answer 1

嗯，你在无所事事的情况下调用方法。

getAttribute('data-run');应该类似于this.getAttribute('data-run');或button.getAttribute('data-run');，具体取决于具体情况。

Answer 2

可能你正在寻找像这样的东西

var audioContext;
var recorder;
var recording = false;
var initialized = false;

var recordButton = document.getElementById('recordBtn');
recordButton.addEventListener('click', start);

//function which is called by click on button
function start(e) {
    e.preventDefault();
    if (!initialized) {
        init();
    }
    toggleRecording(e.target);
}

function init() {
    try {
        window.AudioContext = window.AudioContext || window.webkitAudioContext;
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
        window.URL = window.URL || window.webkitURL;
        audioContext = new AudioContext();
    } catch (e) {
        alert('This browser do not support audio!');
    }
    navigator.getUserMedia({
        audio: true
    }, startUserMedia, function (e) {
        __log('No audio was detected: ' + e);
    });
    initialized = true;
};



function startUserMedia(stream) {
    var input = audioContext.createMediaStreamSource(stream);
    recorder = new Recorder(input);
    __log('System for recording is available.');
};

//starts by click on button
function toggleRecording(button) {
    if (recording) {
        recorder && recorder.stop();
        recorder && recorder.exportWAV(function (blob) {
            alert(blob.size);
        });
        __log('Recording is stopped');
        recording = false;
        button.innerText = "Start";
    } else {
        recorder && recorder.clear();
        recorder && recorder.record();
        __log('Speak...');
        recording = true;
        button.innerText = "Stop";
    }
};

function __log(e, data) {
    console.log("\n" + e + " " + (data || ''));
};

DEMO

更多功能的一个按钮=使用JavaScript

2 个答案: