Métadonnées webradio : afficher titre, artiste et émission

Webradios et métadonnées : afficher le titre, l’artiste et l’émission en cours

Les métadonnées d’une webradio indiquent ce qui est diffusé en direct : titre du morceau, artiste, émission, animateur, album, nom de la radio ou informations complémentaires.

Pour l’auditeur, c’est simple : le lecteur affiche “David Bowie – Heroes” au lieu d’un flux anonyme du type stream.mp3.

Pour la radio, c’est beaucoup plus stratégique. Les métadonnées améliorent l’expérience d’écoute, alimentent les players web, facilitent l’archivage, aident certains annuaires radio et permettent d’afficher automatiquement le “titre en cours” sur un site WordPress.

À l’époque, on parlait surtout de Winamp, Oddcast, DSP et Shoutcast. Aujourd’hui, on parle plutôt d’Icecast, Shoutcast, Liquidsoap, Mixxx, BUTT, SAM Broadcaster, AzuraCast, lecteurs HTML5 et APIs de statut.

Définition simple des métadonnées audio

Les métadonnées sont des données qui décrivent un contenu audio.

Dans un fichier musical, elles peuvent contenir :

• le titre ;
• l’artiste ;
• l’album ;
• l’année ;
• le genre ;
• le numéro de piste ;
• la pochette ;
• des commentaires.

Dans une webradio, elles servent surtout à mettre à jour l’information affichée pendant la diffusion. Quand le morceau change, le lecteur reçoit une nouvelle information et affiche le nouveau titre.

La logique est donc différente d’un fichier MP3 local. Sur une webradio, les métadonnées doivent évoluer pendant que le flux continue.

Métadonnées de fichier et métadonnées de flux

Il faut distinguer deux choses.

Type	Exemple	Usage
Métadonnées de fichier	ID3 dans un fichier MP3	Décrire un morceau stocké localement
Métadonnées de flux	StreamTitle='Artist - Title';	Afficher le morceau en cours sur une webradio
Métadonnées serveur	Nom de radio, genre, description	Décrire le flux ou la station
Métadonnées applicatives	Émission, animateur, planning	Alimenter un site ou une app radio

Un fichier bien tagué aide votre logiciel radio à envoyer les bonnes informations. Mais ce n’est pas suffisant. Il faut aussi que votre encodeur transmette ces informations au serveur de streaming.

Comment les métadonnées circulent dans une webradio

Dans une architecture classique, le chemin ressemble à ceci :

logiciel radio → encodeur → serveur Icecast/Shoutcast → lecteur de l’auditeur

Le logiciel radio lit le fichier et connaît le titre. L’encodeur envoie l’audio et les métadonnées. Le serveur reçoit le flux, puis le redistribue aux auditeurs. Le lecteur affiche enfin les informations disponibles.

Sur une installation moderne, les métadonnées peuvent venir de plusieurs sources :

• des tags ID3 dans les fichiers MP3 ;
• de la bibliothèque musicale de Mixxx, SAM Broadcaster ou AzuraCast ;
• d’un script Liquidsoap ;
• d’un automate radio ;
• d’une requête HTTP envoyée au serveur Icecast ;
• d’une API interne qui publie le programme en cours.

Le format ICY metadata

Dans l’univers Shoutcast et Icecast, on rencontre souvent les métadonnées ICY.

Le champ le plus connu est StreamTitle. Il contient généralement l’artiste et le titre du morceau sous cette forme :

StreamTitle='David Bowie - Heroes';Code language: JavaScript (javascript)

Beaucoup de lecteurs attendent une chaîne simple du type :

Artiste - Titre

C’est sobre, compatible et lisible. Évitez les formats trop créatifs si votre priorité est l’affichage correct dans les lecteurs, applications et annuaires.

Icecast, Shoutcast et métadonnées : quelles différences ?

Icecast et Shoutcast savent tous les deux diffuser de l’audio et transmettre des informations de titre. Les détails changent selon le protocole, le format audio, l’encodeur et la version du serveur.

Serveur	Usage courant	Métadonnées
Icecast	Serveur libre, très utilisé avec MP3, Ogg, Opus	Statut JSON/XML, endpoint admin, métadonnées ICY selon les formats
Shoutcast	Serveur historique des webradios MP3	Métadonnées ICY, XML/JSON selon version et configuration
AzuraCast	Plateforme radio complète basée notamment sur Icecast	API moderne, now playing, historique, pochettes
Hébergeur radio	Service clé en main	API ou widgets fournis selon prestataire

