Insérer de la musique sur la page

Mardi 16 août 2005 2 16 /08 /Août /2005 00:00

- Publié dans : Gadgets

Insérer de la musique sur la page

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 :

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.

Plus
- Email
- Lien
- Imprimer

Voir les 74 commentaires

Précédent : [v2.0] Conditions d'utilisation... Retour à l'accueil Suivant : [v2.0] Liste des choses à ne pas faire

Commentaires

dans La méthode OBJECT J'ai pas bien compris comment on met de la musique si sa t'aide la musique que je veux metre ces :
groupe : GREEN DAY
chansons : American Idiot, Holiday, Boulevard Of Broken Dreams.
merci d'avance

Commentaire n°51 posté par WORRGGH le 28/01/2006 à 20h45

torai pas une teknic pour que la music demare automatiquement et quil ny ai pa de lecteur ?

Commentaire n°52 posté par link $im@rd le 12/02/2006 à 18h06

Non. Ca ne marcherait pas ;)

Réponse de Fabrice B. le 13/02/2006 à 00h06

Bonjour,

J'ai insérer de la musique sur mon blog. On l'entend bien sous internet explorer mais pas sous mozilla firefox et netscape.

Ces deux navigateurs me demandent de télécharger les plugins manquants, ce que je fais mais toujours pas de musique.

Existe-t-il un code ou une méthode fiable pour contourner ce problème et entendre ma musique sur tous les navigateurs,
d'avance merci !

Commentaire n°53 posté par jean le 24/02/2006 à 10h27

oui, dewplayer ;)

(cf la faq, l'article à ce sujet)

Réponse de Fabrice B. le 25/02/2006 à 11h09

L'informatique et moi, ça fait deux. Parfois plus ! Mais je ne laisse pas tomber pour autant...

Sauf que ça ne fonctionne pas.

Pour mettre de la musique, si j'ai bien tout compris, il faut d'abord l'héberger. J'ai obtenu sur rapidshare cette adresse : http://rapidshare.de/files/14939981/walt disney -Mary Poppins -Chem Chem Chemine.mp3.htlm. Est-ce que ça doit ressembler à ça ?

Et ensuite, il suffit de reprendre

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

Si ou, pourquoi ça ne fonctionne pas ? Sinon, qu'est-ce que je fais mal ? Et s'il n'y a vraiment aucune chance pour que je m'en sorte toute seule, tant pis et merci quand même !

Commentaire n°54 posté par Elise le 08/03/2006 à 12h37

je te conseille de lire les articles récents à ce sujet ;)

et l'adresse que tu donnes et celle d'une page web, pas celle d'un fichier son ;)

Réponse de Fabrice B. le 08/03/2006 à 13h36

Ou héberger ma musique pour avoir une adresse en .mp3 ? (j'ai testé avec megaupload mais comme l'adresse qu'on me donne est pas adaptée, ça mache pas :s)

Commentaire n°55 posté par Luss le 14/03/2006 à 18h28

cf la liste des hebergeurs sur la faq ;)

Réponse de Fabrice B. le 14/03/2006 à 18h52

Bonjour, petit message de reconnaissance et de satisfaction. Félicitations, les informations diffusées sont claires, argumentées (c'est important pour comprendre ce que l'on fait) et expliquer avec beaucoup de didactisme. Un seul mot pour conclure : bravo. Et puis, allez un second mot pour reconclure : merci CAT

Commentaire n°56 posté par Cat le 20/10/2006 à 12h08

Salut !

Malgré tous vos conseils et toutes mes recherches, je n'ai toujours pas de musique quand j'ouvre ma page d'accueil !!! J'ai d'abord hebergé ma musique et j'ai ensuite essayé toutes les méthodes que vous conseillez (lien direct, méthode EMBED, IMG et enfin OBJECT)

Bien sûr, celle qui m'intéresse le plus, c'est la méthode OBJECT, que je pense pourtant avoir suivi à la lettre mais en vain... voilà ce que j'ai rentré en mode HTML :

J'ai beau faire et refaire la manip, dès que j'arrive sur ma page d'accueil, le logo QuickTime s'affiche en bas de ma page, les pluging sont ok mais toujours pas de son.... Aidez-moi svp !!! Je vais devenir folle !!!

Merci beaucoup pour votre réponse.

Commentaire n°57 posté par bambina le 29/10/2006 à 00h00

