player.html***
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***
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;
}