FAQ - liste de questions sur OverBlog

Encore une question traitée - souvent à la volée et de manière superficielle - dans le forum :
Comment insérer une musique dans son blog ?

Je vous conseille d'insérer les mp3 par la méthode dewplayer

Présentation

Il y a plusieurs façons de jouer de la musique sur Internet.
Les méthodes se différencient selon que l'on veut faire appel:
  • à l'application lecteur multimédia par défaut du visiteur (Windows Media Player, iTunes - QuickTime, RealMedia, WinAmp etc...) qui s'ouvre dans une nouvelle fenêtre.
  • au plugin multimédia du navigateur qui affiche ou non un panneau de contrôle dans la page web.
Mais la même méthode peut ne pas fonctionner selon :
  • le type de fichier musical que l'on veut jouer (MP3, AIF, MOV, RAM, etc..).
    Je vous conseille de définir le type de fichier dans le code que vous insérerez (voir les types MIME ci-dessous)
  • le navigateur du visiteur
  • le lecteur multimédia (et le système d'exploitation) du visiteur

Les méthodes

Dans chacune des méthodes ci-dessous, vous devez insérer le code HTML (en mode HTML et non Design) dans votre article, votre entête, votre pied de page ou un module Texte libre.

Le lien direct
La méthode IMG
La méthode OBJECT

Le lien direct

Il vous suffit d'insérer un lien vers votre fichier musical, par exemple:

<a href="http://francisek.gplm.free.fr/obzic/Mozart-la-flute-enchantee.mp3">La flûte enchantée</a>
Résultat:
La flûte enchantée

La musique ne démarre pas automatiquement, elle est d'abord intégralement téléchargée.

La méthode IMG

Cette méthode ne permet pas d'afficher de panneau de contrôle et fonctionne de manière aléatoire selon les navigateurs.
Le code HTML pour cette méthode est :
<IMG DYNSRC="http://urldemonfichier.fr/Mozart-la-flute-enchantee.mp3" border="0"/>
Autre inconvénient, il faut changer le style CSS des images afin de leur attribuer une bordure.

 

La méthode OBJECT

La méthode OBJECT est plus compliquée mais beaucoup plus intéressante que les précédentes car plus compatible. Elle permettra presque à coup sûr à vos visiteurs de profiter de votre musique.

La méthode OBJECT définit le lecteur (WMP, iTunes, RealPlayer) qui sera utilisé par votre visiteur. Je vous déconseille d'utiliser la version Windows Media Player car le plugin n'est pas disponible sur tous les systèmes d'exploitation et le panneau de contrôle ne s'adapte pas à la taille que vous définissez. Vous préférerez donc l'usage de QuickTime, beaucoup plus intéressant à mon sens.
Voici donc le code à insérer :

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="160" HEIGHT="16" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM
name="SRC" VALUE="http://francisek.gplm.free.fr/obzic/playlist.m3u">
<PARAM
name="AUTOPLAY" VALUE="false">
<PARAM
name="LOOP" VALUE="false">
<PARAM
name="CONTROLLER" VALUE="true">
<EMBED
type="audio/x-mpegurl" src="http://francisek.gplm.free.fr/obzic/playlist.m3u" autoplay="false" width="160px" height="16px" loop="false" controller="true" PLUGINSPAGE="http://www.apple.com/quicktime/download/">
</EMBED>
</OBJECT>

Et le résultat:


Notez que la balise OBJECT inclut une balise EMBED pour assurer la compatibilité entre navigateurs.
Il faut donc définir deux fois les paramètres du lecteur. Les paramètres sont passés à la balise OBJECT via des balises <PARAM name="" value=""> et à la balise EMBED par des paires nom="valeur"

 

Ces paramètres sont les suivants :

Name Value SRC URL du fichier ou de la playlist à lire. AUTOPLAY
  • true : lecture automatique
  • false : lecture lancée par le visiteur
CONTROLLER
  • true : affiche le panneau de contrôle
  • false : n'affiche pas de panneau
TYPE

(dans EMBED) Type MIME du fichier à lire. Par exemple:

  • mp3 => audio/mpeg
  • m3u => audio/x-mpegurl
  • au => audio/basic
  • aiff => audio/aiff

L'avantage est qu'on peut aussi insérer des vidéos par ce biais.

  Voir tous les paramètres (en anglais)

 

Construire une Playlist (pour MP3)

Il y a de nombreux avantages à ne pas mettre un fichier MP3 directement en paramètre SRC mais plutôt un fichier de playlist (m3u):

  • lecture de plusieurs morceaux à la suite
  • lecture en streaming : la lecture commence sans que le fichier ne soit complètement chargé.
  • modifications faciles : pour ajouter des titres, il suffit d'éditer le fichier M3U

Je vous conseille donc d'utiliser une playlist même si vous n'avez qu'un fichier à lire !!

Le fichier de playlist est un simple fichier texte qui contient l'URL des fichiers MP3 à lire placés. Voici un exemple de fichier M3U :

Mozart-la-flute-enchantee.mp3
http://www.monsite.com/Beethoven-9eme.mp3
classique/dvorak-nouveau-monde.mp3

Le premier morceau est dans le même dossier que la playlist, le second sur un autre site et le troisième dans un sous-dossier classique.  
Mar 16 aoû 2005 74 commentaires



Article très intéressant, j'ai déjà rerouté un bloggueur dessus ;-)
Pas mal avec le nouveau design @+

Peut-êtreUneRéponse - le 18/08/2005 à 09h25
Je crois que je vais continuer les essais ... ;)
Post très intéressant et bien expliqué !
Chavi92 - le 21/08/2005 à 00h20
pour la méthode embed ou fo til inséré le code html??rep sur mon site merci d'avance
ziperman - le 21/08/2005 à 18h36
donc si vous ne comprennez pas ça mettez vous a ma place quoique je pense que ça ne vστενοχωρημένου είμαι πάντα επίσης hermetique έχω που λέγεται μέσα στο άρθρο δεν περιλαμβάνει λέξεις σ δύο πρέπει να έχε το QI συμμορφώνει που me γονίδιο αλλά θα συμπαθούσα της μουσικής όλο connement μου blog !ik begrijp langageje informatica niet begrijp langageje informatica niet begrijp langageje informatica niet begrijp langageje informatica niet begrijp του informatica taal niet !donc εάν αυτός βάζετε σας έχετε τη θέση μου εν τούτοις σκέφτομαι ότι αυτός εσείς δεν θα άρεσε πολύςous plairait pas beaucoup
AUDE WIE - le 22/08/2005 à 23h37
Aude> et je suppose que te demander ce que tu ne comprends pas, alors que tous ceux qui ont fait des efforts ont compris cet article avec notre aide, n'est pas posible ?

De toute facon, insérer de la musique est compliqué, et demande un minimum de connaissances. On ne peut guère faire plus simple.
Fabrice - le 23/08/2005 à 08h04
Fab > Juste pour te signaler qu'il y a des classes CSS pour colorer le code :
.EdHtmlTag pour les balises HTML et .EdHtmlAttrib pour les attributs HTML
Tu peux les mettre dans ton CSS si tu le désires (je fais un ajout CSS dans ce commentaire, je sais c'est pas bien, si ça ne plait pas, supprimes-le ...)
Francisek - le 23/08/2005 à 09h08
merci pour ton aide, @+
nansou - le 27/08/2005 à 13h41
Juste une question,
Comment crée un fichier .m3u ?
Simple fichier texte à priorie mais sous word ou autre je ne vois pas comment avoir une extension .m3u
HeavenLaw - le 01/09/2005 à 12h26
Sous un bloc-notes, ca marche ;)

ce n'est jamais qu'un fichier texte avec une extension particulière ;)
Fabrice - le 01/09/2005 à 12h49
Merci !
Je vais essayer de suite :)
HeavenLaw - le 01/09/2005 à 13h24