Configurateur de Lecteur Radio

Aperçu en Direct

Custom Player Loading...

Contenu

Apparence

#FFFFFF
#FFFFFF
#000000
#FFFFFF

Configuration Média

Code d'Intégration

Instructions d'installation

Les deux codes ci-dessous sont nécessaires pour que le lecteur fonctionne correctement sur votre site web :

  1. Ajoutez le code HTML où vous voulez que le lecteur apparaisse
  2. Ajoutez le code JavaScript avant la balise </body> de votre page
Étape 1: Code HTML (Placez où vous voulez le lecteur)
<div id="customWebPlayer" playerTitle="Custom Radio Player" playerTitleColor="#FFFFFF" playerSlogan="Radio Player" playerSloganColor="#FFFFFF" playerBGColor="#000000" audioSrc="https://nap.casthost.net/proxy/casthost/stream" coverImageSrc="https://www.casthost.net/images/172407545766c34dc1aeef3.jpg" buttonColors="#FFFFFF"> ...</div>
Étape 2: Code JavaScript (Placez avant </body>)
<script language="javascript" type="text/javascript" src="https://www.casthost.net/publicCustomPlayer.js"></script>
Exemple Complet (Fichier HTML complet)
<!DOCTYPE html>
<html>
<head>
    <title>My Website with Radio Player</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    
    <!-- Step 1: Place the radio player here -->
    <div id="customWebPlayer" playerTitle="${playerTitle}" playerTitleColor="${playerTitleColor}" playerSlogan="${playerSlogan}" playerSloganColor="${playerSloganColor}" playerBGColor="${playerBGColor}" audioSrc="${audioSrc}" coverImageSrc="${coverImageSrc}" buttonColors="${buttonColors}">
        Custom Player Loading...
    </div>
    
    <p>Other content on your page...</p>
    
    <!-- Step 2: Add this script before closing body tag -->
    <script language="javascript" type="text/javascript" src="https://www.casthost.net/publicCustomPlayer.js"></script>
</body>
</html>

À propos du lecteur radio web CastHost

Le lecteur radio web CastHost est une solution moderne, responsive et hautement personnalisable pour intégrer la diffusion audio en continu sur n'importe quel site web. Grâce à son widget facile à utiliser, vous pouvez offrir à vos visiteurs une expérience d'écoute professionnelle, adaptée à votre marque et à vos besoins techniques. Compatible avec tous les navigateurs modernes et optimisé pour les appareils mobiles, ce lecteur radio s'intègre parfaitement à votre site, que vous soyez une station de radio, un podcasteur ou un créateur de contenu audio.

Outil gratuit : Ce configurateur de lecteur radio est entièrement gratuit et conçu pour vous aider à améliorer le référencement (SEO) de votre site web.

