Question

我正在制作一个脚本，只要某个<audio>悬停在其上，就会播放某个html5 <div>元素。我正在使用jQuery来检测悬停，并通过动画音量淡入/淡出音频。

这是我的代码：

<head>
<!--  unrelated code removed -->
<script type="text/javascript">
$(document).ready(function(){
    //unrelated code removed
    $("#pog").mouseenter(function() {
        $("#poga").get(0).volume=0;
        $("#poga").get(0).play();
        $("#poga").animate({volume: 1}, 1000);
    });
    $("#pog").mouseleave(function() {
        $("#poga").animate({volume: 0}, 1000, function() {
            $("#poga").get(0).pause();
        });
    });
});
</script>
</head>
<body>
    <audio preload loop controls id="poga">
        <source src="audio/phantogram.mp3"></source>
        <source src="audio/phantogram.ogg"></source>
        Your browser isn't invited for super fun audio time.
    </audio>
    <div id="pog" class="band">Phantogram</div>
</body>

这是一个jsFiddle：http://jsfiddle.net/2eG6s/

问题是音量动画真的很不稳定。它会逐渐消失并逐渐消失（我不知道确切的音量，但是像100％，60％，20％）。这真的很奇怪，只有在Windows 21的Firefox 21.0和22.0中才会发生（Mac版本的Firefox 21.0和22.0工作正常。）

帮助！

Answer 1

我认为这在很久以前就得到了修复：https://bugzilla.mozilla.org/show_bug.cgi?id=487504

问题在于音频缓冲区以及旧libsydneyaudio后端如何使用它。缓冲区未在音量改变时被清除，因此仅在当前缓冲的音频播放完毕后才发出声音变化。

根据https://bugzilla.mozilla.org/show_bug.cgi?id=852401启动并运行的新cubeb后端应该已经解决了这个问题，但显然仍有问题，对我来说这仍然听起来像是一个缓冲问题。 / p>

我曾经使用在play()事件中调用volumechange方法的变通方法，这有助于减少它的波动，但现在这样做似乎没有区别。< / p>

因此，虽然我没有解决此问题的解决方案（如果有的话），但我认为这些信息可能有用。

html5 <audio>：Firefox中的音量动画不稳定</audio>

1 个答案: