11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Amélioration lecteur mp3 avec playlist html5

Bonjour,

J’ai mis en ligne sur l’un de mes sites un lecteur mp3 avec playlist, récupéré sur le web, tout simple basé sur la balise audio HTML5 :

http://www.anciens-irsid.fr/page/bulletin/bulletin_56/player_56.php

Ce lecteur est piloté par le script suivant :

<script>
function loadSong(elt, e) {
if(!e) var e = window.event;
document.getElementById("player").src=elt.href;
document.getElementById("player").load();
document.getElementById("player").play();
return false;
}

window.onload = function() {
links = document.getElementById("playlist").getElementsByTagName("a");
for(var i = 0; i<links.length; i++) {
links[i].onclick=function(e) { return loadSong(this, e); };
}
}
</script>


J’ai cherché, sans y parvenir, à introduire une amélioration qui consisterait à un background-color sur l’élément de la playlist en cours de lecture.
Pour le moment ce background-color n’apparaît que lors du clic sur l’élément à lire par le css :

#playlist li a:active { background-color: yellow;}


Je pense que cette amélioration ne peut se faire que dans le javascript sur lequel j’ai peu de connaissance.

Si vous pouviez avoir la gentillesse de m’apporter votre aide.

Merci d’avance
Cordialement
Patrick MARA
[/i]
Bonjour,

Tu peux, dans ta fonction loadSong() rajouter cette ligne :
e.target.style.backgroundColor = 'red'


Ca devrait le faire. Faudra juste ajouter une ligne au préalable pour réinitialiser la couleur de fond des anciens éléments lu.
Bonjour,

J'ai finalement adapté un autre script trouvé sur le web qui permet :
* de mettre une couleur de fond sur le lien sélectionné pour l'écoute mp3
* de réinitialiser la couleur de fond du lien qui a été écouté.

Cordialement
Patrick MARA

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Ecouter le bulletin n°56</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body{
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	font-size: 0.9em;
	background-color: #FFFFFF;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}
h1 {
	font-size: 1em;
	margin: 0 0 0.5em 0;
	color: #000000;	
	background-color: #CCCCCC;	
	border-radius: 0.5em;
	padding: 0.2em;
	background-image:linear-gradient(#CCCCCC, #F5F5F5);
}
#playlist,audio{
	width: 650px;
	padding: 0px;
}
#playlist{
	margin-left: auto;
	margin-right: auto;
	border: solid 0.1em #000000;
	border-radius: 10px;
}
.active a{
	text-decoration: none;
	background-color: yellow;
	border-radius: 10px;
}
li {
	border-bottom: solid 0.1em #999999;
}
li.fin {
	border:none;
}
li a{
	padding: 3px;
	display: block;
}
li a:hover{
	text-decoration: none;
}
div.center {
	text-align: center;
}		
</style>
<script type="text/javascript" src="../../../jquery/jquery-1.6.4.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var audio;
var playlist;
var tracks;
var current;

init();
function init(){
    current = 0;
    audio = $('audio');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    audio[0].volume = .10;
    playlist.find('a').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
            link = playlist.find('a')[0];
        }else{
            link = playlist.find('a')[current];    
        }
        run($(link),audio[0]);
    });
}
function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        audio[0].load();
        audio[0].play();
}
});//]]> 

</script>
</head>
<body>
<br/>
<br/>
<div class="center"> 
  <h1>Ecouter le bulletin n°56</h1>
  <br/>
  <audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg"> 
  Désolé, votre navigateur ne supporte pas HTML5 audio.</audio></div>
<ul id="playlist">
    <li class="active"><a href="../bulletin_56/mp3_56/01-56_Sommaire.mp3">Sommaire / Editorial</a></li>
  <li><a href="../bulletin_56/mp3_56/02-56_Pinakin.mp3">Entretien avec Pinakin CHAUBAL</a></li>
  <li><a href="../bulletin_56/mp3_56/03-56_Ukraine.mp3">Carnet de voyage en Ukraine</a></li>
  <li><a href="../bulletin_56/mp3_56/04-56_Lorraine.mp3">La Lorraine, deux ou trois choses que 
    je sais d'elle...</a></li>
  <li><a href="../bulletin_56/mp3_56/05-56_Vietnam.mp3">Souvenirs d'émotions d'un voyage au Vietnam 
    et à Angkor</a></li>
  <li><a href="../bulletin_56/mp3_56/06-56_Activites.mp3">Activités de l'Amicale 2ème semestre 
    2015 et projets 2016</a></li>
  <li class="fin"><a href="../bulletin_56/mp3_56/07-56_Jaumont.mp3">Visite du musée de l'oeuvre 
    de Jaumont, de l'espace Simone et de la crypte</a></li>

</ul>
</body>
</html>
Sujet clos
Aller à