继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

WebRTC录音功能

xiupi酱
关注TA
已关注
手记 1
粉丝 1
获赞 3

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实时互动直播技术入门与实战 5G时代必备技能
  • 李老师厉害,拥有10多年的软件开发经历,8年多的音视频直播行业相关经验,有很多值得我们学习的技能,他的课通俗易懂,只要是老师的课程,我都会购买,因为课程一直很好。从ffmpeg到WebRTC,每门课程都是那么用心。学习ffmpeg不懂c语言,老师讲C,学习WebRTC,不懂JS,老师讲JS。听完老师的课,总会茅塞洞开,很难理解的知识点,在老师那里讲的通俗易懂,所以你从来不会担心学不会。
  • 最后,走过路过,千万别错过!
    图片描述
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP

热门评论

请问怎么降噪呢,这个录出来的声音里面杂音很大,而且从开始播放到结束都一直存在?

查看全部评论