Si vous créez une nouvelle webradio aujourd’hui, Icecast reste un excellent choix. Si vous voulez une interface complète avec AutoDJ, playlists, historique et API “Now Playing”, AzuraCast peut faire gagner beaucoup de temps.

Mettre à jour les métadonnées sous Icecast

Icecast permet de mettre à jour les métadonnées d’un mount point via son interface d’administration ou via une requête HTTP.

Exemple générique :

curl -u admin:motdepasse \
	"https://radio.example.com:8000/admin/metadata?mount=/live.mp3&mode=updinfo&song=David%20Bowie%20-%20Heroes"Code language: JavaScript (javascript)

Dans cet exemple :

• /live.mp3 est le point de montage ;
• mode=updinfo demande une mise à jour ;
• song=... contient le texte à afficher ;
• l’authentification doit correspondre aux droits configurés côté Icecast.

Dans une vraie installation, ne stockez pas le mot de passe admin dans un script accessible publiquement. Utilisez un compte limité quand c’est possible, protégez vos scripts et évitez de publier vos URLs d’administration.

Mettre à jour les métadonnées avec Liquidsoap

Liquidsoap est souvent utilisé pour automatiser une webradio. Il peut générer et envoyer les métadonnées au serveur.

La convention la plus compatible consiste à produire une valeur song qui combine l’artiste et le titre :

$(artist) - $(title)Code language: JavaScript (javascript)

Si un seul champ est disponible, mieux vaut afficher une information partielle plutôt que rien du tout. Par exemple, un titre sans artiste reste plus utile qu’un lecteur vide.

Liquidsoap peut aussi mettre à jour les métadonnées manuellement via sa fonction icy.update_metadata, utile pour des cas particuliers : émission spéciale, titre externe, relais live ou changement d’animateur.

Mettre à jour les métadonnées avec Mixxx, BUTT ou SAM Broadcaster

La plupart des encodeurs et logiciels radio modernes savent envoyer les métadonnées automatiquement.

Logiciel	Usage	Métadonnées
Mixxx	Mix live DJ	Envoi du titre en cours selon la bibliothèque et les réglages broadcast
BUTT	Encodeur simple	Peut envoyer des informations de stream selon configuration
SAM Broadcaster	Radio automatisée	Métadonnées depuis la bibliothèque, la playlist et les règles internes
VirtualDJ	Live DJ	Envoi possible vers Icecast/Shoutcast selon licence et configuration
AzuraCast	Plateforme complète	API Now Playing, historique, pochettes, AutoDJ

Si les titres ne s’affichent pas, vérifiez toujours trois niveaux : les tags du fichier, les réglages de l’encodeur et la réception côté serveur.

Pour un flux géré avec SAM Broadcaster, vous pouvez aussi lire le guide sur la création d’une webradio avec SAM Broadcaster et Icecast.

Afficher “Now Playing” sur un site web

Un lecteur HTML5 peut lire un flux audio, mais il ne donne pas toujours accès aux métadonnées ICY en JavaScript.

Ce code suffit pour écouter un flux :

<audio controls preload="none">
	<source src="https://radio.example.com/live.mp3" type="audio/mpeg">
	Votre navigateur ne supporte pas le lecteur audio HTML5.
</audio>Code language: HTML, XML (xml)

Mais il ne suffit pas toujours pour afficher le titre en cours.

Pour afficher les métadonnées sur un site, utilisez plutôt l’une de ces méthodes :

• interroger le statut JSON d’Icecast ;
• utiliser l’API de votre hébergeur radio ;
• utiliser l’API “Now Playing” d’AzuraCast ;
• utiliser une bibliothèque spécialisée comme icecast-metadata-js ;
• publier les titres depuis votre automate radio vers votre site.

Lire les métadonnées depuis le statut JSON Icecast

Sur une installation Icecast moderne, l’interface de statut peut exposer un endpoint JSON, souvent sous cette forme :

https://radio.example.com/status-json.xslCode language: JavaScript (javascript)

La structure exacte dépend de la version et de la configuration. Elle peut contenir un objet unique ou une liste de sources si plusieurs flux sont actifs.

Exemple JavaScript simple, côté navigateur :

<div class="radio-now-playing" data-status-url="https://radio.example.com/status-json.xsl">
	<strong>En direct :</strong>
	<span data-radio-title>Chargement…</span>
</div>

