Radiospeler werkt niet? Oplossingen voor stream, nummerweergave en autoplay

Een speler op je website die niet afspeelt, of wel speelt maar niet laat zien wat er op dat moment draait, heeft bijna altijd een van een handvol oorzaken. De meeste zitten tussen je streamserver en de browser, niet in de speler zelf, en elk probleem heeft een herkenbaar symptoom.

Plak eerst je stream-URL in de tester hieronder. Die vertelt je of de URL audio teruggeeft, in welk formaat, of hij via HTTPS loopt en of er now-playing-informatie is gevonden. Zoek daarna je symptoom op in de tabel en ga naar het juiste onderdeel.

Symptoom, oorzaak, oplossing

De stream speelt niet af

De URL is een webpagina, geen stream

De meest gemaakte fout. Streamhosts geven je meerdere URL's: een openbare luisterpagina, een playlistbestand (.pls of .m3u), een statuspagina en de eigenlijke audiostream. Alleen die laatste speelt af in een websitespeler.

Wat een URL teruggeeft, controleer je met curl. Dat staat op elke Mac en Linux-computer en op Windows 10 en nieuwer:

curl -I https://stream.example.com/live

Kijk naar de regel Content-Type. audio/mpeg (MP3), audio/aac of audio/aacp (AAC) en application/vnd.apple.mpegurl of application/x-mpegURL (HLS) zijn audio. text/html is een webpagina. audio/x-scpls of audio/x-mpegurl is een playlistbestand: download het, open het in een teksteditor en gebruik de stream-URL die erin staat.

Sommige streamservers reageren niet goed op HEAD-verzoeken (-I). Krijg je een foutmelding, haal dan alleen de headers van een normaal verzoek op en stop na vijf seconden:

curl -s -D - -o /dev/null -m 5 https://stream.example.com/live

De time-outmelding aan het eind is normaal; het gaat om de headers erboven.

Een http://-stream op een https://-site

Draait je website op HTTPS (en dat hoort zo) en begint je stream-URL met http://, dan behandelt de browser de stream als gemengde inhoud (mixed content). Zo beschrijft MDN de regel: "<audio>/<video>/<img> HTTP requests on HTTPS pages are auto-upgraded to HTTPS (blocked if host is an IP address)^[1]".

De browser probeert dus stilletjes de HTTPS-versie van je stream-URL. Heeft je streamserver op dat adres geen HTTPS-aansluiting, of gebruikt de URL een IP-adres in plaats van een domeinnaam, dan mislukt de stream. Vanaf de website kun je dit niet oplossen. Vraag je streamhost om een HTTPS-stream-URL; de meeste hosts bieden die aan, soms op een andere poort of hostnaam.

Snelle check: verander http:// in je stream-URL in https:// en voer het curl -I-commando van hierboven uit. Mislukt dat, dan moet je host je het HTTPS-adres geven.

De codec wordt niet ondersteund

MP3 en AAC spelen af in alle actuele grote browsers, op desktop en mobiel. Andere formaten, zoals Ogg Vorbis-, Opus- of FLAC-streams, worden niet door elke browser afgespeeld; meestal zijn de browsers van Apple de uitzondering. Speelt je stream in de ene browser wel en in de andere niet, controleer dan de Content-Type en vraag je host, als het geen MP3 of AAC is, om een extra MP3- of AAC-mount, of stel die in je encoder in.

Geen titel of artiest

Speelt de audio zonder titel, dan kan de speler niet bij je now-playing-gegevens. Die gegevens komen in de meeste setups niet uit de audio zelf, maar van een statusendpoint op je streamserver of bij je host, dat de speler (of het platform erachter) om de paar seconden uitleest. Waar dat endpoint zit, hangt af van je host:

Je kunt elke bron zelf controleren. Bij Icecast open je het adres van je server met /status-json.xsl erachter en zoek je naar een title-veld voor je mount:

curl -s https://stream.example.com/status-json.xsl

Of er titels in de stream worden meegestuurd, zie je door ICY-metadata op te vragen en te zoeken naar een icy-metaint-header:

curl -s -H "Icy-MetaData: 1" -D - -o /dev/null -m 5 https://stream.example.com/live | grep -i icy

Geen icy-metaint en een lege titel in de status betekent meestal dat je encoder (BUTT, Mixxx, je playout-software) geen tracktitels verstuurt. Zet in de instellingen van je encoder de metadata of het versturen van nummertitels aan.

Een speler die alleen in de browser draait, heeft een extra hindernis: veel streamservers sturen niet de CORS-headers mee die een browser nodig heeft om hun statuspagina's vanaf een andere website te lezen. Het verzoek wordt dan geblokkeerd, ook al zijn de gegevens er wel. Daarom halen de meeste spelers hun now-playing-gegevens op via hun eigen server.

Bij RadioSiteMaker herkent de speler de gangbare hosts (Icecast, SHOUTcast, AzuraCast, Radio.co, RadioKing, Live365, laut.fm, Centova Cast, Caster.fm, RadioHost en andere) en leest hij hun statusendpoints aan de serverkant uit, met de ICY-titels in de stream als terugvaloptie. Wordt je host niet herkend, of wil je een specifieke feed gebruiken, plak het adres dan in je dashboard bij Settings → Now Playing URL en druk op de testknop naast je streaminstellingen. Werkt die URL niet, dan leest de site de titels uit de stream en laat je dat weten.

