获取音频流/Audio的音量-兼容safari

// 这里是获取一次数据,持续更新数据可以通过多种方式达到
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版权协议,转载请附上原文出处链接和本声明。