// 这里是获取一次数据,持续更新数据可以通过多种方式达到
1.播放进度推进时获取
<audio id="shakedown-audio-mp3"
onTimeUpdate={drawVolume.bind(this)}
>
<source src={Feint} type="audio/mp3" />
</audio>
2.计时器不多说了
3.requestAnimationFrame
let oCtx = null;
let audioSrc = null;
let analyser = null;
let audioPlay=null;
// 音量条绘制
function drawVolume(analyser) {
if (analyser == null || audioPlay) return;
let voiceHeight = new Float32Array(analyser.frequencyBinCount);
analyser.getFloatFrequencyData(voiceHeight);
let maxVolume = -Infinity;
for (let i = 4, ii = voiceHeight.length; i < ii; i++) {
if (voiceHeight[i] > maxVolume && voiceHeight[i] < 0) {
maxVolume = voiceHeight[i];
}
}
let audioVolume = Math.round(Math.pow(10, maxVolume / 85) * 20);
audioVolume = audioVolume < 0 ? 0 : audioVolume;
audioVolume = audioVolume > 10 ? 10 : audioVolume;
//audioTimer = setTimeout(this.drawVolume.bind(this), 300); 如果audio停止播放就用定时器来持续更新
}
// 扬声器连接
function audioContext() {
try {
oAudio = document.getElementById('shakedown-audio-mp3');
// 创建音频上下文对象
oCtx = new AudioContext();
// console.log(oCtx);
// 创建媒体源,除了audio本身可以获取,也可以通过oCtx对象提供的api进行媒体源操作
audioSrc = oCtx.createMediaElementSource(oAudio); //通过标签获取
//audioSrc = oCtx.createMediaStreamSource(stream); //使用多媒体流
// 创建分析机
analyser = oCtx.createAnalyser();
// 媒体源与分析机连接
audioSrc.connect(analyser);
// 输出的目标:将分析机分析出来的处理结果与目标点(耳机/扬声器)连接
// analyser.connect(oCtx.destination);// 连接后会输出声音,不连接无声只获取音量
} catch (error) {}
}
// 如果需要停止连接
oCtx.close();
版权声明:本文为weixin_43222302原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。