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"
-Attention ! : sites et players ne sont pas éternels !
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, autrefois deux possibilités de code ! désormais uniquement avec la balise <iframe>
mais désormais la balise <audio> ne fonctionne plus dans Blogger
2-1utiliser la balise <audio> en collant dans ce code avec l'identifiant de l 'adresse URL
2-1
<br />src="https://drive.google.com/uc?id=IDENTIFIANT"controls
--------------------------------------------------------------------------------
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 Désormais utiliser uniquement la balise <iframe> en collant ce code :
------------------------------------------------------------------------------
<iframe frameborder="0" height="80" src="https://drive.google.com/file/d/IDENTIFIANT/preview" width="500">
</iframe>
------------------------------------------------------------------------------
l'identifiant ressemblera à : src="https://drive.google.com/file/d/lVvMoZTA_Gyv179qQxOMDOchKtLxhmyI/preview" width="500">Voici un code plus complet que pouvez utiliser---------------------------------------------------------------------------
<div style="height: 40px; max-width: 100%; overflow: hidden; width: 900px; background-color:black;">
<iframe allow="autoplay" height="480" src="https://drive.google.com/file/d/IDENTIFIANT/preview" style="left: -14%; position: relative; top: -213px; border:none;" width="640"></iframe>
</div>
-----------------------------------------------------------------et vous obtenez ce lecteur :
ou celui ci (code plus complet)
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...
- 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"
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> ATTENTION NE FONCTIONNE PLUS !!!
<br /> 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>).