De speler start niet automatisch

Dit is geen storing. Het autoplaybeleid van Chrome: Muted autoplay always allowed; with sound only after user interaction, MEI threshold (desktop), or installed PWA^[6]. Safari en Firefox hanteren vergelijkbare regels. Een radiostream is audio met geluid, dus hij start wanneer de luisteraar op afspelen drukt.

Geen enkele website kan dit omzeilen. Spelers die automatisch lijken te starten, staan op stil of profiteren ervan dat de bezoeker al eerder iets op de site heeft gedaan. Houd er in je ontwerp rekening mee: één grote, duidelijke afspeelknop bovenaan, op elke pagina.

Audio stopt bij het wisselen van pagina

Op een gewone website laadt een klik op een link een nieuwe pagina, en de browser gooit de oude weg, inclusief de audiospeler. Ingesloten spelers en widgets leven binnen de pagina, dus die stoppen ook. Dat geldt voor de embed van je streamhost en ook voor onze eigen gratis now-playing-widget.

De oplossing is een speler die buiten de pagina-inhoud staat: de site laadt nieuwe pagina's in het bestaande document zonder volledig te herladen, zodat de speler gewoon doorgaat. Of je dat zelf voor elkaar krijgt in WordPress, hangt af van je thema en plug-ins; het vanaf nul bouwen is een flink project. Stationswebsites van RadioSiteMaker werken standaard zo. Meer mogelijkheden vind je in een livespeler toevoegen aan je website.

HLS-streams die alleen in Safari spelen

Safari speelt HLS (.m3u8) native af. Chrome, Firefox en Edge hebben op desktop een JavaScript-bibliotheek zoals hls.js nodig, die de playlist en de audiosegmenten downloadt met gewone webverzoeken. Die verzoeken vallen onder CORS: de HLS-host moet antwoorden met een Access-Control-Allow-Origin-header die jouw website toestaat.

Zo controleer je dat:

curl -s -D - -o /dev/null -H "Origin: https://www.yourstation.com" https://hls.example.com/live/playlist.m3u8 | grep -i access-control

Geen regel access-control-allow-origin betekent dat de host afspelen in de browser vanaf andere sites blokkeert. Vraag de host om CORS aan te zetten, of gebruik in plaats daarvan de MP3- of AAC-stream. De speler van RadioSiteMaker laadt hls.js automatisch voor HLS-streams, maar kan niet om een host heen die cross-origin-verzoeken blokkeert.

Afspelen stopt op de achtergrond op mobiel

Een website speelt audio af in de browser van de telefoon, en het besturingssysteem bepaalt hoe lang een browser op de achtergrond blijft draaien. Eerlijk gezegd, dit kan een website niet garanderen:

• Het afspelen kan doorgaan met een vergrendeld scherm of terwijl je een andere app gebruikt, maar het systeem kan de browser op elk moment pauzeren of stoppen, bijvoorbeeld om de batterij te sparen, in de energiebesparingsmodus of bij te weinig geheugen.
• Een telefoontje, een andere app die audio afspeelt of een meldingsgeluid kan het afspelen onderbreken, en de browser hervat het mogelijk niet vanzelf.
• Bediening op het vergrendelscherm en in het bedieningspaneel hangt voor een website af van de browser; beloof die niet aan je luisteraars.

Luistert een groot deel van je publiek op de achtergrond, dan is een eigen app de betrouwbaardere route. Lees een mobiele app voor je radiostation en de afwegingen in mobiele app versus website.

Veelgestelde vragen

Waarom speelt mijn stream wel in VLC, maar niet op mijn website?

VLC speelt bijna elk formaat af, via gewone HTTP, vanuit een playlistbestand of vanaf een IP-adres. Een browser op een HTTPS-website is strenger: die heeft de directe stream-URL nodig, via HTTPS, in een formaat dat hij ondersteunt (MP3, AAC of, buiten Safari met hls.js, HLS). Haal de URL door de streamtester om te zien wat daarvan ontbreekt.

Mijn stream-URL heeft een poortnummer zoals :8000. Is dat een probleem?

Op zich niet. Het probleem is meestal dat die poort alleen gewone HTTP levert. Vraag je host of er een HTTPS-adres is voor dezelfde stream; dat kan een andere poort gebruiken, zoals 8443, of een andere hostnaam.

Waar vind ik de echte URL van mijn stream?

In het dashboard van je streamhost, meestal onder "stream-URL", "mountpoint" of "directe link". Heb je alleen een .pls- of .m3u-link, download het bestand dan en open het in een teksteditor; de stream-URL staat erin. Controleer het resultaat met curl -I en kijk of je een audio-contenttype krijgt.

Waarom staan de titels wel in de speler van mijn host, maar niet in de mijne?

De speler van je host leest de eigen status-API vanaf het eigen domein en loopt daardoor niet tegen de CORS-beperking aan die jouw website wel raakt. Lees het statusendpoint uit via een server, gebruik een platform dat dat doet, of kijk of je host een openbare now-playing-API met CORS aanbiedt.

Kan ik mijn speler automatisch laten starten als de pagina laadt?

Niet met geluid. Browsers staan audio pas toe nadat de bezoeker iets op de pagina heeft gedaan, en geen enkele website-instelling kan dat omzeilen. Maak in plaats daarvan de afspeelknop goed zichtbaar.