HTML: Audio jak odtworzyć ten sam dźwięk ponownie?

Ostatnio pracuję trochę z API HTML Audio i nauczyłem się prostej sztuczki.

Problem

Załóżmy, że chcemy odtwarzać jakiś dźwięk. Możemy to zrobić w łatwy sposób:

<button data-play>Play</button>

const audio = new Audio( './pew-pew.wav');
const playBtnEl = document.querySelector('[data-play]');

playBtnEl.addEventListener('click', (e) => {
	audio.play();
});

Wszystko działa poprawnie. Kiedy użytkownik kliknie przycisk, to dźwięk zostanie odtworzony. Problem będzie wtedy gdy zaczniesz szybko naciskać przycisk. Załóżmy: klikam dwa razy w przycisk. W takim przypadku chciałbym usłyszeć dwa razy ten sam dźwięk — co więcej te dźwięki mogą na siebie nachodzić. Ale w tym przypadku tak nie jest. Dźwięk nie zostanie odtworzony, dopóki ten poprzedni się nie skończy.

Rozwiązanie

Rozwiązanie tego problemu jest banalne. Po małym refaktoringu kod wygląd tak:

const getSound = () => new Audio('./pew-pew.wav');
let audio;

playBtnEl.addEventListener('click', (e) => {
	audio = getSound();
	audio.play();
});

Po prostu za każdym razem kiedy zostanie kliknięty przycisk, tworzymy nową instancję obiektu Audio. Dzięki czemu nie musimy czekać na zakończenie odtwarzania poprzedniej instancji dźwięku.