我有一个显示图片的网页。单击图片后,我希望它播放一些声音文件(图片中对象名称的录音)。我有为此工作代码,但是在单击图像和听到正在播放的音频文件之间有明显的延迟。如何改进我的代码以摆脱这种延迟?
.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>";
}
以防万一它对某人有所帮助,我只是尝试调试相同的问题,并发现我的廉价蓝牙耳机导致延迟 - 确保用有线扬声器进行测试我猜。