Javascript 暂停某些HTML5时可听到爆裂声<；音频>；

为什么当鼠标悬停状态保持时，某些文件上的音频会“弹出”或“单击”，而其他文件上的音频则不会？可以观察到爆裂（JSFIDLE）。您可能需要悬停几次，然后将其取消悬停，才能听到它。即使将文件转换为.ogg，它仍然会在悬停退出时弹出（尽管它的响应速度要快得多）

有没有办法解决这个问题？是音频文件本身吗？有没有办法通过编程来防止它？

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

声音就是振动，振动被编码为声音样本中的一个值，这个值很可能不同于零（比如任意值“x”）

因此，当声音从“x”变为0时，这表示另一个非常短的“振动”，具有可听的音频效果。 继续播放时也会发生同样的情况，从0变为另一个“y”值（即下一个示例中的“振动”值）。这种“运动”产生了一种可听见的“砰”声

X或Y越“远离零”，弹出的声音就越大。这可以解释这种现象在不同文件之间的可变性

只有在停止时对卷进行逐渐淡入（也就是几毫秒），在恢复时进行逐渐淡入，才能避免这种影响

---

请原谅我对语言和物理的过分简化，我试图让人理解。

下面的代码没有使用暂停或播放，而是让声音循环播放，当鼠标进入/离开时，声音淡入/淡出

通过一个称为每隔20ms的函数逐步进行衰减。此功能将减少targetVolume与实际采样体积之间的差异

var测试=新音频（“http://www.sounddogs.com/previews/25/mp3/228367_SOUNDDOGS__dr.mp3");
test.loop=true；
test.play（）；
衰减（0）；
$（'#test'）。悬停（函数（）{
褪色（1）；
返回；
}，函数（）{
衰减（0）；
返回；
});
var targetVolume=0；
变量体积增量=0.0023；//以百分比/毫秒为单位
功能衰减（dest）{
targetVolume=dest；
}
var lastTime=Date.now（）；
函数推子（）{
var now=Date.now（）；
var dt=现在-上次；
上次=现在；
var diff=目标体积-测试体积；
如果（差异==0）返回；
if（数学绝对值（差值）<5*体积增量*dt）{
test.volume=目标体积；
返回；
}
变量chg=（差异>0）？体积增加：-体积增加；
chg*=dt；
var newTestVolume=测试体积+chg；
test.volume=newTestVolume；
}
设置间隔（音量控制器，20）；

编辑： 我只在desktop/Chrome上试过，还可以，我刚刚测试了Safari，但比如在Firefox上，它就一团糟

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

我没有在移动设备上测试，但是他们的音频太慢了，我不敢打赌

这是一把使用wav的小提琴：

请注意，您可能会使用一种低延迟的html5音频API，它允许大量的声音处理。
如果它对目标浏览器/设备的支持正常，您可以查看此处：

---

你所说的现象并不适用于半秒左右的效果。。。如果这还不够的话，它会出现在FF+Ch上，但不会出现在Sf上（我刚刚测试了最新版本的mac OS）.@gamealchest:也许Sf实现了一种淡入淡出的形式（就像许多像VLC这样的软件玩家在停止或恢复时实际做的那样）？“短”效果：这很可能是因为声音开始和结束时平滑到零，而其他采样可能突然开始或结束。（或者，如果播放机未实现淡入/淡出机制，则暂停或恢复声音时会发生这种情况）。我在混音方面有一些经验，在剪切音频文件时，通常会在音乐记录中手动插入这些“淡出”部分，当您剪切粘贴音频时，以避免这些“弹出”部分。这是非常有用的，我为此感谢您，但是，我如何通过HTML5/JS/jQuery/任何程序来“淡出”音频，以保持悬停效果而不弹出？这需要付出努力并创建一个概念，但实际上这会引入比原来更多的弹出。我指责JavaScript/jQuery的速度太慢。@daveycroqet谢谢，我编辑它是为了提出一些其他方法来解决这个问题。

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

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);