点击播放音频时出现不必要的延迟

Posted

技术标签:

【中文标题】点击播放音频时出现不必要的延迟【英文标题】:Unwanted Delay in Playing Audio on-click 【发布时间】:2015-01-03 09:27:03 【问题描述】:

我有一个显示图片的网页。单击图片后,我希望它播放一些声音文件(图片中对象名称的录音)。我有这方面的工作代码,但是在单击图像和听到正在播放的音频文件之间存在明显的延迟。如何改进我的代码以消除这种延迟?

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>";

【问题讨论】:

我只会在音频元素本身已完全加载(可能添加加载 gif 或其他内容)时亲自替换文本,或者我宁愿在文档加载后强制用户下载音频,并且,然后,播放它.. 你的 mp3 文件的大小是多少?另外,您的音频是否有一个“空”的开头?我的意思是,它是完整的声音还是需要跳过的空开头?如果是这样,您可能希望从 X 秒开始播放 mp3 @briosheje:该网页旨在帮助中风患者康复。因此,我想避免华丽的“加载”。 mp3 文件很小(在本例中为 40KB),并且没有空开头。 嗯.. 那么实际延迟是多少?是几秒钟的问题还是..?我想知道的是,是否真的是下载和播放文件花费的时间太长或什么..我正在检查这个:***.com/questions/5313646/…。也许预加载文件可能会有所帮助? @briosheje:我听取了您的建议,并在包含的 JS 中预先创建了对象。仍然存在明显的延迟(几秒钟),每张图像都不同 HTML5 Audio tag on Safari has a delay的可能重复 【参考方案1】:

以防万一它对某人有所帮助,我只是尝试调试相同的问题并发现我的廉价蓝牙耳机导致延迟 - 我猜请务必使用有线扬声器进行测试。

【讨论】:

以上是关于点击播放音频时出现不必要的延迟的主要内容,如果未能解决你的问题,请参考以下文章

在Javascript中播放音频时出现意外行为

同时播放两个 AVPlayer 音频文件时出现音频故障

点击时音频播放的Javascript延迟

使用 Apple 的 MixerHostAudio 类播放音频文件时出现问题

在 vb 中播放音频时出现 AccessViolationException

在 Mac 上使用 OpenAL 播放音频时出现随机噪音