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

1
2
3
4
5
6
7
8

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 -->

Voilà, c'est prêt !

Exemples déjà publiés#

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

• intégration du podcast de l'April au format ogg

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 :

1
2
3
4
5
6
7
8
9

<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 :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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>

Voilà, c'est prêt !