Testez Plai gratuitement pendant 7 jours

Demander mon accès

Birds dès 27 € • Premium dès 47 € HT / mois / site

plaiPlai, la musique libre de droit pour vos locaux
Se connecterÊtre rappeléEssai gratuit 7 jours
Être rappelé

Lecteurs intégrables

La musique de Plai, sur votre site

Un lecteur à copier-coller : neuf formats, en sombre ou en clair, qui jouent une playlist Plai en entier. Il s’ajoute à WordPress, Webflow, Wix ou à une application React en deux minutes.

Configurer mon lecteurVoir les formats

Neuf formats

Choisissez celui de votre page

  • Signature

    variant="signature" · 600×232

    Le lecteur complet, en haut d’une page.

  • Ambiance teintée

    variant="ambiance" · 440×120

    Une bannière compacte, teintée par la pochette.

  • Carte

    variant="carte" · 320×552

    Une colonne latérale ou une fiche.

  • Vinyle

    variant="vinyle" · 320×540

    Une mise en avant visuelle, pochette sur vinyle.

  • Playlist

    variant="playlist" · 400×528

    La liste des titres, à choisir un par un.

  • Tuile

    variant="tuile" · 168×216

    Une grille de playlists, ou un petit encart.

  • Éditorial

    variant="editorial" · 520×128

    Dans un article, avec une forme d’onde.

  • Bande

    variant="bande" · 960×76

    Une barre en bas d’une page large.

  • Badge

    variant="badge" · 400×68

    Un badge « Lieu sans SACEM » qui renvoie vers Plai, sans lecteur.

Configurateur

Votre code, prêt à coller

1. Votre clé et votre playlist

Plai vous l’envoie. Elle ne marche que sur vos sites.

Pas encore de clé ? Écrivez-nous.

2. Le lecteur

Format
Thème

Aperçu

Aperçu avec des titres de démonstration. Sur votre site, le lecteur joue votre playlist.

3. Le code pour votre site

Votre site

Pour un site qui accepte du HTML avec un script : WordPress (bloc « HTML personnalisé »), Webflow (élément « Embed »), Shopify, ou votre propre site.

Renseignez votre clé et votre playlist : le code les contiendra.

Site web
<script type="module" src="https://widgets.plai.fr/v1/plai-widgets.js"></script>
<plai-player api-key="pk_live_VOTRE_CLE" playlist="ID_DE_LA_PLAYLIST" variant="signature" theme="dark">
  <a href="https://plai.fr">Plai — musique sans SACEM pour les commerces</a>
</plai-player>

Guides

Un guide par type de site

Site web, WordPress, Webflow

Collez le code là où le lecteur doit apparaître. Le lien vers plai.fr, à l’intérieur, s’affiche tant que le lecteur charge, et reste visible si le script ne peut pas s’exécuter.

  • WordPress : ajoutez un bloc « HTML personnalisé » et collez le code. Si votre WordPress retire le script, utilisez le lien WordPress ci-dessous.
  • Webflow : ajoutez un élément « Code Embed » et collez le code.
  • Shopify, Squarespace et les autres : utilisez le bloc de code ou de HTML de votre éditeur.
HTML
<script type="module" src="https://widgets.plai.fr/v1/plai-widgets.js"></script>
<plai-player api-key="pk_live_VOTRE_CLE" playlist="ID_DE_LA_PLAYLIST" variant="carte" theme="light">
  <a href="https://plai.fr">Plai — musique sans SACEM pour les commerces</a>
</plai-player>

Wix, Notion et les sites sans script

Certains éditeurs refusent les scripts. Le lecteur s’affiche alors dans un cadre (iframe), à la taille de son format. Le lien vers plai.fr reste sous le cadre.

  • Wix : « Ajouter » → « Intégrer du code » → « Intégrer un site », puis collez l’adresse du lecteur (le lien de la section suivante).
  • Notion : tapez /embed et collez l’adresse du lecteur.
  • Ailleurs : collez le code du cadre dans un bloc HTML.
Cadre (iframe)
<iframe src="https://app.plai.fr/embed/ID_DE_LA_PLAYLIST?key=pk_live_VOTRE_CLE&amp;variant=carte&amp;theme=light"
        width="320" height="552" loading="lazy" allow="autoplay; encrypted-media"
        style="border:0;max-width:100%" title="After Hours — Plai"></iframe>
<a href="https://plai.fr">Plai — musique sans SACEM pour les commerces</a>

Lien WordPress (oEmbed)

Dans un article WordPress, collez l’adresse du lecteur seule sur une ligne : WordPress la remplace par le lecteur. Le lecteur n’accepte que les sites de votre clé.

Adresse du lecteur
https://app.plai.fr/embed/ID_DE_LA_PLAYLIST?key=pk_live_VOTRE_CLE&variant=carte&theme=light

React et Next.js

Installez le paquet @plai-music/widgets-react. Il fonctionne avec React 18 et 19, Next.js, React Router et Vite. Le serveur rend le lien vers plai.fr et le titre de la playlist ; le lecteur s’active dans le navigateur.

Terminal
npm install @plai-music/widgets-react
React
import { PlaiPlayer } from '@plai-music/widgets-react';

<PlaiPlayer apiKey="pk_live_VOTRE_CLE" playlist="ID_DE_LA_PLAYLIST" variant="carte" theme="light" title="After Hours" />

Pour suivre l’écoute, passez onPlay, onPause, onTrackChange et onError. Avec le script, les mêmes événements arrivent sur l’élément : plai-play, plai-pause, plai-trackchange et plai-error.

Les développeurs trouveront l’API derrière les lecteurs dans la référence de l’API des lecteurs (en anglais).

Votre clé

Obtenir et gérer une clé

Chaque lecteur a besoin d’une clé, qui commence par pk_live_. C’est Plai qui la crée pour votre site. Pour en obtenir une, écrivez-nous avec :

  • les adresses des sites qui afficheront le lecteur (par exemple https://www.monsite.fr) ;
  • les playlists que vous voulez diffuser, ou l’ambiance que vous cherchez.

Nous vous répondons avec la clé, l’identifiant de chaque playlist et un lien qui remplit le configurateur pour vous.

La clé est visible dans le code de votre page : c’est normal. Elle ne lit que vos playlists, et seulement depuis vos sites. Pour ajouter un site ou une playlist, ou pour désactiver une clé, écrivez-nous : le changement s’applique aussitôt, sans changer le code.

Demander une clé

Questions

En bref

Le lecteur joue-t-il des titres complets ?
Oui. Il joue en entier les titres de la playlist que Plai a liée à votre clé.
Puis-je mettre plusieurs lecteurs sur une page ?
Oui. Un seul joue à la fois : lancer un lecteur met les autres en pause.
Le lecteur ralentit-il mon site ?
Non. Le script pèse environ 14 ko compressé et se charge sans bloquer la page. Le module de streaming ne se charge qu’au premier clic, et seulement dans les navigateurs qui en ont besoin.
Le style de mon site peut-il casser le lecteur ?
Non. Le lecteur s’affiche dans un espace isolé : les styles de votre site ne l’atteignent pas, et les siens ne débordent pas sur votre page.