How to Detect HTML5 Audio Mp3 Support

How to detect HTML5 audio MP3 support?

You could either check the User-Agent and see what browser is being used or you could test support with Javascript.

var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));

I got the above code from this page.

return !!(a.canPlayType) is better because (some recent versions of)Firefox not supports mp3 and a.canPlayType('audio/mpeg;') will be false

HTML5 check if audio is playing?

function isPlaying(audelem) { return !audelem.paused; }

The Audio tag has a paused property. If it is not paused, then it's playing.

Is there a javascript way to check if a browser natively supports MP3?

var audio  = document.createElement("audio"),
canPlayMP3 = (typeof audio.canPlayType === "function" &&
              audio.canPlayType("audio/mpeg;codecs=mp3") !== "");

Edit:

If you don't want to use JavaScript (yes, this will work in browsers that support <audio> but not MP3), try this:

<audio controls="controls">
<source src="some-audio-file.mp3" type="audio/mpeg;codecs=mp3" />
<!-- if you have an Opus version, also include this:
<source src="some-audio-file.opus" type="audio/ogg;codecs=opus" />
-->
<!-- flash object goes here -->
</audio>

If you want auto-play, include an autoplay attribute on the audio element.

Detecting html5 audio support with Modernizr

Yes, through modernizr.audio. It supports a number of audio formats (currently ogg, mp3, m4a & wmv). Example:

var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
            Modernizr.audio.mp3 ? 'background.mp3' :
                                  'background.m4a';
audio.play();

More info in the documentation.

How can I tell if an HTML5 Audio element is playing with Javascript

function isPlaying(playerId) {
    var player = document.getElementById(playerId);
    return !player.paused && !player.ended && 0 < player.currentTime;
}

Check if audio is playing without HTML5 tag

This should work:

var sound = new Audio('https://mfaucet.com/images/notification2.mp3');
function play(sound) {  if(!sound.paused) sound.pause();  sound.currentTime = 0;  sound.play();}

<button onclick="play(sound)">Play</button>Press two times

How to check if HTML5 audio has reached different errors

1. Specifically, if one of the requests for audio fails and buffering stops, is there a way to detect that state?

Yes, there is few ways to do this! But if you want to catch the error type you can attach the error event listener to the sources:

$('audio').addEventListener('error', function failed(e) {
   // audio playback failed - show a message saying why
   // to get the source of the audio element use $(this).src
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('You aborted the video playback.');
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('A network error caused the audio download to fail.');
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('The audio playback was aborted due to a corruption problem or because the video used features your browser did not support.');
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('The video audio not be loaded, either because the server or network failed or because the format is not supported.');
       break;
     default:
       alert('An unknown error occurred.');
       break;
   }
 }, true);

2. Could you then point it to another source?

Inside the error handler function you can change the source using the src property of the audio element:

var audio = $(this);
audio.src = "new-audio-file.mp3";
audio.load();

Another option is to add multiple source to the same audio tag using this syntax:

<audio>
    <source id="audio_player_ogv" src="test.ogv" type="audio/ogg" />
    //In case that you can't load the ogv file it will try to load test.mp3
    <source id="audio_player_mp3" src="test.mp3" type="audio/mpeg" />
</audio>

3. About manage multiple audio files

I would suggest to use a plugin if you are thinking to manage 206 audio files. I have been using SoundManager2 for a while and it's very good!

Detecting HTML5 audio element file not found error

You actually need to bind to the source tag for listening to error event when willing to detect "file not found error". Have a look at this fiddle.

HTML:

<p id="player1">Non existent audio files - click to play</p>

<audio preload="none" controls>
    <source id="wav" src="http://example.com/non-existant.wav" />
    <source id="mp3" src="http://example.com/non-existant.mp3" />
    <source id="ogg" src="http://example.com/non-existant.ogg" />
</audio>

Script:

$("#player1").on("click", function () {
    //I've tried catching the error like this - no effect
    alert("Trying to play file.");
    try {
        $('audio')[0].play();
    } catch (e) {
        alert("Error playing file!");
    }
});

$("audio").on("error", function (e) {
        alert("Error at audio tag level!");
    });

// try this then
$("#wav").on("error", function (e) {
        alert("Error with wav file!");
    });
$("#mp3").on("error", function (e) {
        alert("Error with mp3 file!");
    });
$("#ogg").on("error", function (e) {
        alert("Error with ogg file!");
    });

It is described in this MDN article - section error handling.
Let me know if it works for you.

---

Related Topics