Pour écouter et partager de la musique sur votre blog, vous avez plusieurs possibilités.
Cas le plus fréquent, vous souhaitez écouter votre musique perso, vous devez donc stocker vos fichiers mp3 sur un serveur.
-Vous êtes utilisateur de Deezer vous avez vos playlists : voir l'article dédié DEEZER Cas le plus fréquent, vous souhaitez écouter votre musique perso, vous devez donc stocker vos fichiers mp3 sur un serveur.
-Vous utilisez SoundCloud pour écouter, télécharger de la musique, et vous souhaitez la partager sur votre blog: voir l'article dédié SOUNDCLOCK
-Vous pouvez aussi utiliser , via des liens, la musique de soundclick
-Vous souhaitez diffuser une playlist sur votre blog, utilisez le player "PLAYLIST"
-Si vous êtes abonné à un site de musique en ligne ... voir ce qu'il propose en ligne comme "partage"
-Rappel : sites et players ne sont pas éternels !
-Grooveshark a été contraint de fermer son site (2015) ainsi que Tilidom
-le lecteur de playlist Devplayer (avec du Flash) est stoppé
Cet article présente uniquement l"exploitation de vos fichiers MP3 stockés :
1-sur Google Drive
2-En ligne sur un serveur ex : Free
1-STOCKER SES FICHIERS MP3 sur GOOGLE DRIVE
En principe les fichiers stockés dans le Cloud (Google Drive, Dropbox, Hubic, Box, Onedrive...) même partagés, ne fonctionnent pas pour écouter de la musique...Toutefois, actuellement (2015) il existe une possibilité à partir de fichiers MP3 stockés sur Google Drive. Toutefois il semble que le player ne fonctionne pas si les fichiers font plus de 20 Mo.(à vous de tester, mais cela peut être la cause d'un échec)
METHODE
1-Se rendre sur Google Drive et IMPORTER un fichier MP3 (-de 20Mo)
que l'on verra ainsi représenté dans Google Drive
Un double clic sur le fichier ouvre une fenêtre avec un lecteur de musique.
Au dessus se situe un menu qui permet de partager ce fichier
Demander le partage (icône +) afin d'obtenir le lien
2-Récupérer l'adresse fournie :
https://drive.google.com/file/d/0B6Uwn-CRRjnZUzZMc2R5WU40eTA/view?usp=sharing
et sélectionner pour copier uniquement la partie en fluo entre d/ / : c'est l'identifiant du fichier Mp3
(ASTUCE: utiliser le bloc notes pour copier coller vos codes et les modifier)
Nota : le partage de fichier peut se faire de manière classique avec le menu contextuel via le clic droit => "Partager" pour obtenir le lien de partage
2-Dans Blogger, dans votre article, passer en mode HTML
=>au choix, deux possibilités de code :
2-1 utiliser la balise <audio> en collant dans ce code avec l'identifiant de l 'adresse URL
src="https://drive.google.com/uc?id=IDENTIFIANT"
controls
--------------------------------------------------------------------------------
EXEMPLE
A savoir : en fait Blogger va automatiquement modifier le code que vous avez copié/collé ! qui deviendra :
------------------------------------------------------------------- -------------------
On peut aussi utiliser directement ce code !
A noter : pour tous les codes fournis la balise <br /> est ajoutée en début et fin de code afin de passer une ligne automatiquement
2-2 utiliser la balise <iframe> en collant ce code :
------------------------------------------------------------------------------ </iframe>
------------------------------------------------------------------------------ 2-VOUS STOCKEZ VOS FICHIERS MP3... EN LIGNE...
Il faut stocker ses fichiers mp3 en ligne et donc avoir leur adresse URL exacte (en.mp3)
Attention : il faut utiliser des noms de fichiers mp3 sans majuscules, accents, espace...
=>A SAVOIR : les fichiers stockés dans le Cloud (Google Drive, Dropbox, Hubic, Box, Onedrive...) même partagés, ne fonctionneront pas (en principe...voir ci-dessus)
- Le plus simple : utiliser un espace d’hébergement web gratuit
=>celui de votre FAI (ou celui de Free, accès gratuit pour tous !). Ouvrir votre espace.
Utiliser un logiciel de transfert FTP (Filezilla) pour créer des dossiers et transférer votre musique (et vos lecteurs)
Free propose à tous d'ouvrir un compte gratuit qui permet d'avoir accès à 10 Go pour héberger site et fichiers.=> S'inscrire ici
et voir notre article détaillé explicatif "Ouvrir et utiliser un compte Free"
=>Archive-Host (payant: 24€/an pour 5Go) permet des stocker des fichiers mp3 avec lien direct
Exemple sur "Google site" (et non pas Google Drive !)
https://sites.google.com/site/monnom/fichier.mp3
voir ici comment faire
mais Quota du site : 100 Mo/site et Taille maximale des pièces jointes : 20 Mo
3-ENSUITE, COMMENT FAIRE ?
Désormais vous avez l'adresse URL de vos fichiers mp3, sous une forme identique à :
http://monsite.free.fr/musique/monfichier.mp3
1- Faire un simple lien
Vous pouvez faire un simple lien :=> pour écouter ma musique préférée, cliquer sur ce lien pour ouvrir
le Fichier MP3
Après avoir cliqué sur sur lien, un lecteur s'ouvre dans une nouvelle fenêtre.
Intérêt : Simplicité, pas besoin d'aller dans le code ! Vous devez seulement connaitre l'adresse du fichier à diffuser, du type :
ici : http://chezmoi.free.fr/musique/charleston.mp3
Pour faire mieux, en faisant apparaitre dans votre article un lecteur musical, il faudra utiliser la balise <audio> mais en travaillant en mode HTML, cela peut être complexe pour un novice mais aussi lorqu'il faut insérer le code dans une très longue page...Là, il faut trouver le bon endroit pour insérer le code...
2-Utiliser la balise <audio>
Méthode la plus simple ! identique à la méthode précédente du I-
src="ADRESSE URL" controls Votre navigateur n'est pas à jour !--------------------------------------------------------------------------------
Exemple
Bien comprendre la balise <audio>
La balise <audio> permet de lire des fichiers sons ou des flux audio directement dans un article ou page en proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause et contrôle du volume.
Elle se présente ainsi:
src="URLdufichiermp3" controlsVeuillez mettre à jour votre navigateur !L'on peut ajouter des propriétés à cette balise:
| Propriétés | Définition | Valeurs |
|---|---|---|
| autoplay | Le fichier son doit être lu automatiquement lorsqu'il est chargé | autoplay |
controls |
Affiche le lecteur audio avec ses fonctionnalités (lecture, pause, volume ...) |
controls |
| loop | Le fichier son doit être joué en boucle | loop |
preload |
Spécifie un préchargement du fichier son à l'ouverture de la page |
auto metadata none |
src |
URL du fichier son qui sera lu | URL |
ex
<audio src="URLduFICHIER.mp3" controls autoplay loop>
</audio>
A savoir:
- On ne peut pas forcer le préchargement de la musique, c'est toujours le navigateur qui décide. Les navigateurs mobiles, par exemple, ne préchargent jamais la musique pour économiser la bande passante (le temps de chargement étant long sur un portable).
Ex:
<audio src="URLduFICHIER.mp3" controls preload="none">
</audio>
La balise <source> permet de définir au sein de l'élément <audio> plusieurs ressources alternatives au cas où le navigateur ne supporterai pas le format initialement spécifié dans l'attribut "src" (il faut alors supprimer l'attribut "src" et spécifier les différents fichiers par ordre de priorité dans les balises <source>).
Exemple
<audio controls="controls">
<source src="URLduFICHIER.mp3" type="audio/mp3" />
<source src="URLduFICHIER.ogg" type="audio/ogg" />
Votre navigateur ne supporte pas le tag <audio>.
</audio>
Complément
il existe aussi des sites (payants le plus souvent) qui proposent des modules d'intégration de musique (nous n'avons pas testé) comme :
powr
----------------------------------------------------------------------------------
CETTE PARTIE N'EST PLUS D'ACTUALITE
le player utilisant la technologie Flash
est abandonné
le player utilisant la technologie Flash
est abandonné
Utiliser un lecteur de musique comme le lecteur "Dewplayer" avec fichier mp3 hébergé sur site perso
DESORMAIS IL NE FAUT PLUS UTILISER DES MODULES INTEGRANT L'ANCIENNE TECHNOLOGIE FLASH :
TOUS LES NAVIGATEURS LA REFUSENT DESORMAIS
Quel intérêt ?
Aspect +: Ces lecteurs sont plus esthétiques et configurables, avec possibilité de mettre une playlist
Aspect - : Ils sont au format Flash( non standard) et le fichier du lecteur en .swf doit être installé sur votre espace web en FTP.
Conclusion: plus lourd à installer et configurer
Alsacréations a développé divers modèles de "Dewplayer" c'est un lecteur mp3 sous licence CC, au format Flash, que vous pouvez utiliser librement et gratuitement sur votre blog. Il est compatible avec tous les navigateurs (Internet Explorer, Mozilla Firefox, Opera, Apple Safari, Google Chrome, etc)
Les fichiers Flash .swf sont à placer sur votre site web (par FTP) avec les fichiers .mp3 (dans des dossiers de préférence). Vous devez noter les adresses URL du lecteur et du fichier à lire.
Ex
Attention :
-utiliser des noms de fichiers mp3 sans majuscules, accents, espace...
-utiliser des noms de fichiers mp3 sans majuscules, accents, espace...
-Mettre des Tags à vos Mp3 si vous voulez voir apparaître titres, interprète...
Ensuite vous devez coller ce code dans l'article de votre blog en mode HTML
-----------------------------CODE----------------------------------------------
<object type="application/x-shockwave-flash"
data="http://URL/dewplayer.swf"
width="220" height="20" id="dewplayer" name="dewplayer">
<param name="movie" value="http://URL/dewplayer.swf" />
<param name="flashvars" value="mp3=http://URL/son.mp3" />
</object>
-------------------------------FIN DU CODE-----------------------------------------------------
Attention:
http://URL/dewplayer.swf ( 2 fois dans le code) par votre adresse
http://URL/son.mp3 par votre adresse
Si plusieurs morceaux : mettre un | entre les fichiers =>caractère "pipe" : Alt+124 |
ex: value="mp3=http://uia.ii.free.fr/musique/normandie.mp3|http://uia.ii.free.fr/musique/charleston.mp3|http://uia.ii.free.fr/musique/cesaria_evoria.mp3" />
ou faire une Playlist
-----------------------------------------------------------------------------------------------------------------------
Pour obtenir ces lecteurs
DEMO : cliquer pour écouter
LECTEURS
Classique avec dans le code "dewplayer.swf"
Lecteur "mini"
Mini avec dans le code "dewplayer-mini"
Lecteur incluant 3 titres : cliquer sur la double flèche "multi" avec dans le code "dewplayer-multi.swf"
Lecteur avec playlist avec dans le code "dewplayer-playlist.swf"
-------------------------------
AUTRES ARTICLES concernant des outils abandonnés ! 4- Utiliser un lecteur Google avec fichier mp3 hébergé sur site
Vous pouvez aussi utiliser une lecteur Google en utilisant ce code dont il faudra changer uniquement l'adresse URL du Mp3
---------------------------------------------------------------------------------------------------------------------
<br />
<iframe style="width: 350px; height: 26px;"
src="http://www.gmodules.com/gadgets/ifr?
url=https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/google-audio-step.xml
&up_MP3=URL fichier mp3
&up_START=No
&up_CCOL=%23eeeecc"
allowTransparency="true" frameborder="0" scrolling="no"></iframe>
<br />
-----------------------------------------------------------------------------------------------------------------------
Lecteur
---------------------------------
-Grooveshark a été contraint de fermer son site (2015) ainsi que Tilidom
-le lecteur de playlist Devplayer (avec du Flash) est stoppé voir ci-dessus
-le lecteur de playlist Devplayer (avec du Flash) est stoppé voir ci-dessus