<script>
(() => {
	const widget = document.querySelector('.radio-now-playing');

	if (!widget) {
		return;
	}

	const statusUrl = widget.dataset.statusUrl;
	const titleTarget = widget.querySelector('[data-radio-title]');

	if (!statusUrl || !titleTarget) {
		return;
	}

	const normaliseSource = (source) => {
		if (Array.isArray(source)) {
			return source.find((item) => item.listenurl && item.title) || source[0] || null;
		}

		return source || null;
	};

	const updateTitle = async () => {
		try {
			const response = await fetch(statusUrl, {
				cache: 'no-store',
				credentials: 'omit',
			});

			if (!response.ok) {
				throw new Error(`HTTP ${response.status}`);
			}

			const data = await response.json();
			const source = normaliseSource(data?.icestats?.source);
			const title = source?.title || source?.yp_currently_playing || '';

			titleTarget.textContent = title || 'Titre indisponible';
		} catch (error) {
			titleTarget.textContent = 'Titre indisponible';
		}
	};

	updateTitle();
	window.setInterval(updateTitle, 15000);
})();
</script>Code language: HTML, XML (xml)

Cette méthode fonctionne bien si le serveur autorise les requêtes cross-origin. Sinon, le navigateur bloquera l’appel à cause de CORS.

Attention au CORS et au mixed content

Si votre site WordPress est en HTTPS mais que votre flux radio est en HTTP, les navigateurs peuvent bloquer certaines requêtes ou afficher des erreurs de contenu mixte.

La bonne solution consiste à servir le flux et l’API de statut en HTTPS.

Exemple propre :

https://radio.example.com/live.mp3
https://radio.example.com/status-json.xslCode language: JavaScript (javascript)

Évitez de mélanger un site HTTPS avec un flux HTTP quand vous pouvez faire autrement. Cela casse l’expérience, complique le JavaScript et donne une impression de bricolage.

Afficher les métadonnées dans WordPress

Dans WordPress, la solution propre consiste à créer un petit bloc HTML ou un shortcode qui interroge une API de statut.

Pour une intégration rapide dans l’éditeur, vous pouvez utiliser un bloc HTML personnalisé avec un lecteur et une zone “En direct”.

<div class="skyminds-radio-player" data-status-url="https://radio.example.com/status-json.xsl">
	<audio controls preload="none" style="width:100%;">
		<source src="https://radio.example.com/live.mp3" type="audio/mpeg">
		Votre navigateur ne supporte pas le lecteur audio HTML5.
	</audio>

	<p><strong>Titre en cours :</strong> <span data-radio-title>Chargement…</span></p>
</div>Code language: JavaScript (javascript)

Ensuite, chargez le JavaScript seulement sur la page qui affiche le player. Ne chargez pas un script radio sur tout le site si une seule page en a besoin.

Pour un site performant, évitez aussi d’appeler l’API toutes les secondes. Une fréquence de 10 à 20 secondes suffit généralement.

Pourquoi le titre ne s’affiche pas ?

Quand les métadonnées ne remontent pas, le problème peut venir de plusieurs endroits.

Symptôme	Cause probable	À vérifier
Le flux joue, mais aucun titre	L’encodeur n’envoie pas les métadonnées	Réglages broadcast du logiciel radio
Le titre est toujours le même	Le logiciel ne met pas à jour au changement de piste	Tags, bibliothèque, automation
Le titre apparaît dans Icecast mais pas sur le site	Problème CORS ou parsing JSON	Console navigateur, endpoint JSON
Les accents sont cassés	Problème d’encodage	UTF-8, configuration encodeur
La pochette ne s’affiche pas	ICY ne transporte pas forcément l’image	API enrichie, base musicale, service externe
Le titre arrive en retard	Buffer audio ou intervalle de polling	Latence serveur, lecteur, fréquence de mise à jour

Ne commencez pas par accuser le player web. Vérifiez d’abord que le serveur reçoit bien les bonnes métadonnées.

Tester les métadonnées d’un flux

Pour inspecter les headers d’un flux, vous pouvez commencer avec curl.

curl -I https://radio.example.com/live.mp3Code language: JavaScript (javascript)

Pour demander explicitement les métadonnées ICY :

curl -H "Icy-MetaData: 1" -I https://radio.example.com/live.mp3Code language: JavaScript (javascript)

Vous pouvez aussi tester le statut Icecast :

curl https://radio.example.com/status-json.xslCode language: JavaScript (javascript)

Si le JSON contient le bon titre, le serveur fait son travail. Si le site ne l’affiche pas, regardez plutôt côté JavaScript, CORS ou cache.

