WebRTC錄音功能 | 掘金技術徵文

BrigandShi發表於2019-04-16
Web

HTML部分

標籤部分

  • audio標籤，實現錄製完畢播放音訊
  • button按鈕，分別實現開始錄製、開始播放、開始下載

特別說明

  • controls音訊進度條
  • disabled按鈕不啟用狀態
<audio controls id="audioPlay"></audio>
<button id="btnRecord">開始錄製</button>
<button disabled id="btnPlay">開始播放</button>
<button disabled id="btnDownload">開始下載</button>
複製程式碼

JavaScript部分

獲取標籤id

  • querySelector可以獲取每個標籤下的id
var audioPlay = document.querySelector('audio#audioPlay');
var btnRecord = document.querySelector('button#btnRecord');
var btnPlay = document.querySelector('button#btnPlay');
var btnDownload = document.querySelector('button#btnDownload');
複製程式碼

非同步獲取音訊流

  • stream引數為獲取到的音訊流
  • window.stream實現全域性流
navigator.mediaDevices.getUserMedia({audio:true})
.then(gotMediaStream);
function gotMediaStream(stream){
    window.stream = stream; 
}
複製程式碼

實現錄製效果

btnRecord.onclick = () => {
    if(btnRecord.textContent === '開始錄製'){
        startRecord();
        btnRecord.textContent = '停止錄製';
        btnPlay.disabled = true;
        btnDownload.disabled = true;
    }else{
        stopRecord();
        btnRecord.textContent = '開始錄製';
        btnPlay.disabled = false;
        btnDownload.disabled = false;
    }
}
複製程式碼

實現開始錄製功能

  • var mediaRecorder = new MediaRecorder(stream[,options]);
  • stream為獲取到的音訊流
  • options是一個可以帶布林型別的字典，可以獲取多媒體裝置
  • ondataavailable函式用於儲存音訊流
function startRecord(){
    buffer = [];
    mediaRecorder = new MediaRecorder(window.stream,{audio:true});
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start(10) //每隔10毫秒儲存一塊資料
}
var buffer;
function handleDataAvailable(e) {
    buffer.push(e.data);
}
複製程式碼

實現停止錄製功能

function stopRecord() {
    mediaRecorder.stop();
}
複製程式碼

實現開始播放功能

btnPlay.onclick = () => {
    //使用Blob物件
    var blob = new Blob(buffer, { type: 'audio/ogg' });
    //獲取資源
    audioPlay.src = window.URL.createObjectURL(blob);
    //控制標籤
    audioPlay.controls = true;
    //開始播放
    audioPlay.play();
}
複製程式碼

實現開始下載功能

btnDownload.onclick = () => {
    var blob = new Blob(buffer, { type: 'audio/ogg' });
    url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = 'juejin.ogg';
    a.click();
}
複製程式碼

專案效果

WebRTC錄音功能 | 掘金技術徵文

Agora SDK 使用體驗徵文大賽 | 掘金技術徵文，徵文活動正在進行中

相關文章