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 :
<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>
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');
}
<?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;
}
}
?>
#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
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.