Tengo varias etiquetas de video dentro de una etiqueta a-href. Cuando el usuario hace clic en un href, me gustaría activar un clip de audio antes de ser redirigido a otra página de destino. Actualmente solo funciona para una función a la vez (el audio que se está reproduciendo) y me gustaría que funcionara para todas ellas.

Aquí está mi código:

HTML:

 <a href="https://www.google.com/" id="h-link" class="h-swoosh"> <video id="h-video" width="320" height="240" autoplay loop> <source src="../static/h.mp4" type="video/mp4"> </video> </a> <audio id="h-sound"> <source src="../static/h.mp3" type="audio/mpeg"> </audio> <a href="https://www.google.com/" id="s-link" class="s-swoosh"> <video id="s-video" width="320" height="240" autoplay loop> <source src="../static/s.mp4" type="video/mp4"> </video> </a> <audio id="s-sound"> <source src="../static/s.mp3" type="audio/mpeg"> </audio>

JS:

 hSound(); sSound(); function hSound() { var links = document.getElementsByClassName('h-swoosh'), audio = document.getElementById('h-sound'), clickHandler = function(event) { var href = this.href; // cache href here event.preventDefault(); event.stopPropagation(); audio.play(); audio.addEventListener('ended', function(){ window.location = href; // use cached href here }) }; for (var i in links) { links[i].addEventListener('click', clickHandler, true, true); } }; function sSound() { var links = document.getElementsByClassName('s-swoosh'), audio = document.getElementById('s-sound'), clickHandler = function(event) { var href = this.href; // cache href here event.preventDefault(); event.stopPropagation(); audio.play(); audio.addEventListener('ended', function(){ window.location = href; // use cached href here }) }; for (var i in links) { links[i].addEventListener('click', clickHandler, true, true); } };

Cualquier ayuda sería inmensamente apreciada.