为什么在悬停状态离开时某些文件上的音频“弹出”或“点击”，而在其他文件上却没有？可以观察到弹出 here (JSFiddle)。您可能需要悬停几次，然后再悬停几次才能听到它。即使文件转换为 .ogg，它仍然会在悬停退出时弹出（尽管它的响应速度要快得多）。
var test = new Audio("test.ogg");
$('#test').hover(function() {
test.play();
}, function() {
test.pause();
test.currentTime = 0;
});
有没有办法解决这个问题？是音频文件本身吗？有没有办法以编程方式阻止它？
【问题讨论】：
标签： javascript jquery html audio
当您播放音频文件然后将其音量突然调为零时，“爆音”现象是不可避免的。
声音就是振动，振动被编码为声音样本中的一个值，这个值很可能不是零（比如任意值“x”）。
因此，当声音从“x”变为 0 时，这代表另一个非常短的“振动”，具有可听的音频效果。 当播放恢复时也会发生同样的事情，从 0 变为另一个“y”值（这是下一个样本中的“振动”值）。这种“运动”会产生可听见的“砰砰”声。
X 或 Y 越“远离零”，爆裂声就越响亮。这可以解释不同文件之间现象的可变性。
只有在停止时逐渐淡出（也是几毫秒）音量并在恢复时逐渐淡入才能避免这种效果。
请原谅我在语言和物理方面过于简单化，我试图让大家理解。
【讨论】：
以下代码没有使用暂停或播放，而是让声音循环播放，并在鼠标进入/离开时淡入/淡出。
淡入淡出由每 20 毫秒调用一次的函数逐步完成。此函数将减少目标体积与实际样本体积之间的差异。
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
【讨论】：