Petit lecteur audio html 5

Soyez le premier à donner votre avis sur cette source.

Vue 16 364 fois - Téléchargée 2 289 fois

Description

Tout est dans le titre:
Voici les bases d'un lecteur audio tirant profit de la balise audio du futur standard html5.
La balise permet de lire nativement un fichier audio dans son navigateur sans plug-in. Ici je rajoute un système de playlist pour récupérer une liste de lecture depuis un serveur, et les boutons de navigation permettant de l'exploiter.
Le code est divisé en plusieurs fichiers:
Du html: à intégrer sur le site.
Le code JavaScript permettant de gérer la navigation et le volume.
Le code Php permettant de récupérer une playlist de morceaux encodés à un format compatible avec le navigateur (ici soit mp3, soit ogg).
Un peu de css pour enjoliver un peu les choses.

Source / Exemple :



      • player.html***
<div id="player"> <link rel="stylesheet" href="../style/player.css" type="text/css" /> <script type="text/javascript" src="../Script/audioPlayer.js"> </script> <!--la balise en elle-meme--> <audio id="audio"> <source src=""/> Your browser does not support audio element </audio> <!--les controles--> <div id="controles"> <input type="text" id="display"/> <input type="range" id="volume_slider" min="0" max="100" value="100"/> <button id="mute" class="navButton small" ></button> </div> <!--navigation--> <div id="navigation"> <button id="previous" class="navButton" ></button> <button id="playPause" class="navButton" value="Play/Pause" name="Play/Pause"></button> <button id="next" class="navButton" ></button> </div> <!--la playlist--> <table id="playlist"> <?php include('../Script/playlist.php'); $playlist = new Playlist; $listing = $playlist->recupPlaylist(); for($i=0;$i<sizeof($listing);$i++) { echo ('<tr onclick="clickPlaylist(this,\'../morceaux/'.addslashes($listing[$i]->adresse).'\',\''.$listing[$i]->titre.'\')" ><td>'.$listing[$i]->titre.'</td><td class="invisible">../morceaux/'.addslashes($listing[$i]->adresse).'</td></tr> '); } ?> </table> </div> <script type="text/javascript"> init(); </script>
        • le code JavaScript***
