[v1.94] Insérer de la musique sur la page

Mardi 16 août 2005

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.

Recommander
Ecrire un commentaire - Voir les 74 commentaires

Précédent : [v2.0] Conditions d'utilisation... Retour à l'accueil Suivant : [v1.94] Modifier son CSS pas à pas

Commentaires

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

Commentaire n° 1 posté par Peut-ÃÂªtreUneRÃÂ©ponse le 18/08/2005 à 09h25

Je crois que je vais continuer les essais ... ;)
Post très intéressant et bien expliqué !

Commentaire n° 2 posté par 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

Commentaire n° 3 posté par 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

Commentaire n° 4 posté par 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.

Commentaire n° 5 posté par 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 ...)

Commentaire n° 6 posté par Francisek le 23/08/2005 à 09h08

merci pour ton aide, @+

Commentaire n° 7 posté par 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

Commentaire n° 8 posté par 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 ;)

Commentaire n° 9 posté par Fabrice le 01/09/2005 à 12h49

Merci !
Je vais essayer de suite :)

Commentaire n° 10 posté par HeavenLaw le 01/09/2005 à 13h24

Et bien ca marche impécable.
Je te remercie !
je vais de ce pas jeter un oeil à ton site

Commentaire n° 11 posté par HeavenLaw le 01/09/2005 à 13h47

je ne suis pas très forte en informatique alors je vous demande un peu de comprehension pour commencer =) au cas où je dis une enorme betises ^^.Enfin bref,j'ai quelque questions à vous posez car je tiens vraiment à metre un fond musical sur mon bloOog : comment crée un fichier musical? et puis aussi comment insérez le code HTML? merci beaucoup j'espere trouver une solution .

Commentaire n° 12 posté par Marie le 02/09/2005 à 02h01

Peux-tu donner la manière la plus simple pour prendre de la musique du poste de travail et la mettre sur notre blog. MERCI BEAUCOUP A TOI !!

Commentaire n° 13 posté par nansou le 07/09/2005 à 18h26

fait un tour ici: http://la.faq.over-blog.com/article-762815.html

Commentaire n° 14 posté par Fabrice le 07/09/2005 à 20h55

j'ai heberger mon fichier mp3 sur rapideshare et mis le lien en html comme il est dit ds la méthode embed mais il n'y a pas de musique, il y a juste le lecteur qui s'affiche sur mon blog, d'ou vient le problème?

Commentaire n° 15 posté par michelle le 09/09/2005 à 17h33

over-blog supprime la valeur pour que la musique se lance toute seule.

ca évite la lenteur sur le serveur.

Commentaire n° 16 posté par Fabrice le 09/09/2005 à 18h30

certes mais elle ne se lance po toute seule et manuellement non plus!

Commentaire n° 17 posté par michelle le 09/09/2005 à 19h09

Bonjour j'ai essayer aussi plusieurs fois le lien de franciesk fonctionne parfaitement bien dès que je met une autre adresse url dans mon fichier sur un serveur tel que rapideshare, la balise est bien là mais ne fonctionne pas ? peut etre s'agit-il du mode pour moi c'est confiance depuis le début du mois çà fait long quand meme ? si quelqu'un peut m'aider, merci d'avance

Commentaire n° 18 posté par patrick le 23/09/2005 à 09h11

et pour une radio, comment fait on?

Commentaire n° 19 posté par michelle le 12/11/2005 à 17h53

moi aussi patrick, ça me met la meme chose,le lecteur est en place mais rien ne démarre et moi aussi mes fichiers sont sur rapidshare!

Commentaire n° 20 posté par michelle le 12/11/2005 à 21h01

Si la musique ne se lance pas avec RapidShare, c'est parce qu'il faut une URL se finissant par .mp3 et non par .html (sur rapidshare, l'url doit être .mp3.html).
Une méthode est de créer un site sur Multimania et d'héberger ses musique là bas (mais c'est un peu galère à comprendre)

Commentaire n° 21 posté par ThomasS le 27/12/2005 à 03h06

Bonsoir!
Après avoir disséqué pendant des heures et des heures les différents tuto, sites internet sur le sujet ...etc, je m'adresse à toi (tes conseils m'ont bien servi) car ma radio blog a des soucis, les musiques ne se chargent pas. J'ai continuellement "preloading track", sans que ça charge quoi que ce soit. Je ne vois pas du tout d'où vient le problème même après l'avoir trituré dans tous les sens! lol
Peux tu m'aider ? Merci
Melie

