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

I'm trying to increase the performance of my site. I got about ~87 right now accordingly Google Page Speed Insight. While it's not the worst, it's not great either. One of the issues is loading too much assets and only use only 1, or 2 of them

{{-- 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>

I check my sites networks tab, I see that it loaded all of these. Those are mini sound effect that I called only when user clicked on specific buttons. Is there a way to only load them when user click on a button that need them ?

CodePudding user response：

You can use directly in javascript using the Audio API:

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

In this way, the audio file will only load when the button is clicked.