Safari canPlayType() marks .ogg as "probably" & HTML5 <audio><source> does not play

Question

I want to create a html5 audioplayer for my band's website.

The audiofiles are stored in the database as mp3, ogg and wav files to support all major browsers on their current versions.

First, all audiofileversions for one audiofile are loaded into the html:

<audio class="song-preview" preload="none">
    <source type="audio/ogg" src="/preview/trees/trees/OG/DT/OGG"></source>
    <source type="audio/mpeg" src="/preview/trees/trees/OG/DT/MP3"></source>
    <source type="audio/wav" src="/preview/trees/trees/OG/DT/WAV"></source>
</audio>

Method I: Javascript checks with audio.canPlayType(type) for browser support and removes all unsupported <source> elements and adds a "probably" source to the <audio>'s src attribute.

Example I: (not working on my iphone).

Problem I: Nested <source> elements in an <audio> element doesn't work well. (Altough Safari normally plays a given mp3 from an <audio>'s src, it does not if it is in the <source>'s src. Having big wav files in the sources prevents mobile devices from playing the audio, too.)

Method II: Javascript checks with audio.canPlayType(type) for browser support and adds the first "probably"-supported <source>'s src to the <audio>'s src attribute. After that all <source> elements are removes.

Example II: (I am no JS expert but jsbin seems not to handle canPlayType() properly).

Problem II: Safari classifys my ogg-files as "probably" and then does not play them.

Why is the audio from <source> elements not playing?
Any ideas on how to better check for audiotype browsersupport?
Is having the same src in the <audio> element and the <source> child normally working?

welcome to the weird world of html5 audio. this might help too. developer.mozilla.org/en-US/docs/Web/HTML/… — Emre Türkiş
should I write custom javascript for safari browsers, to exclude the OGG files? Or does this method not cover all major browsers? — GregorVolkmann
although a multi-<source> solution would give more flexibility — GregorVolkmann

GregorVolkmann GregorVolkmann · Accepted Answer · 2015-06-07T18:52:28

My working "solution" so far:

Detect safari on desktops, if true, remove all ogg sources.

var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);

if (isSafari) {
    $(this).children("source[type!='audio/mpeg']").remove();
}

code above found here

This solution is not recommended, since it depends on the send user-agent, which can be faked, etc.

Combined with the following code, the probably playable source file is merged into the src attribute of the audio element. This lets safari play your html audio properly:

$(this).children("source").each(function(){
    switch ($audio_preview[0].canPlayType($(this).attr("type"))) {
        case "":
            $(this).remove();
            break;
        case "maybe":
            $audio_preview.attr("src", $(this).attr("src"));
            break;
        case "probably":
            $audio_preview.attr("src", $(this).attr("src"));
            $audio_preview.children("source").remove();
            break;
        default:
            $audio_preview.attr("src", $(this).attr("src"));
    }
});

Safari canPlayType() marks .ogg as "probably" & HTML5 <audio><source> does not play

2 Answers