javascript - 一键实现更多功能 = JavaScript 录制

Question

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

index.html

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

record.js

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

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

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

1. 点击按钮后运行toggleRecording(button)函数开始录制音频

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

如果可能的话，我想按以下步骤操作这个系统:1. 首先点击按钮运行函数 init 和 startusermedia 和 togglerecording 所以点击后会立即开始录制2. 第二次点击会调用toggleRecording函数停止录音

我试图修改record.js代码，所以我将这部分添加到源代码的顶部，所以通过点击按钮调用函数start_KEMT的 toggleRecording()。创建 Start_KEMT 是因为我想以正确的顺序运行函数。

添加部分到 record.js

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

函数 init() 也被修改了，所以我将它从:window.onload = function init() 更改为 function init()。所以它是通过点击按钮调用的，而不是浏览器自动调用的。现在它以这种方式工作:点击按钮后它显示允许麦克风的消息，允许消息后显示:“'录音系统可用。' (函数 startUserMedia 被调用)。之后录音没有开始。第二次点击网络浏览器消息后再次显示允许麦克风。控制台中显示此错误:

Uncaught TypeError: Cannot read property 'getAttribute' of 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'); 取决于上下文。