HTML部分
标签部分
- audio标签，实现录制完毕播放音频
- button按钮，分别实现开始录制、开始播放、开始下载
特别说明
- controls音频进度条
- disabled按钮不激活状态
复制代码
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();}复制代码 项目效果