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

2401_85015220 2024-06-14 17:33:01 阅读 65

img

img

既有适合小白学习的零基础资料,也有适合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);

},

## 四、全部代码



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。