HTML5 Shoutcast player

[Varienaja]

Voor een hobbyproject heb ik een Shoutcast-server geprogrammeerd. Voorheen speelde ik de stream af met een fat-client (Winamp, VLC, ...) Maar sinds VLC geen shoutcast meer speelt out-of-the box, heb ik een Java-applet gemaakt die de shoutcast-stream kan afspelen. Dit stukje Java speelt de stream af over de geluidskaart, extraheert metadata uit de stream, en geeft dit in het browservenster weer, evenals een plaatje van het huidige liedje (à la Soundcloud).

Nu is er een hoop gedoe met Java-Applets de laatste tijd. En bovendien zijn applets sowieso een verouderde technologie. Soundcloud gebruikt flash, zover ik weet. Flash programmeren heb ik nog nooit gedaan. Ik heb eens de ontwikkelstudio geïnstalleerd, en was er danig van geïntimideerd. Ik zou deze funtionaliteit dus graag met html-5 willen vormgeven.

Wat ik van jullie graag wil weten: is het uberhaupt mogelijk om met de html-5 audio-tag een shoutcast-stream (= een mp3-stream met elke x bytes metadata) af te spelen? En kan ik dan met javascript op de één of andere manier de metadata uit die stream extraheren? Heeft iemand voor mij de juiste sleutelwoorden, of wellicht een voorbeeld site, waar ik de kunst kan afkijken? Mijn hobbyproject is opensource, dus een eventuele oplossing voor mijn probleem komt automatisch tot ieders beschikking.

[johanmulder]

Het is tot op heden nog niet mogelijk om met de standaard HTML5 audio-tag streaming audio te verwerken.
Mocht je voor een quick-win willen gaan zou ik gaan kijken naar de al bestaande players die met Flash je in staat stellen om wel streaming audio aan te bieden op je webpagina.

Wat ik al wel heb gezien zijn een aantal experimenten om met data-URI's audio m.b.v. JavaScript te genereren en af te spelen. Wellicht is het mogelijk om dit in combinatie met AJAX en een buffer/timeframe mechanisme in te zetten om streaming data in te lezen en client-side af te spelen?

[Varienaja]

Ik heb het nu werkend. De grap is, dat Shoutcast alleen metadata uitgeeft als de client daarom vraagt. De html5-player van Safari doet dat niet, dus is de shoutcast-stream vanzelf een doodnormale mp3-stream.

Het probleem dat dan overblijft, is dat ik client-side niet weet welk liedje ik speel. Dit los ik op door in javascript aan de server te vragen wat momenteel gestreamed wordt. Tevens vertelt me de server op hoeveel milliseconden (x) in de stream het huidige liedje begon.

Daarmee kan ik client-side in javascript van het huidige liedje bepalen hoeveel seconden al gespeeld zijn. (Totale streamlengte min het aantal milliseconden x.)

Zodoende heb ik min of meer alle functionaliteit weer draaiend, maar nu in html5. Het enige stomme dat ik nog moet op zien te lossen, is dat het html5-player in Safari de stream 3x opent. De eerste 2x laadt hij slechts een paar millisekonden muziek, ik vermoed dat hij daarmee checkt of de gestreamede resource een stream (1e paar ms verschillende van de 2e paar ms) danwel een vaste source (2x hetzelfde gedownload). In het geval van een stream moet namelijk seeking uitgeschakeld worden.

Sources voor de geïnteresseerde zijn hier te vinden: http://musicontroller.cvs...viewvc/musicontroller/mc/