Aller au contenu

Intégrer un contenu audio (podcast, etc.)#

Fichier audio hébergé hors plateforme#

Pour les fichiers de son qui ne sont pas hébergés sur une plateforme en particulier, il est toujours possible de les intégrer en utilisant la balise dédiée de HTML 5.

Pour exemple, prenons ce son : https://www.w3schools.com/html/horse.mp3

Un hénissement de cheval issu du site W3Schools :

<!-- markdownlint-disable MD033 -->
<audio preload="metadata" width="100%" controls>
    <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
    Votre navigateur ne supporte pas la balise audio HTML 5.
</audio>
<!-- markdownlint-enable MD033 -->

Un hénissement de cheval issu du site W3Schools :

🛎 Voilà, c'est prêt ! 🎉

Exemples déjà publiés#

Voici quelques exemples de syntaxe markdown qui ont été publiés sur Geotribu :

Emissions Radio France#

Il arrive que l'intégration des podcasts de Radio France pose un problème de rendu, lié à une mauvaise interprétation du mode mobile. Il faut donc forcer les dimensions pour faire apparaître le widget de lecture.

Par exemple, pour l'épisode de cette émission, le code de partage donné par le site est :

<iframe
    src="https://www.franceinter.fr/embed/player/aod/20d6704d-a414-44e8-a442-e5a354179ab1"
    width="100%"
    height="100%"
    layout="responsive"
    frameborder="0"
    scrolling="no"
    >
</iframe>

Il faut alors modifier les attributs height et width pour que le widget de lecture apparaisse correctement :

Un podcast sympa de France Inter :

<iframe
    src="https://www.franceinter.fr/embed/player/aod/20d6704d-a414-44e8-a442-e5a354179ab1"
    height="375"
    width="350"
    layout="responsive"
    frameborder="0"
    scrolling="no"
    >
</iframe>

Un podcast sympa de France Inter :

🛎 Voilà, c'est prêt ! 🎉

  1. étape où un contributeur propose d'intégrer ses modifications dans le socle principal du projet. Voir la documentation de GitHub. ↩

Commentaires