Ipad

I ett projekt vi jobbat med den senaste tiden behövde vi utveckla funktioner för att spela ljud. I det här projektet var det också viktigt att allt fungerade även på surfplattor, speciellt iPad. Inga problem tänkte jag, safari har bra stöd för HTML5 och audio-elementet, men det visade sig finnas begränsningar som kan vara bra att känna till innan.

Begränsningar i ljud-api:et i Safari för iOS är: Ingen kontroll över volymen, ingen förladdning av ljud utan användarens interaktion och bara ett ljud kan spelas åt gången. Ganska självklara saker för en apparat som är tänkt att användas över modilnätet kanske man kan tycka, men jag hade då inte tänkt på det.

I just det här projektet ville jag växla mellan två ljudspår när användaren tryckte på en knapp, och det var viktigt att de två ljudspåren var synkroniserade, alltså att om du växlade från spår 1 vid tid 23s så skulle spår 2 börja spelas från 23s och framåt. Dett var väldigt enkelt att lösa för desktop-browswers. Bara att börja spela två spår samtidigt och höja och sänka volymen beroende på vilket spår som var aktivt. Detta fungerade utmärkt och jag trodde allt var klart… till jag testade på iPaden.

I iOS kunde jag varken spela två ljudklipp samtidigt eller individuellt sätta volymen på klippen. Problemet med att spela två ljud samtidigt går att lösa med att ha dem i egna iframes, men det kändes som en osäker lösning och tog mig ändå inte hela vägen.

Jag höll nästan på att ge upp när Erik hittade en artikel om audio sprites Jag hade redan googlat (många, många gånger) själv, men lyckades inte hitta rätt. Tanken är analog med bild sprites. För att slippa ladda flera små ljudklipp slår man ihop det till ett långt och håller koll på var varje del börjar och slutar.

Lösningen blev alltså att först ladda in ett stort klipp med båda ljuden efter varandra (man kommer inte runt att användaren måste klicka på en knapp på sidan för att klippet skall laddas, detta gäller dock bara iOS). För att sedan växla mellan klippen behöver man bara hoppa till rätt timestamp i det kombinerade klippet.

Vill också passa på att tipsa om SoundManager2 Ett javascript/flash-bibliotek som ger ett samlat api för ljud på webben, oavsett om du använder HTML5- eller flash-backend.