CODEWITHSUNDEEP
javascripthtmlsafarimobile-safarihtml5-audio
GregorVolkmann
GregorVolkmann

Reputation: 120

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

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.

Upvotes: 2

Views: 962

Answers (2)

Ronk
Ronk

Reputation: 225

Have you tried changing the file extensions? I have seen people having succes by keeping the minetype .ogg, but changing the extensions to .oga for audio and .ogv for video.

<audio class="song-preview" preload="none" id="NameOfSong">
    <source type="audio/ogg" src="/preview/trees/trees/OG/DT/OGa"></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>

Upvotes: 0

GregorVolkmann
GregorVolkmann

Reputation: 120

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

Upvotes: 0

Related Questions