l'url http:// www.badongo.com/file/1619732 est fausse: ce n'est pas un fichier son ;)

Réponse de Fabrice B.. le 30/10/2006 à 10h46

Desolé de poser cette question mais c'était pour savoir si:
-on été obligé d'etre au niveau privilege
-pourquoi sa ne marche pas chez moi
Mais la question ou j'essai de cherché sur tout les site d'aide (qui sont très utile mais le probleme et que je ne compren pa )donc je voudrai savoir d'ou doit venir l'adresse url parce que quand e met la flute enchanté qu'y est si dessus sa marche mais dès que je change sa ne marche pas donc merci de repondre. :)

Commentaire n°58 posté par glups le 03/11/2006 à 12h02

Si tu es en confiance, il faut l'heberger ailleurs, MAIS avec la bonne url, le code marchera. Note qu'il y a un article plus récent sur ce blog pour insérer du son ;)

Réponse de Fabrice B.. le 03/11/2006 à 19h38

slt j'apprecie vraiment les conseil que tu as mis a la disposition de tout le monde mais je n'arrive pas a creer ma play list...

j'ai tout essayer mais rien a faire....

que faut-il? un code url ou autre?...

repond moi stp j'en ai besoin ( va voir sur le site... ) Lou Bega tout seul c'est un peu lourd^^

Commentaire n°59 posté par melvinVI le 09/11/2006 à 22h58

Salut à toi le grand manitou de la face cachée des blogs !!! (ouhlala quel lyrisme ;-))

Merci pour tes conseils très pédagogique, j'ai réussi avec laméthode objet et embed,

on peut donc entendre 30 seconde de la chanson coconut de harry nilson sur mon blog !!!

Par contre, j'ai pascompris ou on devait enregistrer le fichier qui contient la playliste ?

Commentaire n°60 posté par Goutt le 02/12/2006 à 11h39

Dans ses fichiers ;)
Mais si tu es en confiance: pas possible ;)

Réponse de Fabrice B.. le 02/12/2006 à 16h06

Alors voilà ma question, peut on mettre une playlist du style radioblog, sur mon blog ?

Commentaire n°61 posté par lulu le 09/12/2006 à 05h32

Construire une Playlist (pour MP3)

Et voila ;)

Réponse de Fabrice B.. le 09/12/2006 à 08h51

oui; mais comment ? j'ai déjà une playlist mais sur radioblog, il donne une adresse url, comment je fais pour l'inserrer dans mon site ?

Commentaire n°62 posté par lulu le 10/12/2006 à 18h23

Tu copies le code qu'ils te donnent ;)

(suis pas expert en musique: j'ai horreur de ca sur un site... essaye de demander sur le forum sinon ;) )

Réponse de Fabrice B.. le 10/12/2006 à 19h29

Excuse moi d'être très chiante, mais voilà le problème avec l'adresse url qui donne :
http://www.radioblogclub.com/fav/0/1451746/0
Je ne peux pas inséré ca on est d'accord ?!!
Sinon, c'et super j'ai compris pas mal de chose sur le forum, il suffit de savoir lire ;)

Commentaire n°63 posté par lulu le 12/12/2006 à 00h42

Comme déjà dit, je peux pas t'aider, regarde dans le forum, etc ;)

Réponse de Fabrice B.. le 12/12/2006 à 08h47

bonjour! est ce normal qu'en utilisant la ligne de code de la balise EMBED, je vois apparaitre à l'écran la balise donnée normalement par la méthode OBJECT? Ce n'etait pas le cas il y a quelques temps, je suis tres perplexe, du coup... en plus, autre chose étrange, je dispose de tous les lecteurs possibles et imaginables, dont quicktime, mais firefox me repète sans cesse qu il me manque un plugin et ne lance donc pas la musique... j ai pourtant vérifié, le lien du plugin qu il me conseille est celui de quick time, que j ai deja...je m interroge donc...

merci ;)

Commentaire n°64 posté par Julie le 17/01/2007 à 02h20

FF n'a jamais aimé quicktime.

Pour le mélange, ca peut arriver ;)

Réponse de Fabrice B.. le 19/01/2007 à 10h50

