vue前端获取 切换麦克风,播放采集音频和采集音量大小_vue页面唤起麦克风
2401_85015220 2024-06-14 17:33:01 阅读 65
既有适合小白学习的零基础资料,也有适合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);
},
## 四、全部代码
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。