Personnalisation avancée : Attributs du widget expliqués

  • playerTitle: Le titre principal affiché sur le lecteur. Utilisez-le pour mettre en avant le nom de votre station, émission ou marque. Un titre clair améliore la reconnaissance de votre radio auprès des auditeurs et favorise le référencement naturel (SEO) de votre page.
  • playerTitleColor: Personnalisez la couleur du titre pour l'adapter à votre charte graphique. Les couleurs cohérentes renforcent l'identité visuelle et l'expérience utilisateur.
  • playerSlogan: Ajoutez un slogan ou une description courte sous le titre principal. Cela peut inclure un message clé, une fréquence, ou une accroche marketing pour attirer la attention des visiteurs.
  • playerSloganColor: Définissez la couleur du slogan pour une harmonie visuelle parfaite avec le reste du lecteur. Un contraste adapté améliore la lisibilité.
  • playerBGColor: Contrôlez la couleur de fond du lecteur pour l'intégrer parfaitement à votre site web, qu'il soit clair ou sombre. Un fond adapté améliore l'intégration et la perception professionnelle.
  • audioSrc: Spécifiez l'URL de votre flux audio (Shoutcast, Icecast, etc.). Le lecteur prend en charge les flux HTTP et HTTPS pour une compatibilité maximale. Utilisez toujours des flux sécurisés pour de meilleures performances SEO et sécurité.
  • coverImageSrc: Ajoutez une image de couverture personnalisée (logo, pochette d'album, etc.) pour une présentation professionnelle et attrayante. Les images optimisées (format carré, poids léger) améliorent le temps de chargement et l'expérience utilisateur.
  • buttonColors: Personnalisez la couleur des boutons de lecture/pause pour qu'ils correspondent à votre palette de couleurs. Des boutons visibles et cohérents renforcent l'interaction utilisateur.

Comment ça marche ?

  1. Configurez votre lecteur : Utilisez l'outil ci-dessus pour personnaliser le titre, le slogan, les couleurs, l'image de couverture et la source audio selon vos besoins.
  2. Copiez le code généré : Récupérez le code HTML et le script JavaScript affichés dans la section "Code d'Intégration".
  3. Intégrez-le à votre site : Collez le code HTML à l'endroit souhaité sur votre page web, puis ajoutez le script JavaScript avant la balise </body>.
  4. Profitez de la diffusion : Votre lecteur radio personnalisé est maintenant en ligne et prêt à diffuser à vos visiteurs sur tous les appareils.

Bonnes pratiques pour l'intégration du lecteur radio

  • Utilisez des flux HTTPS : Pour une compatibilité maximale et la sécurité, privilégiez les flux audio HTTPS.
  • Optimisez l'image de couverture : Choisissez une image carrée, légère et de haute qualité pour un rendu optimal sur tous les écrans.
  • Accessibilité : Ajoutez un texte alternatif pertinent à l'image de couverture pour améliorer l'accessibilité.
  • Testez sur mobile : Vérifiez le rendu et le fonctionnement du lecteur sur différents appareils et navigateurs.
  • Gardez le code à jour : Utilisez toujours la dernière version du script JavaScript pour bénéficier des dernières fonctionnalités et correctifs.
  • Personnalisez pour votre marque : Adaptez les couleurs et le texte pour qu'ils correspondent à l'identité visuelle de votre site.

Pourquoi choisir le lecteur radio CastHost ?

  • Installation ultra-rapide : Copiez-collez simplement le code HTML et le script JavaScript sur votre site.
  • Compatibilité totale : Fonctionne sur tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) et tous les appareils (ordinateur, mobile, tablette).
  • Design responsive : S'adapte automatiquement à la taille de l'écran pour une expérience optimale sur mobile et desktop.
  • Sécurité : Prise en charge des flux HTTPS pour une intégration sécurisée sur les sites web modernes.
  • Personnalisation avancée : Modifiez l'apparence et le comportement du lecteur sans aucune compétence en programmation.
  • Support et mises à jour : Profitez d'un support technique réactif et de mises à jour régulières pour garantir la compatibilité et la sécurité.

Que vous soyez une radio locale, un podcasteur indépendant ou une grande station, le lecteur radio CastHost vous permet de diffuser votre contenu audio en toute simplicité, tout en offrant une expérience utilisateur moderne et professionnelle.

Questions Fréquemment Posées

Qu'est-ce que le lecteur radio web CastHost ?

Le lecteur radio web CastHost est un widget audio personnalisable et responsive que vous pouvez intégrer sur n'importe quel site web pour diffuser du contenu radio directement à vos visiteurs.

Comment puis-je personnaliser l'apparence du lecteur radio ?

Vous pouvez personnaliser les couleurs, le titre, le slogan, l'arrière-plan, les couleurs des boutons, l'image de couverture et la source audio avec notre outil de configuration facile à utiliser sur cette page.

Le lecteur radio est-il compatible avec tous les navigateurs ?

Oui, notre lecteur radio est conçu pour fonctionner sur tous les navigateurs web modernes, y compris Chrome, Firefox, Safari et Edge, sur ordinateur et mobile.

Puis-je utiliser des flux HTTPS avec le lecteur radio ?

Absolument! Le lecteur prend en charge les flux audio HTTP et HTTPS, assurant la compatibilité avec les sites sécurisés et les exigences des navigateurs modernes.

Comment intégrer le lecteur dans mon site web ?

Copiez simplement le code HTML généré et l'extrait JavaScript, puis collez-les dans le HTML de votre site web où vous voulez que le lecteur apparaisse.

Le lecteur radio est-il responsive pour les appareils mobiles ?

Oui, le lecteur est entièrement responsive et s'adapte automatiquement aux différentes tailles d'écran, offrant une expérience d'écoute optimale sur smartphones, tablettes et ordinateurs.

Entrez en contact
Envoyez-nous un message