更多功能的一個按鈕=使用JavaScript錄製

Question

我有這個源代碼來在瀏覽器中錄製音頻。 Record.js調用另一個腳本來提供錄製音頻並將其保存到服務器。

的index.html

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

record.js

現在該記錄系統工作在這個步驟：

1. function init()運行immediatelly當頁面被加載和用戶之後允許麥克風在消息startusermedia功能

點擊後

運行開啓按鈕運行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()運作init()。所以它通過點擊按鈕來調用，而不是通過瀏覽器自動調用。現在它以這種方式工作：在點擊按鈕後，它顯示消息以允許麥克風，然後允許消息顯示：「'用於錄製的系統可用。' （函數startUserMedia的叫法）。之後記錄犯規開始後第二次點擊網絡瀏覽器的消息再次顯示，讓MIC和控制檯顯示此錯誤：。

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');類似。

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