在暂停某些HTML5< audio>时听到弹出声 [英] Audible popping when pausing some HTML5 <audio>

问题描述

为什么某些文件上的音频会在hoverstate离开时'pop'或'click'，而不会在其他文件上？可以在此处（JSFiddle）中观察到弹出。您可能需要悬停然后取消几次才能听到它。即使文件转换为.ogg，它仍然会在悬停退出时弹出（尽管响应速度要快得多）。

Why does the audio on certain files 'pop' or 'click' when the hoverstate is left, but not on others? Popping can be observed here (JSFiddle). You may have to hover and then unhover a few times to hear it. Even when the file is converted to .ogg, it still pops on hover exit (though it is significantly more responsive).

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

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

Is there any way to resolve this? Is it the audio file itself? Is there a way to programmatically prevent it?

推荐答案

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

The following code is not using pause or play but rather let the sound play in loop, and fades in / out when the mouse enters/leaves.

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

The fading is done progressively by a function called every 20ms. This function will reduce the difference between a targetVolume and the actual sample volume.

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上它实际上是一团糟。

Edit : I had only tried on desktop/Chrome, and it was ok, i just tested Safari ok, but for instance on Firefox it is in did a mess.

出于好奇，我想知道是不是因为mp3缓冲区的处理方式，如果你使用.wav作为输入，声音确实很干净。< br>
对于短循环环境声音，.wav没问题。

对于较长的声音，我猜文件大小太高了。

Out of curiosity, i wondered if it was because of the way the mp3 buffer was handled, and indeed the sound is clean if you use a .wav as input.
For a short looping ambient sound, .wav is ok.
For a longer sound, i guess the file size would be just too high.

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

I did not test on mobile devices, but their audio is so laggy that i wouldn't bet...

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

Here's a fiddle using a wav : http://jsfiddle.net/f9rEu/20/

请注意，您可以使用 webAudio 这是一个低延迟的html5音频API，可以进行大量的声音处理。

你可以看看这里是否支持浏览器/设备目标：

http://caniuse.com/audio-api

Notice that you might use webAudio that is a low latency html5 Audio API that allows a LOT of sound processing.
You might look here if its support is ok for the browsers/devices you target :
http://caniuse.com/audio-api

这篇关于在暂停某些HTML5&lt; audio&gt;时听到弹出声的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！