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

    });

});

这在 Firefox 下似乎工作得很好，但 Safari 似乎在您单击时有延迟，即使您单击多次并且音频文件已加载也是如此。在 iPad 上的 Safari 上，它的行为几乎不可预测。

此外，当我在本地测试时，Safari 的性能似乎有所提高，我猜 Safari 每次都在下载文件。这可能吗？我怎样才能避免这种情况？谢谢！

原文由 Ignacio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

在 iOS 上的 Safari（适用于所有设备，包括 iPad）中，用户可能使用蜂窝网络并按数据单位收费，预加载和自动播放被禁用。在用户启动之前不会加载任何数据。

资料来源： Safari 开发者图书馆

原文由 j08691 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在桌面 Safari 上，添加 AudioContext 解决了这个问题：

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

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

原文由 Jaakko Karhu 发布，翻译遵循 CC BY-SA 4.0 许可协议