Commentaire n° 22 posté par Melie le 30/12/2005 à 22h46

vérifies que les urls sont justes. (sans accents, sans majuscules, sans espace, c'est beaucoup mieux)...

(mais je suis pas expert en musique lol )

Réponse de Fabrice B. le 30/12/2005 à 23h19

salut, je me lance dans l'aventure blog...une vraie novice...et je comprends pas tout à tes explications malheureusement..pourtant super détaillées!
à quel endroit dois je insérer ces codes et ou est ce que je peux mettre les fichiers musicaux?

merci à+

Commentaire n° 23 posté par caro le 11/04/2006 à 22h32

Dans le mode source de l'endroit où ca doit s'afficher ;)

Réponse de Fabrice B. le 11/04/2006 à 23h49

j'ai réussi à mettre en musique de fond un fichier midi sympa

ravie des explications, car même sans connaitre le langage source, j'y suis arrivée !!! ouah!!! un grand merci !

Commentaire n° 24 posté par carpediem le 13/04/2006 à 14h47

demande d'infos :

j'ai changé de musique chaque jour, il y a qq chose que je ne comprends pas; il me semblait qu'au début, quand on ouvrait une autre page pour lire un texte la musique continuait , alors que maintenant, elle repart du début chaque fois !

j'ai procédé exactement de la même manière, peux-tu m'aider ??? merci par avance

Commentaire n° 25 posté par carpediem24 le 15/04/2006 à 10h45

Ah non, à moins d'ouvrir en popup, tu as toujours une coupure quand tu changes de page ;)

Réponse de Fabrice B. le 15/04/2006 à 12h33

bon, je croyais que non,

j'ai voulu mettre les canons de pachelbel en mp3 , mais cette musique qui redémarre à chaque changement de page !! c'est vraiment pompeux !! alors je l'ai virée et j'ai remis un petit fichier midi léger !

il n'y a pas un truc de pro pour la musique en continu ??? !! sniff !!

Commentaire n° 26 posté par carpediem le 15/04/2006 à 17h19

Oui, l'ouvrir en popup, dans une nouvelle page. du coup, il faut javascript, donc, pas en confiance.

Réponse de Fabrice B. le 16/04/2006 à 01h54

bonjour

Je vois que je ne suis pas le seul à chercher à mettre de la musique sur mon site.

Je suis prof de musique (pas d'informatique, malheureusement) et je voudrais inclure sur mon blog des fichiers mp3 qui sont des accompagnements que j'ai créés, afin que mes élèves puissent venir "piocher" ce dont ils ont besoin. J'ai besoin d'y mettre aussi des partitions que j'ai créées.

Comment faire?

Il semble y avoir tellement d'options différentes que je m'y perds un peu. Ce serait sympa d'avoir un "condensé "de la méthode à appliquer.

En tout cas, bravo pour votre site

A bientôt

Commentaire n° 27 posté par ronan le 16/04/2006 à 12h43

il y a un nouvelle méthode plus facile pour les mp3 ;)

Ajouter un son

Réponse de Fabrice B. le 16/04/2006 à 12h53

salut a tous ,
jai essayé de mettre de la musique sur mon blog mai rien a faire sa m'affiche un petit logo quicktime sans son ni lecteur vous avez ka allé voir le lien !!!!
kelkun pourai til me donné un cou de main car la je galere vraimen

merci davance a celui ki ora la possiblité de resoudre ce probleme

Commentaire n° 28 posté par arthur le 04/05/2006 à 22h24

Slt

Je voudrai bien mettre "rock the house" de Gorrillaz pourrait tu etre gentil et me donner le code?

Commentaire n° 29 posté par dede le 31/05/2006 à 12h46

c génial merci beaucoup c'est extra !!!!!!!!!!!

Commentaire n° 30 posté par matt webmaster de tintin's world le 07/08/2006 à 12h11

Salut !

