vue前端获取 切换麦克风，播放采集音频和采集音量大小_vue页面唤起麦克风

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

});
this.recorder.startRecording();

}).catch(function(err) {
console.log(err);
console.log(‘当前浏览器不支持开启麦克风!’);
that.voiceStatus = false
});
},

在sendData中可以把数据流传给后端，可以播放/下载采集到的数据流，也可以将数据流转换成file传给后端

sendData(blob) {
var BB =new Blob([blob], {‘type’: ‘audio/wav; codecs=opus’})
// var audioURL = window.URL.createObjectURL(BB)

// 播放
// const audio = document.createElement(‘audio’)
// audio.controls = true // 音频是否显示控件
// audio.src = audioURL
// audio.play()

// 下载
// let a = document.createElement(“a”);
// a.href = audioURL;
// a.download = ‘测试’;
// a.click();
// // 释放这个临时的对象url
// window.URL.revokeObjectURL(audioURL);

let file = new window.File([BB], ‘测试.wav’)
console.log(file);
},

### 4、获取采集的音频音量大小

// 获取音量值大小
getVoice() {
const audioContext = new (window.AudioContext || window.webkitAudioContext)()
// 将麦克风的声音输入这个对象
const mediaStreamSource = audioContext.createMediaStreamSource(this.stream)
// 创建分析节点
const analyserNode = audioContext.createAnalyser()
// 连接节点
mediaStreamSource.connect(analyserNode)
// 可以实时听到麦克风采集的声音
// analyserNode.connect(audioContext.destination)

// 获取音量数据
const dataArray = new Uint8Array(analyserNode.frequencyBinCount);

function getVolume() {
analyserNode.getByteFrequencyData(dataArray);
let sum = 0;
for (let i = 0; i < dataArray.length; i++) {
sum += dataArray[i];
}
// 计算平均音量
const averageVolume = sum / dataArray.length;
return averageVolume;
}

// 每隔一段时间获取一次音量
this.timer1 = setInterval(() => {
const volume = getVolume();
console.log(‘音量:’, Math.round( volume ));
RMSList.value.unshift(Math.round(volume));
RMSList.value.pop();
// 在这里可以根据需要进行相应的处理
}, 100);
},

## 四、全部代码