h5吹气互动(利用recorderjs获取输入音量大小)
h5吹气互动原理是利用获取麦克风音量，用一段逻辑来判断。研究了半天~
最开始用的是下面这种方法（在ios下失效）：
<!doctype html>
<html style="font-size: calc((100vw / 375)*10)">
<head>
<meta charset="utf-8" ></meta>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<title>Disney Spring Web - voice！</title>
<script src="./recorder.mp3.min.js"></script>
</head>
<body>
<div class="container" id="container">
<div id="status">0</div>
<div id="log">log...</div>
</div>
</body>
</html>
let mystatus = document.getElementById('status');
let log = document.getElementById('log');
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia ||navigator.mediaDevices.getUserMedia;
if(!navigator.getUserMedia){
mystatus.innerHTML = "您的浏览器不支持获取音频。";
log.innerHTML+="您的浏览器不支持获取音频。";
}
function onSuccess(stream){
log.innerHTML+="onSuccess";
mystatus.innerHTML = "获取音量中...";
audioContext = window.AudioContext || window.webkitAudioContext;
context = new audioContext(); //创建一个管理、播放声音的对象
liveSource = context.createMediaStreamSource(stream); //将麦克风的声音输入这个对象
var levelChecker = context.createScriptProcessor(4096,1,1); //创建一个音频分析对象，采样的缓冲区大小为4096，输入和输出都是单声道
liveSource.connect(levelChecker); //将该分析对象与麦克风音频进行连接
levelChecker.connect(context.destination);
levelChecker.onaudioprocess = function(e) { //开始处理音频
var buffer = e.inputBuffer.getChannelData(0); //获得缓冲区的输入音频，转换为包含了PCM通道数据的32位浮点数组
console.log(buffer);
//创建变量并迭代来获取最大的音量值
var maxVal = 0;
for (var i = 0; i < buffer.length; i++) {
if (maxVal < buffer[i]) {
maxVal = buffer[i];
}
}
//显示音量值
mystatus.innerHTML = "您的音量值："+Math.round(maxVal*100);
if(maxVal>.5){
//当音量值大于0.5时，显示“声音太响”字样，并断开音频连接
mystatus.innerHTML = "您的声音太响了!!";
liveSource.disconnect(levelChecker);
}
};
}
function onError(e){
log.innerHTML+=e;
mystatus.innerHTML = "获取音频时好像出了点问题。";
}
try{
navigator.getUserMedia({audio: true}, onSuccess, onError);
}catch(err){
log.innerHTML+=err;
}
最后使用了开源的recorderjs：
recorderjs 开源地址： https://github.com/xiangyuecn/Recorder
var rec;
function startRec(){
rec=Recorder({
type:"mp3"
,sampleRate:16000
,bitRate:16
,onProcess:function(buffers,powerLevel,bufferDuration,bufferSampleRate){
var buffer = buffers[buffers.length-1];
console.log(buffer);
// var buffer = buffers.getChannelData(0); //获得缓冲区的输入音频，转换为包含了PCM通道数据的32位浮点数组
//创建变量并迭代来获取最大的音量值
var maxVal = 0;
for (var i = 0; i < buffer.length; i++) {
if (maxVal < buffer[i]) {
maxVal = buffer[i];
}
}
//显示音量值
console.log(maxVal);
mystatus.innerHTML += "<br />您的音量值："+Math.round(maxVal/100);
if(maxVal>300){
//mystatus.innerHTML = "吹气成功!!";
rec.stop();
}
}
});//使用默认配置，mp3格式
//打开麦克风授权获得相关资源
rec.open(function(){
//开始录音
rec.start();
},
function(msg,isUserNotAllow){
//用户拒绝了权限或浏览器不支持
alert((isUserNotAllow?"用户拒绝了权限，":"")+"无法录音:"+msg);
});
};
//开始
startRec();
//3秒后自动结束，
setTimeout(function(){
rec.stop();
}, 3000);
============ 欢迎各位老板打赏~ ===========
与本文相关的文章
