只为需要该声音的按钮加载音效

Question

我正在努力提高我网站的性能。因此，我现在得到了大约 87 Google Page Speed Insight。虽然这不是最糟糕的，但也不是很好。问题之一是加载了太多资产，只使用仅 1 或 2 个

{{-- Audio --}}
<audio id="audio-poop" src="/assets/be/img/baby/sound/poop.wav" autostart="false" ></audio>
<audio id="audio-pee" src="/assets/be/img/baby/sound/pee.wav" autostart="false" ></audio>
<audio id="audio-feed" src="/assets/be/img/baby/sound/feed.wav" autostart="false" ></audio>
<audio id="audio-medicine" src="/assets/be/img/baby/sound/medicine.wav" autostart="false" ></audio>
<audio id="audio-done" src="/assets/be/img/baby/sound/done.wav" autostart="false" ></audio>
<audio id="audio-delete" src="/assets/be/img/baby/sound/delete.wav" autostart="false" ></audio>
<audio id="audio-swipe" src="/assets/be/img/baby/sound/swipe.wav" autostart="false" ></audio>
<audio id="audio-forward" src="/assets/be/img/baby/sound/forward.wav" autostart="false" ></audio>
<audio id="audio-jump" src="/assets/be/img/baby/sound/jump.wav" autostart="false" ></audio>
<audio id="audio-sleep" src="/assets/be/img/baby/sound/sleep.wav" autostart="false" ></audio>
<audio id="audio-solidfood" src="/assets/be/img/baby/sound/solidfood.wav" autostart="false" ></audio>

我检查了我的站点网络选项卡，我看到它加载了所有这些。这些是我仅在用户单击特定按钮时才调用的迷你音效。有没有办法只在用户单击需要它们的按钮时加载它们？

Answer 1

您可以直接在 javascript 中使用 Audio API:

function playSound() {
    const sound = new Audio(path);
    sound.play();
}

这样，只有点击按钮时才会加载音频文件。

只为需要该声音的按钮加载音效

Only load sound effect for a the button that need that sound

html

javascript

audio

html5-audio