Créer un Blog avec Blogger

MP3

  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 (le plus simple est d'utiliser l'espace d'hébergement fourni par votre FAI)


SI
-Vous êtes utilisateur de Deezer ou Grooveshark et vous avez vos playlists,
-Vous utilisez un hébergeur spécialisé en musique comme  Tilidom (2Go de musique)
-Vous souhaitez utiliser un lecteur de musique fonctionnant  en arrière-plan pendant  les visites  de votre blog : utilisez PlayList.
-Vous utilisez SoundCloud pour  écouter, télécharger de la musique, et vous souhaitez la partager sur votre blog.
===>voir dans le MENU déroulant les articles dédiés

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... qui ne fonctionne pas !




Au dessus se situe un menu qui permet de partager ce fichier


Demander le partage (icône +) afin d'obtenir le lien

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)
en fait

2-Dans Blogger, dans votre article, passer en mode HTML et utiliser la balise <audio> en collant ce code :

------------------------------------------------------------------------------ 
<br />
<audio src="https://drive.google.com/uc?id=IDENTIFIANT" 
controls> Votre navigateur n'est pas à jour ! </audio><br />

-------------------------------------------------------------------------------- 

puis remplacer l'IDENTIFIANT par celui de votre fichier et vous obtenez ce lecteur de musique qui fonctionne !

--------------------------------------------------------------------------

EXEMPLE 





A savoir : en fait Blogger va automatiquement modifier le code que vous avez copié/collé ! qui deviendra :

------------------------------------------------------------------- -------------------
<br />
<audio controls="" src="ADRESSE"> Votre navigateur n'est pas à jour ! </audio>
<br />
--------------------------------------------------------------------------------------

Mieux vaut donc 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-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
        =>Utiliser "Google site" mais  seulement 100 Mo de  stockage  
                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 pour ouvrir le Fichier MP3

Après avoir cliqué sur  sur lien, un lecteur s'ouvre  dans une nouvelle fenêtre.



Et le son est diffusé.
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-

 Il faudra travailler en mode HTML pour pouvoir insérer ce code   standard xhtml
dans votre article 
------------------------------------------------------------------------------ 
<br />
 <audio src="ADRESSE URL" controls> Votre navigateur n'est pas à jour !</audio>
<br /> 

--------------------------------------------------------------------------------

Exemple




3-Utiliser un lecteur de musique comme le lecteur "Dewplayer" avec fichier mp3 hébergé sur site perso
 

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

-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----------------------------------------------
<br />
<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>
<br />
-------------------------------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"


=>Pour créer un lecteur avec Playlist suivre les indications de cet article


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


 

 

4-COMPLEMENTS : 

  • Utiliser  des fichiers musicaux en ligne avec leur URL (gratuits et libres!)

 Wikipédia propose une sélection de fichiers audios (essentiellement musique classique) avec leurs URL que vous pouvez librement utiliser:

=>Faire un clic droit pour copier l'adresse URL du fichier
=> la liste complète

 Voir aussi easyzic

  • Rappel : les outils en ligne pour récupérer la musique de Youtube

Youtube MP3
 Vous  entrez une URL Youtube et en quelques secondes, le site vous permet de télécharger le MP3 issu de la vidéo. L'échantillonnage se fait en 128 kbits. 


Video2MP3  vous permet de récupérer un MP3 en 128 kbits, mais aussi en 256 kbits et il peut également vous permettre d'acquérir la vidéo en MP4.

Listen to Youtube
Il propose le 128 ou le 256kbits et se limite à Youtube.

 

 

  • 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:

<br />
 <audio src="URLdufichiermp3" controls>Veuillez mettre à jour votre navigateur !</audio>
<br /> 

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>