Html 5 - Play Tiny Mp3 "inline"

I want to play a mp3 using HTML 5 audio support. I was trying to use an audio tag but now I am doing it using javascript. My 'Player' will be just a tiny Play image, that when is p

Solution 1:

Trying listening for the canplay event before attempting to play the mp3. Here's an example of how to do that:

functionplaymp3(url){
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', url);
    audioElement.load();
    audioElement.addEventListener("canplay", function() {
        audioElement.play();
    });
}

The canplay event is fired when the browser can start playing the mp3, but it doesn't guarantee that it can play the mp3 to completion. If that doesn't suite your purposes, there are a couple of other related events that you can listen to such as loadeddata and canplaythrough.