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

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

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 :

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>

Un podcast sympa de France Inter :

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


Dernière mise à jour: 3 août 2021
Créé: 3 août 2021
Contributions à cette page : Julien Moura

Ce contenu est sous licence Creative Commons BY-NC-SA 4.0 International


Commentaires

Une version minimale de la syntaxe markdown est acceptée pour la mise en forme des commentaires.
Propulsé par Isso.
Retour en haut de la page