Format recommandé pour le titre en cours

Gardez un format simple et stable :

Artiste - Titre

Exemple :

Massive Attack - Teardrop

Évitez les titres trop longs avec dix séparateurs, trois emojis et une publicité. Certains players affichent peu de caractères, et les métadonnées doivent rester lisibles sur mobile.

Pour une émission parlée, vous pouvez utiliser :

Nom de l’émission - Animateur

Ou, si vous voulez afficher la radio en suffixe :

Artiste - Titre | Nom de la radio

Mais n’en faites pas trop. La métadonnée doit informer, pas devenir un panneau publicitaire clignotant.

Et les pochettes d’album ?

Les métadonnées ICY classiques ne suffisent pas toujours pour transmettre une pochette.

Pour afficher une image, utilisez plutôt une source enrichie :

• l’API d’AzuraCast ;
• la base musicale de votre automate radio ;
• une API interne qui associe titre, artiste et image ;
• un service externe de recherche de pochettes, avec cache local ;
• un fichier de programme publié par votre système radio.

Ne faites pas une recherche externe à chaque visiteur et à chaque rafraîchissement. Mettez en cache côté serveur. Sinon, votre joli player devient une machine à requêtes inutiles.

Métadonnées et droits musicaux

Les métadonnées ont aussi un rôle légal et éditorial.

Pour une radio musicale, il est important d’identifier correctement les titres diffusés. Selon votre pays, votre statut et les organismes concernés, ces informations peuvent servir aux déclarations, statistiques, rapports de diffusion ou historiques internes.

Même hors obligation formelle, des métadonnées propres montrent que votre radio est sérieuse. Un flux qui affiche “Unknown – Track 01” pendant trois heures ne respire pas exactement la précision suisse.

Bonnes pratiques pour une webradio

• Taguez correctement les fichiers avant diffusion.
• Utilisez un format stable : Artiste - Titre.
• Vérifiez l’encodage UTF-8 pour les accents.
• Testez le flux dans VLC, navigateur et mobile.
• Contrôlez le statut Icecast ou Shoutcast côté serveur.
• Servez le flux en HTTPS si le site est en HTTPS.
• Évitez de rafraîchir les métadonnées trop souvent côté web.
• Mettez en cache les pochettes et données enrichies.
• Prévoyez un texte de fallback si le titre est indisponible.
• Ne publiez jamais les identifiants admin du serveur radio.

Checklist de dépannage

• Le fichier audio possède-t-il bien un artiste et un titre ?
• Le logiciel radio lit-il ces tags correctement ?
• L’encodeur envoie-t-il les métadonnées au serveur ?
• Icecast ou Shoutcast affiche-t-il le bon titre dans son interface ?
• Le point de montage testé est-il le bon ?
• Le site interroge-t-il le bon endpoint JSON ou API ?
• Le navigateur bloque-t-il la requête à cause de CORS ?
• Le flux HTTP est-il appelé depuis une page HTTPS ?
• Les accents sont-ils encodés en UTF-8 ?
• Un cache serveur ou CDN renvoie-t-il une vieille réponse ?

Conclusion

Les métadonnées sont une petite partie technique de la webradio, mais elles changent beaucoup l’expérience d’écoute.

Elles permettent d’afficher le morceau en cours, d’alimenter un player web, d’améliorer une application mobile, de documenter la programmation et de donner une vraie identité au flux.

L’ancien monde Winamp, Oddcast et plugin DSP a largement laissé la place à Icecast, Shoutcast, Liquidsoap, Mixxx, SAM Broadcaster, AzuraCast et aux APIs modernes. Le principe reste le même : envoyer au bon moment une information simple, lisible et fiable.

Une webradio sans métadonnées fonctionne. Mais une webradio avec des métadonnées propres paraît tout de suite plus professionnelle. Et surtout, elle évite à l’auditeur de demander “c’est quoi ce morceau ?” toutes les trois minutes. Même si, parfois, c’est aussi comme ça qu’on lance une conversation.

Sources et documentation

• Icecast Docs : Admin Interface et metadata update
• Icecast Docs : fichier de configuration
• Liquidsoap Docs : ICY metadata
• icecast-metadata-js : lecture des métadonnées Icecast en JavaScript
• icecast-metadata-js : démos HTML et React
• SkyMinds : créer une webradio avec SAM Broadcaster et Icecast
• SkyMinds : ajouter un flux MP3 à votre radio Icecast
• SkyMinds : créer une webradio avec VirtualDJ

Report a typo