这样的效果其实早就可以实现,昨天有同事问道,抽空整理了下,大家要注意一下几点
- AudioContext
- createGain()方法
- createMediaStreamSource(stream)
- createAnalyser() 分析器
先看下demo 地址
全部的代码
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();
var inputPoint = null, zeroGain = null, analyserNode;
var str =""
function updateWave() {
var freqByteData = new Uint8Array(analyserNode.frequencyBinCount);
analyserNode.getByteFrequencyData(freqByteData);
var multiplier = analyserNode.frequencyBinCount
str= ""
for(let i =0; i<500; i++) {
str+= '<span>'+freqByteData[i]+'</span>'
}
document.getElementById('arrlist').innerHTML = str
window.requestAnimationFrame(updateWave);
}
var handleSuccess = function(stream) {
var audioContext = new AudioContext();
inputPoint = audioContext.createGain();
var realAudioInput = audioContext.createMediaStreamSource(stream);
realAudioInput.connect(inputPoint);
analyserNode = audioContext.createAnalyser();
analyserNode.fftSize = 2048;
inputPoint.connect( analyserNode );
updateWave()
};
navigator.mediaDevices.getUserMedia({ audio: true, video: false })
.then(handleSuccess)
有疑问的欢迎一块讨论