HTML音频元素volume属性音量缩放模式实测及浏览器兼容性问询
HTML媒体元素volume属性实现与兼容性测试
设置音频(媒体)元素音量可通过 media.volume [ = value ] 实现,规范中规定value为0到1之间的浮点数值,同时提到“该范围无需为线性”。我有按指定相对值播放音频的需求:先以参考电平播放一个音频,再播放另一个比如低3dB的音频。
规范未明确该范围是对能量(波形平方)还是声压(原始波形)进行缩放,我推测为后者(原始波形)。若要降低3dB,我最初的实现方式如下:
let dL = -3; media.volume *= 20 * Math.log10(10,dL/20);
测试验证结果
我使用专业声压级计(B&K 2250)进行测试,从0dB阶梯式降低到-78dB,仅最后一步因主板声卡的电气背景噪声导致输出电平降幅略低于预期,其余场景下输出电平与代码设置的电平偏移量dL完全线性对应。本次测试基于2021年9月2日发布的最新版Chrome、EDGE、Firefox浏览器完成。
目前标准表述较为模糊,但上述三款浏览器对音量缩放逻辑的实现符合普遍预期,请问是否有其他浏览器对volume属性的解析逻辑存在差异?
完整测试代码
<!DOCTYPE html> <html> <body> <h1>Test audio level</h1> <div id="container"> <audio id="music"> <source src="94dB 1kHz.WAV" type="audio/mpeg" /> </audio> </div> <button onclick="lowerAudio()">Lower</button> <button onclick="raiseAudio()">Raise</button> <button onclick="fadeAudio()">Fade out</button> <script> music = document.getElementById("music"); music.controls = true; music.loop=true; music.load(); var scaleDown = Math.pow(10,-3/20); var scaleUp = Math.pow(10,3/20); var fadeOutFactor = Math.pow(10,-0.5/20); function lowerAudio() { let v = music.volume * scaleDown; if (v > 0 ) {music.volume =v;} var dB = 20*Math.log10(music.volume); console.log("music is now at " + dB + " dB and volume is " + music.volume); } function raiseAudio() { let v = music.volume * scaleUp; if (v <= 1 ) {music.volume =v;} else {music.volume = 1;} var dB = 20*Math.log10(music.volume); console.log("music is now at " + dB + " dB and volume is " + music.volume); } function fadeAudio() { var fadeAudio = setInterval(function () { // check if higher than -100 dB if (music.volume > 1e-5) { music.volume *= scaleDown; } else { var dB = 20*Math.log10(music.volume); console.log("music is now at " + dB + " dB and volume is " + music.volume); clearInterval(fadeAudio); } }, 50); } </script> </body> </html>
内容的提问来源于stack exchange,提问作者Erik Thysell
相关产品推荐
相关产品推荐