function init(){ //alert("init"); var btn1 = document.getElementById("playPause"); var btn2 = document.getElementById("next"); var btn3 = document.getElementById("previous"); var slider = document.getElementById("volume_slider"); var btn4 = document.getElementById("mute"); if(btn1.addEventListener){/*alert("ok");*/} else{alert("not ok");} btn1.addEventListener('click',playPause,true); btn2.addEventListener('click',next,true); btn3.addEventListener('click',previous,true); slider.addEventListener('change',vol_change,true); btn4.addEventListener('click',mute,true); //alert('init2'); } function mute(){ var player = document.getElementById('audio'); var btn_mute = document.getElementById('mute'); if(player.volume!=0){ player.volume = 0; btn_mute.removeAttribute('class'); btn_mute.setAttribute('class','navButton small_muted'); } else{ btn_mute.removeAttribute('class'); btn_mute.setAttribute('class','navButton small'); var cursor = document.getElementById('volume_slider'); player.volume = cursor.value/100; } } function vol_change(){ var player = document.getElementById('audio'); var cursor = document.getElementById('volume_slider'); var btn_mute = document.getElementById('mute'); player.volume = cursor.value/100; btn_mute.removeAttribute('class'); btn_mute.setAttribute('class','navButton small'); } function playPause(playerID,buttonID){ var player = document.getElementById('audio'); var button = document.getElementById('playPause'); if(player.paused) { player.play(); } else { player.pause(); } } //bouton next function next(){ var selected = document.getElementsByClassName('selected'); var oldIndex = selected[0].rowIndex; var tableau = document.getElementById('playlist'); var adresseMorceau = tableau.rows[oldIndex+1].children[1].textContent; var intituleMorceau =tableau.rows[oldIndex+1].children[0].textContent; clickPlaylist(tableau.rows[oldIndex+1],adresseMorceau,intituleMorceau); } //bouton previous function previous(){ var selected = document.getElementsByClassName('selected'); var oldIndex = selected[0].rowIndex; var tableau = document.getElementById('playlist'); if(oldIndex!=0){ var adresseMorceau = tableau.rows[oldIndex-1].children[1].textContent; var intituleMorceau =tableau.rows[oldIndex-1].children[0].textContent; clickPlaylist(tableau.rows[oldIndex-1],adresseMorceau,intituleMorceau); } } //click playlist function clickPlaylist(sender,senderID,title){ var player = document.getElementById('audio'); player.pause(); player.load(); player.src = senderID; player.play(); var display = document.getElementById('display'); display.setAttribute('value',title); var supp = document.getElementsByClassName('selected'); if(supp[0]) { supp[0].removeAttribute('class'); } sender.setAttribute('class','selected'); }
      • Le code php***
<?php include('connect.php'); class Playlist{ public function recupPlaylist(){ $type = 'ogg'; if (preg_match("/MSIE/i", $_SERVER["HTTP_USER_AGENT"])) { $type='mp3'; } $connect = new Connexion; $stmt=mysqli_prepare($connect->recupConnexion(),"select nom_morceau,adresse_morceau from morceaux where type_morceau='".$type."'"); mysqli_stmt_execute($stmt); mysqli_stmt_bind_result($stmt,$row->titre,$row->adresse); while (mysqli_stmt_fetch($stmt)) { $rows[] = $row; $row = new stdClass(); mysqli_stmt_bind_result($stmt,$row->titre,$row->adresse); } return $rows; } } ?>
      • le CSS***
#player{ width:300px; /*height:180px;*/ padding:20px; background-color:#999; color:#000; float:left; margin:10px; border:solid 2px #FFF ; border-radius:10px; background-image: -moz-linear-gradient(left,#333,#FFFFFF 20%,#000); background-image: -webkit-gradient(linear,left top, right top, from(#333),to(#000),color-stop(0.2, #FFFFFF)); background-image: -o-linear-gradient(left,#333,#FFFFFF 20%,#000); box-shadow:-5px 5px 5px #333; /*-webkit-box-shadow:-10px 10px 5px #333; -moz-box-shadow:-10px 10px 5px #333;*/ } #navigation{ width:240px; margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:10px; } .navButton{ width:80px; height:30px; float:left; background-color:#C00; text-align:center; border-style:groove; margin-bottom:20px; } .small{ width:30px; height:30px; background-image:url(../images/button_mutet.png); } .small_muted{ width:30px; height:30px; background-image:url(../images/button_mute_silent.png); } .navButton:hover{ background-color:#999; } .navButton:active{ /*background-color:#FFF;*/ -webkit-transform:scale(0.92,0.92); -moz-transform:scale(0.92,0.92); -o-transform:scale(0.92,0.92); } #mute{ } #playPause{ background-image:url(../images/Boutons/playPause.png); } #next{ background-image:url(../images/Boutons/next.png); } #previous{ background-image:url(../images/Boutons/previous.png); } #playlist{ display:block; clear:left; /*height:100px;*/ overflow:auto; width:300px; background-color:#CCC; margin-left:auto; margin-right:auto; } #playlist li{ } #playlist li:hover{ background-color:#999; color:#CCC; cursor:pointer; } #display{ width:290px; margin-left:auto; margin-right:auto; } tr{ background-color:#999; width:300px; } tr:hover{ background-color:#fff; } tr:active{ background-color:#000; color:#fff; } .selected{ background-color:#ccc; } td{ width:inherit; } .invisible{ display:none; }

Conclusion :


Vous trouverez tous les fichiers dans le zip. Il faudra vérifier les liens entre pages pour les adapter a vos projets.
Les commentaires et propositions d'améliorations sont les bienvenus.
http://f3dots.comze.com

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1
Date d'inscription
vendredi 18 septembre 2009
Statut
Membre
Dernière intervention
19 mai 2011

salut.
c'est clair qu'en l'état ça ne devrait pas marcher, mais j'ai mis le code pour que chacun puisse prendre ce qui l'intéresse. pour la récupération de playlist, on pourrait très bien passer par un fichier xml par exemple.
++
Messages postés
167
Date d'inscription
mardi 21 septembre 2004
Statut
Membre
Dernière intervention
2 mai 2009

salut ca fonctionne pas tu as mélangé des éléments de ton site (dépendance bdd, structure etc) hors il faudrait supprimer et réorganiser et ca serait sympa alors la
a+++

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.