PETIT LECTEUR AUDIO HTML 5

***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;
}