Maak je gebruik van onze radio app? Dan hebben we goed nieuws! Met de nieuwe gratis web player kunnen luisteraars nog eenvoudiger luisteren naar jouw radio-stream, direct vanuit de app. Dit is een extra optie binnen onze radio app oplossingen, zodat gebruikers zelf kiezen hoe ze luisteren.
Wil je een complete radio app laten maken? Bekijk dan onze oplossingen
Op deze pagina leggen we uit hoe je web player kunt installeren. Het gebruik van de web player is geheel vrijblijvend, maar zijn er wel een aantal zaken die je eerst moet instellen. Heb je enige kennis van HTML en CSS dan is dit niet lastig. Geen kennis? Lees dan snel verder; we leggen stap voor stap uit hoe je de web player kunt instellen en gebruiken.
Waarom een web player gebruiken?
Naast de native radio player functie willen we je graag een extra optie bieden om te kunnen luisteren naar jouw radiozender. Met de webplayer wordt de radiostream, net als op een website, rechtstreeks in de app (browser) afgespeeld.
De webplayer is dan ook zo ontworpen dat deze soepel en snel werkt. Dit zorgt voor een snelle en directe luisterervaring, uiteraard afhankelijk van je internetverbinding en de snelheid van de streamserver.
Met de web player maak je het voor je luisteraars nog makkelijker naar jouw radiostation te luisteren.
Web Player instellen: Stap voor stap uitleg
De web player is geen standaard functie van het app systeem, maar werkt in combinatie met de Source Code functie. In deze handige functie kun je namelijk HTML-code en scripts toevoegen, aanpassen en opslaan. Wij zorgen ervoor dat de web player inclusief de benodigde HTML-code voor je klaarstaat, of we sturen het HTML bestand naar je op per e-mail.
In de HTML-code staat alles wat je nodig hebt. Het enige wat je zelf hoeft te doen, is de streamlink, de kleuren en je logo aan te passen.
Stap 1: Logo uploaden
Gebruik je eigen gewenste logo, met voorkeur in png-formaat. Gebruik een transparante achtergrond (512 x 512 px). Plaats je logo op de achtergrond en zorg dat het logo in het midden staat en voldoende ruimte rondom heeft (zie afbeeldingen hierboven).
Sla het logo op als een png-bestand en upload het naar je WordPress-mediabibliotheek of webserver. Nadat je het bestand hebt geüpload, kopieer je de afbeeldings-URL. Deze link ziet er bijvoorbeeld zo uit: jouwwebsite.nl/wp-content/uploads/2024/12/jouw-logo.png (voorbeeldlink WordPress website).
Plaats deze link later in de HTML-code.
Stap 2: Verzamel de gewenste kleuren
Uiteraard wil je dat de kleur van de speler aansluit bij je logo. Als je de HEX-code (kleurcode) niet weet van je logo kun je de volgende website gebruiken: https://imagecolorpicker.com/nl
Je kunt hier je logo uploaden en eenvoudig je gewenste kleuren vinden. De verzamelde kleuren plaats je later als HEX-code in de HTML-code.
Stap 3: Plaats alle gegevens in de HTML-code
Je hebt nu de afbeeldings-URL en de HEX-codes. Het enige wat nu nog ontbreekt is de streamlink. Je kunt uiteraard dezelfde streamlink gebruiken als de native radio player of een van de streams die je gebruikt op je website.
Als alles compleet is kun je deze gegevens verwerken in de Source Code functie. In de HTML-code staat exact aangegeven wat je wel en niet mag aanpassen. Hiernaast staan er ook comments, hierdoor zie je gemakkelijk waar je alles kunt plaatsen.
Let op:
Dit HTML-bestand bevat naast HTML ook een stukje styling (CSS) en JavaScript. Verwijder daarom geen haakjes, dubbele punten of komma’s etc. Hierdoor kan het bestand namelijk corrupt raken en niet goed werken. Gaat het toch mis begin dan helemaal opnieuw of vraag om support.
Hoe plaats je links en kleurcodes in de Source Code functie?
In dit voorbeeld gebruiken we het logo uit het bovenstaand voorbeeld. Dit logo bestaat uit een rood icoon en zwarte text. Ik kies er in dit voorbeeld voor om een zwarte kleur te gebruiken voor de speler. Omdat je uiteraard meerdere tinten in zwart hebt is het hierdoor handig om een HEX-code te gebruiken.
Op de voorbeeld website waar je kleuren kunt uitkiezen laden we het logo in. Door met de color picker via de muis over de afbeelding te hoveren kan ik de kleur van de tekst kiezen en vastleggen. De zwarte tekstkleur heeft de HEX-code #1e1c1c.
In de source code functie plaatsen we nu de volgende verzamelde links en kleurcode(s):
- audio: “https://mscp.mijn-stream.nl:1234/radiostation192”
- cover: “https://jouwwebsite.nl/wp-content/uploads/2024/12/jouw-logo.png”
- background: “#1e1c1” (style player)
Hiernaast kun je ook de volgende items aanpassen:
- <title>Your Radio Station</title>
- artist: “Your Radio Station”
Wil je meerdere kleurcombinaties dan kun je eventueel de overige kleuren aanpassen naar wens. Heb je alles aangepast, sla dan alles op en laad de speler in de app om te testen.
Kom je er toch niet helemaal uit, stuur dan de verzamelde links en kleurcodes naar ons toe per e-mail, dan plaatsen we deze direct voor je in je radio app.