WebRTC录音功能 | 掘金技术征文

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();
}
复制代码

项目效果

Agora SDK 使用体验征文大赛 | 掘金技术征文，征文活动正在进行中