I have several video tags wrapped inside of a a-href tag. When the user clicks on the a href, I would like that to trigger an audio clip before being redirected to another landing page. Currently it only works for one function at a time (audio being played) and I would like it to work for all of them.

Here is my code:

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);
}

};

Any help would be immensely appreciated.