Html5 Audio stop function

Efficient handling of multiple audio elements

When multiple audio elements are at play, repeat code can be mitigated by creating a function. Ladies and gentlemen, behold the code:

function stopAllAudiosInTheirTracks() {
  document.querySelectorAll('audio').forEach(function(audio) {
    audio.pause(); // "Just take a break!"
    audio.currentTime = 0; // "Back to the future!"
  });
}


This function eases the stoppage of all active audio elements in one fell swoop.

Singular control with unique IDs

Unique IDs offer singular control over each audio element. It's like giving your audio a personal butler!

<audio id="astley" src="rickroll.mp3"></audio>
<audio id="queen" src="bohemian.mp3"></audio>


To command a particular audio element, summon its butler:

function kindlyStopTheMusic(id) {
  var audio = document.getElementById(id);
  if (audio) {
    audio.pause(); // "Sir, your music has been paused!"
    audio.currentTime = 0; // "Shall I rewind it for you?"
  }
}


To then stop the music, simply call the function with the specific ID:

kindlyStopTheMusic('astley'); // Stops Rick Astley from never giving you up


Dynamically creating audio elements

Audio elements can be dynamically created with document.createElement("audio") that allows greater agility. More powerful than Thanos' snap!

function createAudioAndPlugIt(url) {
  var audio = new Audio(url);
  audio.pause(); // "Nope, you're not playing yet!"
  audio.currentTime = 0; // "Back to your cave!"
  return audio;
}


The function creates, stops, and returns a new audio element with a provided source.

Extending the Audio class for reusability

Good code is DRY (Don't Repeat Yourself). By extending the Audio class, we can build a custom stop function:

Audio.prototype.stop = function() {
  this.pause();
  this.currentTime = 0;
};


Just like magic:

var myAudio = new Audio('beethoven.mp3');
myAudio.stop(); // "Beethoven paused. May the silence be with you!"


Dealing with "canplaythrough" event oddities

Chrome can be a bit quirky with the "canplaythrough" event. Use a removal strategy for the event listener once it is no longer needed:

audioElement.addEventListener('canplaythrough', function() {
  // ... some cool audio code ...
  // "Once is fun, twice's a mess!" - Removing the event listener after its purpose.
  this.removeEventListener('canplaythrough', arguments.callee);
});


It's like Batman leaving when his work is done, neat, isn't it?

Cross-browser compatibility

Not all browsers play nice with code. Don't forget your HTML5 audio functions in Chrome and Firefox for cross-browser compatibility.

Beware of performance pitfalls and errors

A sleek performance comes from smart coding. Reset an audio through src rather than currentTime = 0:

audioElement.src = audioElement.src; // "Déjà vu! But this time, it's intentional."
audioElement.pause(); // "Let's take a short nap!"


Don't make your app the sloth of all apps! Keep it light and tight.

Abstain from setting src to an empty string. It's like creating a void that sucks up your peace (and causes errors)!