html5通过js实时获取麦克风音量
Posted 绿叶清风
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5通过js实时获取麦克风音量相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>音量</title>
<style>
</style>
</head>
<body>
<div id="status">预备开始</div>
<script type="text/javascript">
var mystatus = document.getElementById("status");
debugger
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (!navigator.getUserMedia) {
mystatus.innerHTML = "您的浏览器不支持获取音频。"
}
navigator.getUserMedia({ audio: true }, onSuccess, onError); //调用麦克风捕捉音频信息，成功时触发onSuccess函数，失败时触发onError函数
function onError() {
mystatus.innerHTML = "获取音频时好像出了点问题。"
}
function onSuccess(stream) {
//创建一个音频环境对像
audioContext = window.AudioContext || window.webkitAudioContext;
context = new audioContext();
//将声音输入这个对像
audioInput = context.createMediaStreamSource(stream);
//设置音量节点
volume = context.createGain();
audioInput.connect(volume);
//创建缓存，用来缓存声音
var bufferSize = 2048;
// 创建声音的缓存节点，createJavaScriptNode方法的
// 第二个和第三个参数指的是输入和输出都是双声道。
recorder = context.createScriptProcessor(bufferSize, 1, 1);
// 录音过程的回调函数，基本上是将左右两声道的声音
// 分别放入缓存。
recorder.onaudioprocess = function (e) {
var buffer = e.inputBuffer.getChannelData(0); //获得缓冲区的输入音频，转换为包含了PCM通道数据的32位浮点数组
//创建变量并迭代来获取最大的音量值
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);
}
}
// 将音量节点连上缓存节点，换言之，音量节点是输入
// 和输出的中间环节。
volume.connect(recorder);
// 将缓存节点连上输出的目的地，可以是扩音器，也可以
// 是音频文件。
recorder.connect(context.destination);
}
</script>
</body>
</html>
以上是关于html5通过js实时获取麦克风音量的主要内容，如果未能解决你的问题，请参考以下文章