Je commence par te dire que je trouve ton article magnifique ! Mais j'ai une question très importante le conserna . Donc j'ai toujours rêvé de mettre de la musique sur mon blog. Je lis depuis quelques jours, je parcours tous les endroits qu'on me montre et je ne trouve toujours rien. Jusqu'à ce que j'arrive chez toi. Donc, pour mettre de la musique , j'ai utilisé la methode embed . En fet , j'ai recopié le code que tu nous donne et je suis allé le coller en mode source en texte libre. Quand je suis allé voir le résultat sur mon blog , ca jouait ! Pour la première fois ! Mais quand j'ai voulu mettre la musique qui me plait , ca ne jouait plus . Je me demande pourquoi ? Pourtant j'ai fait tout ce qu'il fallait pour mettre url de la musique que je voulais. Conserna la musique, j'aurais besoin d'être éclairé ! Tu as beaucoup à lire alors je continu en bas.

Bisous xxxxxx

Commentaire n° 31 posté par Liberty le 11/08/2006 à 03h20

Re salut !

Comme je disais , j'ai vraiment de la misère pour comprendre comment mettre de la musique sur mon blog. Si tu peux m'aider , ca serai très gentil de ta part. Pour m'aider , j'aurai besoin que tu réponds à mes questions.

1. Comment on fait pour être hebergé ?

2. une fois qu'on est hebergé , comment on fait pour telecharger la musique et mettre son url dans fichier ?

3. En fet j'aurai besoin que tu me dise comment tu as procédé et si tu pouvais me refiler des adresses des hebergeurs , ca serai gentil de ta part !

Commentaire n° 32 posté par Liberty le 11/08/2006 à 03h52

Coucou !

Sur mon blog, à droite tu vas trouver un lecteur comme celui qui est chez toi , ne sois pas surpris si tu entends la musique, car c'est elle que tu as sur ton blog. Si ca te dérange de la voir chez moi , fais juste me le dire et je vais l'enlever . Je te laisse la chanson que je veux avoir chez moi et sa chanteuse. Si tu peux me trouver son code , ca me toucherai énormement . Donc , c'est : my heart will go on de Céline Dion. Je veux le code selon la methode de embed et en mp3 , si c'est ca qui marche. Je te remerci en avance !!!!!

Gros bisous xxxxxxx

Commentaire n° 33 posté par Liberty le 11/08/2006 à 03h59

J'ai une question toute bête, mais comment créer une playlist pour ensuite l'ajouter à mon blog en fond musical ?

Merci d'avance !

Commentaire n° 34 posté par laulotte le 20/08/2006 à 19h16

salut et bravo pour ces explications
néanmoins comme t comment configurer le code pour que ce soit WMP qui lise mon son plutôt que Quicktime ??
merci d'avance

Commentaire n° 35 posté par kraddle le 31/08/2006 à 20h24

Salut,

J'ai lu tt les commentaire et je nai pas trouvé comment faire une playlist pour l'inserer sur mon blog,pouvez vous m'aider

Commentaire n° 36 posté par SÃÂ¥R1ÃÂL KÃÂÃÂ¥ le 10/09/2006 à 19h40

il faut faire une m3u.. cf l'autre article sur la musique et la technique de Francisek ;)

Réponse de Fabrice B.. le 10/09/2006 à 20h14

Merci a toi

Commentaire n° 37 posté par SÃÂ¥R1ÃÂL KÃÂÃÂ¥ le 10/09/2006 à 20h28

Je narrive a faire fonctionner ma playlist

est-ce que c normale que ca maffiche ca pour l'adresse de la playlist ?

http://h1.ripway.com/SyriolKay/Ma%20musique/playlist

Commentaire n° 38 posté par SÃÂ¥R1ÃÂL KÃÂÃÂ¥ le 10/09/2006 à 21h39

l'adresse est fausse.

Réponse de Fabrice B.. le 10/09/2006 à 22h32

Désolé pour le retard,

Je fais comment pour avoir la bonne adresse?

Commentaire n° 39 posté par SÃÂ¥R1ÃÂL KÃÂÃÂ¥ le 12/09/2006 à 19h33

Salut je voulai juste demander si c'etais obliger de payer pour rapideshare ou il y a une autre site gratos

Commentaire n° 40 posté par Toscan le 12/09/2006 à 21h28

cf l'article Hébergeurs gratuits

Réponse de Fabrice B.. le 12/09/2006 à 22h14

salut !

alors pour commencer je suis pas très douée pour tout ce qui est informatique (je découvre). j'ai lu (très très très vite fait) les commentaires et la question que je vais te poser a surment déjà été répondue :

