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


    SI
    -Vous êtes utilisateur de Deezer vous avez vos playlists : voir l'article dédié DEEZER
    -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
    ------------------------------------------------------------------------------ 
    <br />
    <audio src="https://drive.google.com/uc?id=IDENTIFIANT" 
    controls></audio><br />

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



    EXEMPLE 





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

    ------------------------------------------------------------------- -------------------
    <br />
    <audio controls="" src="https://drive.google.com/uc?id=IDENTIFIANT"> </audio>
    <br />
    --------------------------------------------------------------------------------------

    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 frameborder="0" height="80" src="https://drive.google.com/file/d/IDENTIFIANT/preview" width="500">
    </iframe>
    ------------------------------------------------------------------------------ 
    et vous obtenez ce lecteur :




    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 sur ce lien 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







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



    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é


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


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

    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

     

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


    AUTRES ARTICLES concernant des outils abandonnés ! 

    -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