Aller au contenu
ENCommencer gratuitementCommencer
← Toutes les plateformes

Tutoriel générateurs statiques

Votre voix dans votre Markdown

Une ligne dans le gabarit de base, une balise dans le fichier Markdown de l'article. Le reste de votre chaîne ne change pas.

Créer mon compte gratuitVoir la démonstration

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

  • Hugo, Jekyll, Astro, Eleventy ou équivalent
  • Le HTML autorisé dans le Markdown (réglage Hugo ci-dessous)
  • 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 et celui de vos prévisualisations (Netlify, Vercel, GitHub Pages…). 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 de base

    baseof.html, default.html, Layout.astro…

    Hugo : layouts/_default/baseof.html. Jekyll : _layouts/default.html. Astro : src/layouts/Layout.astro. Eleventy : _includes/base.njk.

    Collez la ligne de script dans le <head>.

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

  3. 03

    Hugo : autorisez le HTML dans le Markdown

    hugo.toml

    Par défaut, Hugo remplace le HTML écrit dans le Markdown par un commentaire. Activez-le dans la configuration. Jekyll, Eleventy et Astro l'acceptent sans réglage.

    toml
    [markup.goldmark.renderer]
  unsafe = true

  4. 04

    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>

  5. 05

    Écrivez la balise dans le Markdown

    Sur sa propre ligne

    Collez la balise sur sa propre ligne, entourée de lignes vides, sous le paragraphe concerné. Dans un fichier .mdx, elle s'écrit pareil.

    Construisez et déployez : le lecteur apparaît sur la page.

    markdown
    Il m'a fallu trois essais pour réussir.

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

La suite de l'article…

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.

Le lecteur est remplacé par <!-- raw HTML omitted -->

C'est Hugo qui masque le HTML : ajoutez le réglage unsafe = true (étape 3) et reconstruisez le site.

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