j'ai vu dans les commentaires qu'on parlait de "héberger" sa musique...mais vu que j'avais la flemme de tout lire, je préfère demander directement : c'est quoi??? en fait, dans le code il me manque juste ça pour que ça marche, comment mettre sa musique sur une page internet ou autrement comment l'"héberger"?? il faut aller sur quel site?

merci d'avance !

Commentaire n° 41 posté par Kroll le 14/09/2006 à 20h29

Hébergeurs gratuits :)

Réponse de Fabrice B.. le 14/09/2006 à 23h11

ok merci !

Commentaire n° 42 posté par kroll le 17/09/2006 à 12h52

c'est l'usine à gaz pour mettre de la musique!!!

étant novice j'ai quelques problèmes pour insérer de la musique.

j'ai essayer la méthode lien direct et en test j'ai inséré le lien de l'exemple mais je n'obtient pas le résultat voulu. est ce que par hasard il me manquerai une notion importante??? merci

Commentaire n° 43 posté par pierreoz le 01/01/2006 à 01h55

Bonjour,
Je trouve tous les tutos super bien fait et mettre de la musique semble être super facile. Par contre, j'ai quand même une question sur les musiques : peut-on mettre "librement" n'importe quelle musique tourner sur un blog ? Sinon, que peut-on y mettre ? Des musiques libres de droits ? Des samples ? Dans ce dernier cas, comment "transformer" une chanson en sample (comment la découper en fait et avec quoi) ? Et quelle est sa durée maximale autorisée ?
Comme j'ai un doute à propos de ce sujet là, j'hésite à mettre de la musique pour l'instant.
Voilà, merci beaucoup pour votre aide !!

Commentaire n° 44 posté par KoRyN le 10/01/2006 à 22h28

des musiques libres de droits uniquement ;)

les samples aussi, théoriquement, mais la loi changeant souvent, aucune idée de durée. pour le découpage, il faut chercher un découpeur de musique sur google, en fonction du format du fichier.

Réponse de Fabrice B. le 10/01/2006 à 23h16

Bonjour,

J'essaie d'insérer un fichier musical sur mon blog, pour que la musique soit entendue dès l'ouverture du blog.

Je n'arrive pas à faire en sorte que mes fichiers fonctionnent: en les mettant sur putfile, j'obtiens :

Click here to watch 'Jewel---Standing-still50'

http://media.putfile.com/Jewel---Standing-still50

quel lien dois-je insérer dans le mode source de mon texte libre pour que ma musique appraisse avec une barre d'outil musical ?

Merci d'avance et félicitations pour ce site qui est très utile...

Commentaire n° 45 posté par Alicia le 13/01/2006 à 00h21

Il faut que sur cette page, tu récupères l'adresse du fichier son ;)

Réponse de Fabrice B. le 13/01/2006 à 02h18

merci mais... je ne suis pas très douée en informatique, j'y arrive pas...

Commentaire n° 46 posté par Alicia le 16/01/2006 à 14h01

Salut !

Merci beaucoup pour tous ces conseils.

J'ai réussi à insérer un code pour lire la musique, je l'ai fait avec la méthode OBJECT et EMBED pour tester. Elles fonctionnent toutes les deux, mais est-ce normal que la musique ne commence pas automatiquement ? J'ai mis true dans l'AUTOPLAY mais ça ne fonctionne toujours pas

Commentaire n° 47 posté par Annie le 22/01/2006 à 05h47

Elle fonctionne seulement manuellement...

Commentaire n° 48 posté par anniebp18 le 22/01/2006 à 14h24

Dsl d'écrire encore, j'ai essayé avec la méthode IMG et ça fonctionne parfaitement !! : )

Commentaire n° 49 posté par anniebp18 le 22/01/2006 à 14h29

Slt,

J'essaie la méthode EMBED (celle en début d'article), un coup fait je ne vois pas le controler ? Juste un carré rouge avec X. Comment je fais pour avoir l'image ?

J'ai également hébergé mon .mp3 sur Megaupload.com mais le lien remis ne se termine pas .mp3 ??? mais plutot par des lettres ! Crois-tu que ça va fonctionner quand même ?

il faut le lien avec mp3 dedans... le lien de megaupload n'est pas l'adresse du fichier, mais celle d'une page affichant le fichier ;)

Réponse de Fabrice B. le 25/01/2006 à 17h28