Créer des lecteurs personnalisés à l’aide du kit de création de lecteur DIY. Notre API de lecteur vous permet de concevoir des designs uniques prêts à l’emploi pour des lecteurs entièrement sur mesure.
Le kit de création de lecteur DIY est destiné aux personnes familiarisées avec le développement web et est fourni « tel quel ». La couverture du support Radio.co est limitée.
Pour une liste complète des outils, reportez-vous à la documentation de l’API Radio.co.
Code Head & Body
Collez le code suivant entre les balises de votre page web.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://public.radio.co/playerapi/jquery.radiocoplayer.min.js"></script>
Collez le code suivant juste après la balise de fermeture de votre page web.
<script>$('.radioplayer').radiocoPlayer();</script>
Élément du lecteur
Définissez l’emplacement où vous souhaitez que le lecteur apparaisse, en collant ce qui suit.
<div class="radioplayer" data-src="<em><strong>https://streaming.radio.co/your_station/listen</strong></em>" data-autoplay="false" data-playbutton="true" data-volumeslider="true" data-elapsedtime="true" data-nowplaying="true" data-showplayer="true" data-volume="50" data-showartwork="false"></div>
Modifiez les options qui sont préfixées par data-. Il existe des options prédéfinies que notre lecteur par défaut affichera, mais pour une liste complète des options, faites défiler vers le bas.
Exemples de lecteurs fonctionnels
Pour avoir une idée du fonctionnement des lecteurs, téléchargez nos exemples de démonstration.
Il existe plusieurs façons d’utiliser notre API de lecteur, alors inspirez-vous des exemples fonctionnels. N’hésitez pas à les modifier et à les utiliser dans vos propres projets.
Options du lecteur
Les options sont des fonctionnalités qui contrôlent le fonctionnement et l’apparence des lecteurs.
URL du flux d’écoute Radio.co requise pour configurer le lecteur.
Démarrer automatiquement la lecture du flux lorsque la page se charge.
data-autoplay="true|false"
Afficher un bouton lecture et pause sur la page.
data-playbutton="true|false"
Afficher le curseur de volume sur la page.
data-volumeslider="true|false"
Afficher les informations « en cours de lecture » de la station.
data-nowplaying="true|false"
Afficher le temps total écoulé du flux en cours sur la page.
data-elapsedtime="true|false"
Afficher ou masquer le lecteur radio sur la page, à utiliser conjointement avec l’affichage de certains éléments uniquement.
data-showplayer="true|false"
Définir le volume initial du flux au chargement de la page, nécessite un nombre compris entre 1 et 100.
data-volume="0-100"
Afficher uniquement la pochette du titre actuellement diffusé (à utiliser avec data-showplayer='false').
data-showartwork="true|false"
Modifie l’image carrée du lecteur par une source d’image personnalisée.
data-image="path/to/image.jpg"
Définit une image d’arrière-plan personnalisée derrière le lecteur.
data-bg="path/to/image.jpg"
Définir le volume initial du flux au chargement de la page, nécessite un nombre compris entre 1 et 100.
data-volume="0-100"
Méthodes
Les méthodes permettent un contrôle plus avancé des fonctionnalités et des mécanismes d’événements de votre lecteur.
Charger la source du flux dans le lecteur.
load(callback)
Lire le flux.
play(callback)
Mettre le flux en pause.
pause(callback)
Si la radio est en cours de lecture, cette méthode la mettra en pause et inversement.
playToggle(playCallback, pauseCallback)
Écouter les événements du lecteur Radio.co et exécuter une fonction de rappel.
event(event, callback)
Retourner le temps écoulé, ajoutez true au paramètre pour formater le temps retourné.
getTime(isFormatted)
0 → Aucune information sur l’état.
1 → Les métadonnées du flux sont prêtes.
2 → Les données de la position de lecture actuelle sont disponibles mais insuffisantes pour lire.
3 → Les données pour la lecture actuelle et au moins le paquet suivant sont disponibles.
4 → Assez de données disponibles pour démarrer la lecture.
getStreamState()
Obtenir la pochette du titre en cours de lecture avec une dimension et une qualité spécifiques.
getArtwork(width, height, callback, resolution)
Si aucun paramètre n’est présent, cela retournera le volume du lecteur ; s’il y en a un, cela définira le volume. 0 (muet) - 100 (max).
volume(volume)
Couper immédiatement le volume du flux.
mute()
Retourne un booléen indiquant si le flux est actuellement en cours de lecture ou non.
isPlaying()
Écouter les événements déclenchés par le lecteur et exécuter une fonction de rappel lorsque l’événement se produit.
event(event, callback)
Retourner true ou false selon que la station a déjà été chargée précédemment.
hasLoaded()
Événements
Les événements peuvent être interceptés à l’aide de player.event('event_name', callback) afin d’exécuter le callback lorsque l’événement est déclenché.
Lorsque l’audio a été chargé avec succès dans le lecteur.
audioLoaded
Déclenché chaque seconde écoulée pendant l’écoute du flux.
timeChanged
Lorsque l’utilisateur lance la lecture du flux.
audioPlay
Lorsque l’utilisateur met le flux en pause.
audioPause
Source de flux non valide.
invalidStream
Le titre actuellement diffusé a changé sur la station.
songChanged
Aucune information de flux n’a été reçue.
streamInfoError
Exemple fonctionnel
Utilisez ce qui suit comme exemple fonctionnel pour montrer comment un lecteur pourrait fonctionner pour vous.
var player = $('.radioplayer').radiocoplayer(); player.event('audioPlay', function(event){ //effectuer une action lorsque l’audio est lancé ici });