Le player
| Télécharger ce player audio : |
Le téléchargement intègre l'ensemble du player présenté (musique, images, ...).
Intégrer le player dans votre page
Commencez par télécharger le player puis décompressez l'archive (.rar).
Avec votre éditeur de code habituel (ou le bloc-note de windows), ouvrez le fichier "player_HTML5.html" et insérez les scripts et code dans votre page.
Il y a 2 blocs de code, celui du head et celui du body. Le fichier téléchargé ne contient que le code nécessaire à ce player, tout sera donc à intégrer dans votre page.
Le code à placer entre les balises <head> et </head> est délimité par les commentaires <!-- ############## HEAD CODE ############## --> et <!-- ############## END HEAD CODE ############## -->.
<!-- ############## HEAD CODE ############## -->
<!-- audio player script --> <!-- script du player audio -->
<title>DBM Web-Design - Player Audio JQuery</title>
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/html5audio.css" />
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
(...)
jQuery(document).ready(function() {
var $ = jQuery.noConflict();
$.html5audio('#componentWrapper', ap_settings, 'sound_id1');
ap_settings = null;
});
</script>
<!-- End of audio player script --> <!-- Fin du script du player audio -->
<!-- ############## END HEAD CODE ############## -->
</head>
Le code à insérer dans le corps de votre page, entre les balises <body> et </body>, est lui placé entre les commentaires
<!-- ############## BODY CODE ############## --> et <!-- ############## END BODY CODE ############## -->.
<body>
<!-- ############## BODY CODE ############## -->
<!-- wrapper for the whole component --> <!-- conteneur du player audio -->
<div id="componentWrapper">
<div class="playerHolder">
(...)
</div>
<!-- for parsing podcast feeds -->
<div class="feedParser"></div>
<!-- font calculations -->
<div class="fontMeasure"></div>
</div>
<!-- End of wrapper for the whole component --> <!-- fin du conteneur du player audio -->
<!-- ############## END BODY CODE ############## -->
</body>
Editer votre liste de musique
l'archive que vous venez de télécharger intègre les musiques d'exemple, ceci facilitera pour certains l'intégration de leur propre fichiers audio en affichant la syntaxe type.
Les fichiers audios sont, pour l'exemple, placés dans le répertoire "audio". Libre à vous d'organiser vos fichiers musicaux comme bon vous semble, il vous suffira juste d'adapter le code en fonction du chemin menant au fichier visé.
Vos musiques doivent etre encodées dans les formats compatibles avec les navigateur ciblés. Si votre morceau de musique est encodé dans plusieurs formats (mp3 et ogg par exemple), ces derniers doivent etre placés dans le meme dossier et avoir le meme nom, seule l'extension doit etre différente.
L'intégration de vos propre morceaux est très simple, il vous suffit d'indiquer dans l'attribut datapath="..." le chemin de votre fichier, sans extension !
Le code du player se chargera de déterminer le format de compression selon le navigateur utilisé par le visiteur de votre site.
En exemple :
<!-- List of playlists. NO EXTENSION for music file names! -->
<!-- Playlist -->
<ul id='playlist1' data-type='local'>
<li class= "playlistItem" data-path="chemin de votre fichier musical sans extension" >
<a class="playlistNonSelected" href='#'>Titre affiche dans la playlist</a></li>
<!-- Exemple : -->
<li class= "playlistItem" data-path="audio/02-Fall_Walk_Run-You_Are_You" >
<a class="playlistNonSelected" href='#'>Fall Walk Run - You Are You</a></li>
<li class= "playlistItem" data-path="audio/03-Cavashawn-Out_Of_My_Mind" >
<a class="playlistNonSelected" href='#'>Cavashawn - Out Of My Mind</a></li>
(...)
</ul>
Personnalisation
Si vous souhaitez modifier le design de ce player, ouvrez le fichier "HTML5audio.css" et utilisez vos talents pour donner à ce player l'apparence voulu.
Une petite précision, le player téléchargé à des propriétés CSS de margin pour la règle #componentWrapper, modifiez ou supprimez les si besoin, elle n'ont été établie que pour l'affichage propre à cette page.