Safari上的HTML5音频标签有延迟

Question

我正在尝试完成一个简单的类似涂鸦的行为,使用html标签点击mp3/ogg声音.它应该可以在Firefox,Safari和Safari iPad下工作.

我已经尝试了很多方法,并且已经归结为:

HTML

    <span id="play-blue-note" class="play blue" ></span>
    <span id="play-green-note" class="play green" ></span>


    <audio id="blue-note" style="display:none" controls preload="auto" autobuffer> 
        <source src="blue.mp3" />
        <source src="blue.ogg" />
        <!-- now include flash fall back -->
    </audio>

    <audio id="green-note" style="display:none" controls preload="auto" autobuffer> 
        <source src="green.mp3" />
        <source src="green.ogg" />
    </audio>

JS

function addSource(elem, path) {
    $('<source>').attr('src', path).appendTo(elem);
}

$(document).ready(function() {


    $('body').delegate('.play', 'click touchstart', function() {
        var clicked = $(this).attr('id').split('-')[1];

        $('#' + clicked + '-note').get(0).play();



    });

});  

你可以在ign.com.uy/loog/看到整个演示

这似乎在Firefox下运行得很好,但是每当你点击时Safari似乎都有延迟,即使你多次点击并且音频文件已加载.在iPad上的Safari上,它几乎无法预测.

此外,当我在本地测试时,Safari的性能似乎有所改善,我猜测Safari每次都在下载文件.这可能吗？我怎么能避免这个？谢谢!

Answer 1

<audio>几分钟前我刚回答了另一个iOS/问题.似乎也适用于此:

禁用预加载<audio>和<video>在iOS设备上以节省带宽.

在iOS上的Safari(适用于所有设备,包括iPad)中,用户可能位于蜂窝网络上并按数据单元收费,因此禁用预加载和自动播放.在用户启动数据之前不会加载任何数据.

来源:Safari开发者库

Answer 2

Safari 的问题在于它每次都会为正在播放的音频文件发出请求。您可以尝试创建 HTML5 缓存清单。不幸的是，我的经验是您一次只能将一个音频文件添加到缓存中。解决方法可能是将所有音频文件按顺序合并为一个音频文件，然后根据所需的声音在特定位置开始播放。您可以创建一个间隔来跟踪当前播放位置，并在到达某个时间戳后暂停它。

在此处阅读有关创建 HTML5 缓存清单的更多信息：

http://www.html5rocks.com/en/tutorials/appcache/beginner/

http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html

希望能帮助到你！

Answer 3

在桌面Safari上，添加AudioContext可解决以下问题：

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

我是偶然发现的，所以我不知道它为什么起作用，但这消除了我的应用程序的延迟。