Moteur PE...

MoteurPE, moteur de recherche pour professeurs des écoles

Publié par alain l.

Insérer un lecteur audio MP3 sur OverBlog...

Depuis la disparition de DewPlayer,  je cherchais  comment insérer un lecteur de fichier Mp3 sur Le Réveil qui permettre de lire et d'écouter en même temps un texte publié ...

Et j'ai enfin trouvé la solution grâce à Henri...

S’il y a encore quelques temps il était assez compliqué de lire un fichier audio ou mp3 depuis votre site web, le HTML5 à simplifié sa mise en place.  A partir d’une simple balise à insérer dans votre page web, la lecture de votre fichier musical s’effectuera simplement.

Alors comment insérer le lecteur ...

Tout simplement en ouvant une section html et en collant une balise audio dont voici le code:

Exemple d’utilisation de la balise <audio>

1
2
3
4
<audio controls="controls">
  <source src="music.mp3" type="audio/mp3" />
  Votre navigateur n'est pas compatible
</audio>

Le résultat:

La procédure en images ...

Il est plus simple de commencer à enregistrer son article en mode Brouillon ...

Insérer un lecteur audio MP3 sur OverBlog...

Copier et coller le code suivant dans une section Html ...

<audio controls="controls">
  <source src="music.mp3" type="audio/mp3" />
  Votre navigateur n'est pas compatible
</audio>
Insérer un lecteur audio MP3 sur OverBlog...
Insérer un lecteur audio MP3 sur OverBlog...
Insérer un lecteur audio MP3 sur OverBlog...
Insérer un lecteur audio MP3 sur OverBlog...

Télécharger le fichier mp3 dans une section fichier...

Insérer un lecteur audio MP3 sur OverBlog...
Insérer un lecteur audio MP3 sur OverBlog...
Insérer un lecteur audio MP3 sur OverBlog...

Enregistrer puis  demander un aperçu  pour pouvoir  vérifier que le lecteur apparait bien dans l'article et pour copier l'adresse du fichier Mp3 par :

  • Clic droit
  • Copier l'adresse URL du Fichier ( ou Enrgeistrer la cible du lien ...)
Insérer un lecteur audio MP3 sur OverBlog...
Insérer un lecteur audio MP3 sur OverBlog...
Insérer un lecteur audio MP3 sur OverBlog...

Remplacer maintenant "music.mp3" par l'adresse de votre fichier mp3 dans la section Html ...

Insérer un lecteur audio MP3 sur OverBlog...

Il vous suffit maintenant d'effacer  le fichier Mp3 si vous ne souhaitez garder que le lecteur dans votre article ...

Insérer un lecteur audio MP3 sur OverBlog...
Insérer un lecteur audio MP3 sur OverBlog...
Insérer un lecteur audio MP3 sur OverBlog...

Une restriction ...

Le poids de vos fichiers ne peut excéder 8 Mo ...

J'ai  testé avec des fichiers hébergés plus lourds sur DropBox ou HubiC ... mais cela ne fonctionne pas ... 

Le lecteur ne peut lire  que  des fichiers mp3 hébergés sur OverBlog...

( à moins que je n'aie pas encore trouvé la solution ...)

Et uniquement donc  si vous êtes en Version Premium...

Alors, la solution :

En cadeau , un extrait du dernier album de Dexter Britain : Ineffable ...

Source de l'info:

Les Articles du Réveil vous sont proposés sous licence Créative Commons 4.0 International.

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions
Voir le Résumé Explicatif | Voir le Code Juridique

PUB  N'hésitez pas à vous abonner au blog pour être informé(e)s au fur et à mesure des nouvelles parutions... 

Aujourd'hui  Lundi  06/03/2017 ... le Réveil est  23°  dans le Top des Blogs  d'Overblog ...

Commenter cet article

Bernieshoot 06/03/2017 10:37

c'est très bien expliqué et utile pour ceux qui souhaitent insérer un fichier audio

alain l. 06/03/2017 10:53

Salut Bernie ... Ça fait au moins deux ans que je cherche sur le Web une solution grauite et simple à mettre en œuvre ... J'avais d'abord trouvé la possibilité d'insérer un lecteur en flash ... Mais il ne fonctionne pas sur apple et le flash est appelé à disparaître ... Le HTML5 est donc vraiment la solution ...

@t
alain