Home

Informatique // Player M3U Php/Javascript

Player M3U Php/Javascript

Voici le code source pour un lecteur M3u en javascript et Php :

D’abord la fonction Php :

<?php
function listM3u($m3u){
$row = 1;
$compteur = 1;
$handle = fopen($m3u, « r »);
while (($data = fgetcsv($handle, 1000, « , »)) !== FALSE) {
$num = count($data);
$row++;
for ($c=0; $c < $num; $c++) {
$chaine = $data[$c];
if (strstr($chaine, ‘http://’)){
$url_radio = strstr($chaine, ‘http://’);
$url_radio = str_replace (‘http://’, »,$url_radio);
echo « <a href=’http:// ».$url_radio. »‘ id=' ».$compteur. »‘> ».$chainon. »</a> »;
$compteur++;
};
$chainon = $chaine;
$chainon = str_replace (‘%20′,’ ‘,$chainon);
}
}
fclose($handle);
}
?>

 

Ensuite le HTML avec l’appel à la fonction :

 

<audio controls=’controls’ autoplay=’autoplay’ id=’audio-player’ class=’audio’ src= »/>
Your browser does not support the audio element.
</audio>
<p class= « liste-mp3 » >
<?php
listM3u(‘/files/radios.m3u’);
?>
</p>

 

Et enfin le Javascript en n’oubliant pas de lier la librairie Jquery :

<HEAD>

<script src= »https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js »></script>

<BODY>

<script type= »text/javascript »>
id=1;
$(‘p.liste-mp3 a’).click(function(event) {
event.preventDefault();
mp3 = $(this).attr(« href »);
id = $(this).attr(« id »);
nextId=parseInt(id)+1;
$(‘#audio-player’).attr(« src »,mp3);
$(‘p.liste-mp3 a’).removeClass(‘selected’)
$(this).addClass(‘selected’)
});
var vid = document.getElementById(« audio-player »);
setInterval(function(){
if (vid.ended==true){
mp3 = $(« # »+nextId).attr(« href »);
$(‘#audio-player’).attr(« src »,mp3);
$(‘p.liste-mp3 a’).removeClass(‘selected’);
$(« # »+nextId).addClass(‘selected’);
id=nextId;
nextId++;}
}, 1000);
</script>

 

Pour la playlist M3u le format est :

#EXTM3U
#EXTINF:0,Radio Latina
http://broadcast.infomaniak.net/start-latina-high.mp3
#EXTINF:1,Generations 88.2
http://generationfm.ice.infomaniak.ch/generationfm-high.mp3
#EXTINF:2,Generations GOLD Rap FR
http://gene-wr06.ice.infomaniak.ch/gene-wr06.mp3

 

Le tout à styler en CSS comme vous le souhaitez

Suivez ce lien pour voir un exemple.

Bonne écoute !!