在暂停某些HTML5 时发出声音

为什么某些文件上的音频会在hoverstate离开时“pop”或“click”，而不会在其他文件上出现？ 可以在这里观察到弹出（JSFiddle）。 您可能需要hover然后取消几次才能听到它。 即使文件转换为.ogg，它仍然会在hover退出时弹出（尽管响应速度明显更快）。

var test = new Audio("test.ogg"); $('#test').hover(function() { test.play(); }, function() { test.pause(); test.currentTime = 0; }); 

有什么方法可以解决这个问题吗？ 它是音频文件本身吗？ 有没有办法以编程方式防止它？

Answer 1

以下代码不使用暂停或播放，而是让声音在循环中播放，并在鼠标进入/离开时淡入/淡出。

衰落由每20ms调用一次的函数逐步完成。 此function将减少targetVolume与实际样本量之间的差异。

http://jsfiddle.net/f9rEu/5/

 var test = new Audio("http://www.sounddogs.com/previews/25/mp3/228367_SOUNDDOGS__dr.mp3"); test.loop = true ; test.play(); fade(0); $('#test').hover(function() { fade(1); return; }, function() { fade(0); return; }); var targetVolume = 0; var volumeIncrease = 0.0023 ; // in percent per millisecond function fade( dest ) { targetVolume = dest ; } var lastTime = Date.now(); function fader() { var now= Date.now() ; var dt = now - lastTime ; lastTime = now; var diff = targetVolume - test.volume ; if (diff == 0 ) return; if (Math.abs ( diff ) < 5* volumeIncrease*dt ) { test.volume = targetVolume ; return ; } var chg = (diff > 0) ? volumeIncrease : - volumeIncrease ; chg *= dt ; var newTestVolume = test.volume + chg; test.volume = newTestVolume ; } setInterval(fader, 20); 

编辑：我只试过桌面/ Chrome，它没关系，我只是测试了Safari确定，但是例如在Firefox上它实在是一团糟。

出于好奇，我想知道是不是因为mp3缓冲区的处理方式，如果使用.wav作为输入，声音确实是干净的。
对于短循环环境声音，.wav是可以的。
对于更长的声音，我猜文件大小太高了。

我没有在移动设备上测试，但他们的音频是如此滞后，我不打赌…

这是一个使用wav的小提琴： http ： //jsfiddle.net/f9rEu/20/

请注意，您可以使用webAudio ，这是一个低延迟的html5音频API，允许大量的声音处理。
如果您对目标浏览器/设备的支持是正常的，您可以在这里查看：
http://caniuse.com/audio-api

Answer 2

每当您播放音频文件然后将其音量突然变为零时，“弹出”现象是不可避免的。

声音是振动，振动被编码为声音样本中的值，并且该值很可能不同于零（比如任意值“x”）。

因此，当声音从“x”变为0时，这代表另一种具有可听音频效果的非常短的“振动”。 当播放恢复时，发生同样的事情，从0到另一个“y”值（这是下一个样本中“振动”的值）。 这种“运动”创造了一种可听的“流行音乐”。

X或Y越“远离零”，流行音乐就越容易听到。 这可以解释不同文件之间的现象的可变性。

只有在停止时逐渐淡出（也是几毫秒）音量并且在恢复时逐渐淡入时，才能避免此效果。

请原谅我语言和物理的过度简化，我试着理解。