ben en fait, j ai un autre blog sur lequel la methode embed fonctionne tres bien, aucun probleme pour la lecture et FF ne me demande pas les plugins, la musique se lance bien et lecteur a la bonne apparence etc...mais sur mon blog principal, pas moyen d'utiliser embed, toujours ce changement d apparence du lecteur et le soit disant manque de plugins...je suis assez perplexe...pourquoi ca fonctionne sur l un et pas sur l autre? Etrange...

Si jamais tu as une soluce...

Merci, ++.

Commentaire n°65 posté par Julie le 21/01/2007 à 02h38

Pour les plugins, ca peut se jouer sur un détail: un encodage différent du fichier... Et là, c'est la croix et la bannière pour trouver la solution...

Réponse de Fabrice B.. le 21/01/2007 à 11h05

Bonjour, J'ai vraiment un problème avec ma musique et aussi celle des autres je ne peux pas l'entendre. j'ai mis ce code : J'ai essayé en me mettrant sous IE7, Firefox, (sous ces deux là je vois les lecteurs mais n'ai aucune lecture.) Sous maxthon le lecteur est remplacé par une petite croix rouge et toujours pas de musique. Peux-tu m'aider s'il te plait. Merci beaucoup par avance. Lilly

Commentaire n°66 posté par lilly lolipops le 15/07/2007 à 20h27

Croix rouge > maxthon ne doit pas supporter le flash.
Pas de musique: vérifier que l'url de la musique est juste.

Réponse de Over-FAQ le 16/07/2007 à 14h21

Bonjour La méthode la plus complète me semble plus appropriée à ce que je souhaite faire mais pourquoi cela ne fonctionne t'il que sou Explorer ? Firefox et Opera serait-il les grans oubliés de la navigation sur le net ? Quelqu'un peut-il me dire pourquoi le plug-in de QuicTime est sans cesse réclamé pour afficher la page correctement (alors qu'il est bel et bien installé) sous Firefox et Opéra alors que tout fonctionne avec Explorer. Over-blog n'est pas compatible avec Firefox ni Opera ? Merci de vos réponses Cordialement CF

Commentaire n°67 posté par Christofan le 14/08/2007 à 10h28

Il faut vérifier que le plugin flash est bien présent sur Firefox ET opéra..

(et vu que je suis sous Firefox la plupart du temps, je le saurais si c'était pas compatible..)

Réponse de Over-FAQ le 17/08/2007 à 13h51

bonjour, et bien moi qui commence en informatique et qui voulais faire quelque chose de sympa. J'avoue que je suis perdu avec toute c'est abréviation. je ne sais pas comment m'y prendre pourtant je cherche et lit et relis vos explication. help help je suis perdu !

Commentaire n°68 posté par florence le 23/11/2007 à 19h31

Il vaut mieux lire:
Ajouter une musique avec dewplayer

Réponse de Over-FAQ le 26/11/2007 à 11h07

trop cool exactement ce que je chercher mon code source remarque c une radio shoucast Undertand33

Commentaire n°69 posté par SPc le 12/12/2007 à 16h58

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 ?

Commentaire n°70 posté par yoye-2000 le 27/12/2007 à 09h57

ou plugin manquant sur Firefox ?
de toute facon, je conseille pour les mp3 de passer par dewplayer ;)

Réponse de Over-FAQ le 02/01/2008 à 10h52

voila j'aimerai changer le player pour WMP , avec object !! comment ?

Commentaire n°71 posté par alexboulet le 15/03/2008 à 23h40

Je conseille vraiment de passer par dewplayer.... Nettement plus simple, et au moins, il fonctionne avec tous les navigateurs.

Réponse de Over-FAQ le 17/03/2008 à 09h11

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???? Voila le code:

Commentaire n°72 posté par tristanah le 10/05/2008 à 09h32

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.. ;)

Réponse de Over-FAQ le 12/05/2008 à 09h10

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

Commentaire n°73 posté par eric le 08/12/2008 à 06h48

Ou alors, on utiliser le bouton "ajouter de la musique" disponible depuis une semaine dans l'éditeur d'article ;)

Réponse de Over-FAQ le 08/12/2008 à 09h23

Bonjour, je vodrais rendre invisible mon lecteur dewplayer sur ma page d'accueil. Pouvez vous m'aider?
Merci

Commentaire n°74 posté par ROBERTISSIMA le 08/03/2009 à 10h06

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

Réponse de Over-FAQ le 09/03/2009 à 09h49

Accueil