Aller au contenu
ENCommencer gratuitementCommencer
← Toutes les plateformes

Tutoriel HTML

Deux lignes de HTML, et l'auteur parle

Pas de dépendance, pas de framework : une balise script dans le gabarit, une balise <vokyt-player> dans l'article.

Créer mon compte gratuitVoir la démonstration

Ce qu'il vous faut≈ 3 min d'installation

  • Pouvoir modifier le gabarit commun (header.php, base.html…)
  • Un éditeur qui garde le HTML tel quel
  • Un compte Vokyt, offre Gratuit comprise

Étape 1 sur 4 · Copier le script

vokyt.cc/tableau-de-bord

Pas à pas

  1. 01

    Préparez Vokyt

    Compte, site, clé publique

    Créez votre compte Vokyt (gratuit), puis ouvrez Tableau de bord → Sites et intégration → Ajouter un site.

    Déclarez tous les domaines où le lecteur s'affichera : votre domaine, avec et sans www, et votre domaine de préproduction si vous en avez un. Le lecteur refuse de s'afficher sur un domaine non déclaré : c'est ce qui empêche quelqu'un d'utiliser vos vocaux ailleurs.

    Copiez la ligne de script affichée : elle contient déjà votre clé publique (pk_live_…). Cette clé peut apparaître dans vos pages sans risque.

    html
    <script src="https://vokyt.cc/player.js" data-key="pk_live_…" defer></script>

  2. 02

    Ajoutez le script au gabarit

    <head>

    Collez la ligne de script dans le <head> du gabarit commun à toutes vos pages. L'attribut defer la charge sans bloquer l'affichage.

    html
    <script src="https://vokyt.cc/player.js" data-key="pk_live_…" defer></script>

  3. 03

    Enregistrez un vocal

    30 s à 1 min 30

    Tableau de bord → Nouveau vocal : enregistrez depuis le navigateur ou envoyez un fichier. Vokyt harmonise le son et transcrit en quelques secondes.

    Relisez la transcription, puis copiez la balise du vocal dans l'encadré « Intégration ».

    html
    <vokyt-player note="note_…"></vokyt-player>

  4. 04

    Placez la balise dans l'article

    <vokyt-player>

    Collez la balise sous le paragraphe concerné. Si votre éditeur nettoie le HTML inconnu, ajoutez vokyt-player et son attribut note à sa liste blanche.

    La transcription est rendue par le lecteur ; pour qu'elle soit aussi dans le HTML (moteurs de recherche), utilisez l'API GET /v1/notes/{id}/embed côté serveur, comme le fait l'extension WordPress.

    html
    <vokyt-player note="note_…"></vokyt-player>

  5. 05

    Mettez en ligne

    Le lecteur apparaît

    Déployez et ouvrez la page : le lecteur s'affiche, reprend votre police et la couleur de vos liens, et suit le mode sombre.

Questions fréquentes

Le lecteur ne s'affiche pas, pourquoi ?

Dans 9 cas sur 10, le domaine exact de la page n'est pas déclaré dans Sites et intégration (avec ou sans www, domaine de prévisualisation). Vérifiez aussi que la ligne de script est présente une seule fois et que le vocal est prêt.

Puis-je changer les couleurs ?

Le lecteur hérite de la police et de la couleur des liens. Pour forcer une couleur, définissez la variable CSS --vokyt-accent sur la balise ou un parent.

Est-ce que ça ralentit mon site ?

Le lecteur pèse moins de 15 Ko, se charge en différé (defer) et n'utilise aucun cookie. L'audio n'est téléchargé que lorsque le lecteur appuie sur lecture.

Autres plateformes

Prêt à faire entendre votre voix ?

Créez votre compte, enregistrez un premier vocal et suivez les étapes : c'est gratuit pour commencer.

Créer mon compte gratuitToutes les plateformes