Overblog
Editer l'article Suivre ce blog Administration + Créer mon blog
16 août 2005 2 16 /08 /août /2005 00:00
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.
 
Partager cet article
Repost0

commentaires

R
Bonjour, je vodrais rendre invisible mon lecteur dewplayer sur ma page d'accueil. Pouvez vous m'aider?Merci
Répondre
O
<br /> Là comme ca, je dirais que ce n'est pas possible. A moins d'etre en mode avancé, et d'utiliser un id sur un embed ou un object, ce qui n'est surement pas une bonne solution....<br /> <br /> <br />
E
pour ceux et celles qui ont encore des probs avec la zik vous creez un fichier flash et i incorporer votre zik ts les navigateurs lisent le flash
Répondre
O
<br /> Ou alors, on utiliser le bouton "ajouter de la musique" disponible depuis une semaine dans l'éditeur d'article ;)<br /> <br /> <br />
T
Bonjour, j'utilise le player de micromedia pour diffuser le flux "M3U" d'une radio sur mon blog. Tout marché très bien jusqu'a hier, jais juste changé la place du player sur la page d'accueil et voila qu'il ne marche plus..... pour moi le code est bon, il marche très bien sur la page "articles". Si quelqu'un a une idée????<br /> Voila le code:
Répondre
O
<br /> Le code ne passe pas en commentaire. Mais a priori, je dirais que ca rejoint les soucis de players divers que certains rencontrent depuis le changement d'éditeur.. ;)<br /> <br /> <br />
A
voila j'aimerai changer le player pour WMP , avec object !! comment ?
Répondre
O
Je conseille vraiment de passer par dewplayer.... Nettement plus simple, et au moins, il fonctionne avec tous les navigateurs.
Y
La méthode OBJECT marche parfaitement avec internet explorer, mais ne fonctionne pas avec firefox... (un popup me demande d'installer un plugin manuellement....) mauvaise manipulation ou incompatibilité récurrente ?
Répondre
O
ou plugin manquant sur Firefox ? de toute facon, je conseille pour les mp3 de passer par dewplayer ;)

Accueil

Rechercher

Texte Libre