HTML 5 Audio-element för alla

Ett gammalt sätt att bestämma hur ljud ska spelas upp hade varit det dåliga sättet genom Browser Detection, där man tittar vilken webläsare som används och därifrån bestämma hur man hanterar ljudet som ska spelas upp. Problemet med denna lösning är att webläsare utvecklas hela tiden, så om man ser att webläsaren t.ex. är Google Chrome och sätter i logiken att man vet att den inte stödjer t.ex. audio via WAV-formatet så kanske detta inte fortfarande stämmer om några versioner.

Det moderna, rekommenderade sättet är att istället använda sig av Feature Detection. Det innebär att man istället för att se vilken webläsare som används istället frågar webläsaren om den stödjer viss funktionalitet.

Ett populärt ramverk för att detektera vilka funktioner relaterade till HTML 5 som en browser stödjer är Modernizr. Då kan man skriva följande kod i sitt JavaScript:

I fallet med audio-taggen så behöver vi bara veta om en enda funtionalitet och att använda sig av ett helt ramverk känns lite onödigt. Då kan man istället vända sig till en referens på hur man detekterar individuell funktionalitet för HTML 5.

För att se om audio-taggen stöds, dessutom med ljudformatet mp3 så användes följande kod:

Variabeln hasAudioMp3Support är en boolean som ärtrue om allt stöds som det ska i webläsaren. Detta kan sedan användas i Javascript-koden för att dela upp funktionalitet mellan webläsare som stödjer HTML 5 Audio och de som behöver t.ex. Flash för att spela upp ljud:

Sebastian Nilsson
2011-03-28