Question

我有一个显示图片的网页。点击图片后，我希望它能播放一些声音文件（图片中对象名称的录音）。我有这方面的工作代码，但是在点击图像和听到正在播放的音频文件之间会有明显的延迟。如何改进我的代码以摆脱延迟？

HTML：

<div>
    <button style="background-image:url('objects/images/horlicks.JPG'); width:480; height:640" onclick="changeText('horlicks', 'Horlicks', 'objects/sounds/horlicks.mp3')">
    </button>
    <p id="horlicks"></p>
</div>

JavaScript的：

function changeText(id, newText, audioFile) {
    document.getElementById(id).innerHTML = newText;  // This happens quickly
    new Audio(audioFile).play();  // This takes a long time
}

更新：

HTML / JavaScript已经更新为这样，播放音频文件时仍然存在延迟（虽然滞后仅在iPad上显而易见，而不是在我的笔记本电脑上）：

<div>
    <button style="background-image:url('objects/images/horlicks.JPG'); width:480; height:640" onclick="changeText('horlicks', 'Horlicks', '32'); horlicks.play();">
    </button>
    <p id="horlicks"></p>
</div>

JavaScript的：

var horlicks = new Audio('objects/sounds/horlicks.mp3');
function changeText(id, newText, size) {
    document.getElementById(id).innerHTML = '<font size="'+size+'">'+newText+"</font>";
}

Answer 1

为了防患于未然，我只是尝试调试相同的问题，并弄清楚我的廉价蓝牙耳机会导致延迟，请确保使用有线扬声器对此进行测试。

单击播放音频时出现意外延迟

1 个答案: