Sujet Précédent Sujet Suivant

Besoin d'aide sur Player jquery

Fermé
Yuushi_Sato Messages postés 104 Date d'inscription mardi 1 décembre 2009 Statut Membre Dernière intervention 18 février 2021 - 13 févr. 2021 à 07:38
Yuushi_Sato Messages postés 104 Date d'inscription mardi 1 décembre 2009 Statut Membre Dernière intervention 18 février 2021 - 18 févr. 2021 à 08:09
Bonjour,

Je viens de me mettre à JQuery pour créer mon lecteur audio personnel.
Le problème est que je n'arrive pas à faire les modification sur la barre de progression, n'y même a faire l'affichage de la piste en court.
Voici mon code : 
<html lang="fr">
	<head>
		<title>Audio Player 2 : Scripts javascript</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- Load FontAwesome icons -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<style type="text/css">
<style>/*c’est dans cette section que vous pourrez modifier de maniere importante l’affichage de la Playlist*/
body { color: #666; font-family: sans-serif; line-height: 1.4; }} /*Type de police et hauteur entre chaque ligne de votre PlayList*/
h1 { color: #444; font-size: 1.2em; padding: 14px 2px 12px; margin: 0px; }/*Couleur et style du titre du menu*/
h1 em { font-style: normal; color: #999; }/*Couleur,style du mot entre parenthèse (ici l’annee)*/

audio{background:#666;width:460px;}
a { color: #888; text-decoration: none; } /*Couleur des titres des chansons */
#wrapper { width: 400px; margin: 40px auto; } /*Position de votre PlayList sur la page*/

ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; } /*espacement des lignes de titre des chansons, epaisseur des lignes separant les titres des chansons…*/
ol li a { display: block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; } /*espacement entre les numeros des pistes et leurs titres …*/
li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); } /*Effet (ombre) sur les titres des pistes…*/
li.playing a { color: #000; } /*Couleur des titres des chansons (ici noir)*/
li.playing:before { content: '♬'; padding: 3px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #000; font-size: 13px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); } /*Concerne le symbole de la note de musique (sa couleur, taille, emplacement …*/
#shortcuts { position: fixed; bottom: 0px; width: 100%; color: #666; font-size: 0.9em; margin: 60px 0px 0px; padding: 20px 20px 15px; background: #f3f3f3; background: rgba(240, 240, 240, 0.7); }
@media screen and (max-device-width: 480px) {
#wrapper { position: relative; left: -3%; }
}

#cover {
	float:left;
	  margin:0 15px;
	  height: 100px;
	  width: 100px;
	  background-image: url("");
	  background-size: cover;
	  border-radius: 15%;
}

.text { 
	text-align:center;
	margin:14px 0;
}


.text h3 { 
	font-size:1.6em;	
}
.text h4{ 
	font-size:1em;	
}

#playStart {
	display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align:center;  
  margin:24px auto;
}

.time {
	display:flex;
	justify-content:space-between;
	margin:20px 0 0 0;
}

.time #currentTime {
	float:left;	
	color:#000000;
	font-size: 12px;
	text-decoration:none;
	font-weight:bold;
}

.time #currentDuration {
	color:#000000;
	font-size: 12px;
	text-decoration:none;
	font-weight:bold;
}

.seek { 
	height: 4px;
	background: rgba(200, 200, 200, 0.3);	
	display:flex;
	margin:5px 0;
	position:relative;
	cursor:pointer;
}

.fill { 
	margin:10px 0;
	width:100%;
	height:6px;
	background: rgba(200, 200, 200, 0.7);	
}

#handle { 
	width:100%;
	height:8px;
	background: rgba(200, 200, 200, 0.8);
	border-radius:50%;	
}
input#handle{
	margin-left:2%;
	-webkit-appearance:none !important;
	background:#ccc;
	height:4px;
	margin-bottom:20px;
}

#seekslider{
        width:50%;
        transform:  scale(2);
        transform-origin: left center;
        display:block;
    }


.btns { 
	margin:20px 0;
	text-align:center;
}

.btns i { 
	color: #000000;
	font-size:1.2em;
	margin: 0 10px;
	transition: all 0.3s ease-in-out;
}

.btns i:hover { 
	color: #b9b6b6;
}

.btns i:nth-child(1) , .btns i:nth-child(9) { 
	opacity: 0.6;
}

.btns i:nth-child(1):hover , .btns i:nth-child(9):hover { 
	opacity:1;
	color: #FFFFFF;
}


input#volume{
	margin-left:2%;
	-webkit-appearance:none !important;
	background:#ccc;
	height:1px;
	margin-bottom:20px;
}
input#volume::-webkit-slider-thumb{
	-webkit-appearance:none !important;
	height:12px;
	width:12px;
}
#playStart {
	width:200px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin:24px auto;
}
#playlistShow {
	text-align:left;	
} 
#playlist{ 
	padding: 0px; 
	margin: 0px; 
	list-style: decimal-leading-zero inside; 
	color: #AAAAAA; 
	border-top: 1px solid #ccc; 
	font-size: 0.9em; 
} 


#playlist li{
	cursor:pointer;
}

#playlist li.active{
	font-weight:bold;
	background:#EEEEEE;
	color:#000000;
}
#download {
	position:absolute;
	left:370px;
}
.tracker {
    height: 15px;
    left: 20px;
    position: absolute;
    top: 126px;
    width: 285px;
}
.ui-slider-range {
    height: 100%;
    position: absolute;
    top: 0;
}
.ui-slider-handle {
    cursor: pointer;
    height: 10px;
    margin-left: -5px;
    position: absolute;
    top: 2px;
    width: 10px;
    z-index: 2;
}
.volume .ui-slider-handle {
    height: 13px;
    width: 13px;
}


</style>

</head>
<body>
<div id="wrapper">
	<!-- Affichage de l'image de couverture -->
	<div class="">
		<div id="cover"></div>
	</div>
	<div class="clear"></div>
	<!-- Text Artistes - Titres - Autres -->
					<div class="text">
						<h3 id="songArtist">Artist</h3>
						<h4 id="songTrack">Titres</h4>
					</div>
					<div id="textsong-count"></div>	
									
					<!-- Début affichage du numéro de piste -->
					<div id="playStart"></div>	
					
					<!-- Time -->
					<div class="time">
						<div id="currentTime">--:--:--</div>
						<div id="currentDuration">--:--:--</div>
					</div>				
					
					<!-- Seek Bar -->
					<!--<div class="progress-bar">-->
						<input id="handle" class="fill" type="range" min="0" max="100" value="0">				
						<!--	<div id="handle" class="handle"></div>
					</div>-->
					
					<!-- Buttons Navigation Player -->
					<div class="btns">
						<i id="prev" class="fa fa-fast-backward"></i>							
						<i id="fastprev" class="fa fa-backward"></i>					
						<i id="play" class="fa fa-play"></i> 					
						<i id="stop" class="fa fa-stop"></i> 
						<i id="fastnext" class="fa fa-forward"></i>					
						<i id="next" class="fa fa-fast-forward"></i>
						<br>
						<br>
						<i id="playlistShow" class="fas fa-list"></i>						
						<i id="retweet" class="fa fa-retweet"></i>						
						
						<i id="random" class="fa fa-random"></i>
						<i id="muted" class="fas fa-volume-up"></i>																							 
					</div>
					
					<!-- Volume -->
					<input id="volumeSlider" type="range" min="0" max="100" value="100" step="1">					
					
						
					<!-- Playlist -->
						<ol id="playlist" class="hidden">
							<li class="active" song="MCKEY TRAXX - Come With Me.mp3" cover="Poster2.jpg" artist="Mickey Traxx" title="Come With Me">Mickey Traxx - Come With Me<span id="download"><i class="fas fa-cloud-download-alt"></i></span></li>
							<li song="Jousboxx-BuzzerBeater.ogg" cover="Poster3.jpg" artist="Jousboxx" title="BuzzerBeater">Jousboxx - BuzzerBeater<span id="download"><i class="fas fa-cloud-download-alt"></i></span></li>
							<li song="unfa-Spoken.ogg" cover="Poster1.jpg" artist="Unfa" title="Poken">Unfa - Spoken<span id="download"><i class="fas fa-cloud-download-alt"></i></span></li>
							<li class="active" song="Dejans - Back-Track.mp3" cover="Poster2.jpg" artist="Dejans" title="Back-Track">Dejans - Back-Track</li>
							<li song="Dejans - Fade To White.mp3" cover="Poster3.jpg" artist="Dejans" title="Fade To White">Dejans - Fade To White</li>
							<li song="Teurret - Gladiator.mp3" cover="Poster1.jpg" artist="Teurret" title="Gladiator">Teurret - Gladiator</li>
							<li song="http://192.168.1.15/WebSite/Project/playlist/Albums/Ang%c3%a8le/Brol/04%20Tout%20oublier%20(feat.%20Romeo%20Elvis).mp3" cover="Poster2.jpg" artist="Angèle Feat. Roméo Elvis" title="Tout Oublier ">Angèle Feat. Roméo Elvis - Tout Oublier<span id="download"><i class="fas fa-cloud-download-alt"></i></span></li>			<li song="Ava Max - Kings & Queens.m4a" cover="Poster2.jpg" artist="Ava Max" title="Kings & Queens ">Ava Max - Kings & Queens</li>				
						</ol>
</div>
  

<script>

</script>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<script src="playerplaylist-main2.js"></script>


</html>


Mon code JQuery : 
var audio;

initAudio($('#playlist li:first-child'));

function initAudio(element){
	var song = element.attr('song');
	var title = element.attr('title');
	var cover = element.attr('cover');
	var artist = element.attr('artist');      
	
    var len = $("#playlist").find('song');	
	var currentSong = $("li:active").index();
			
	//Compte le nombre de piste audio
	var countSong = $("#playlist").find('li').length;
	var event = $("#playlist li").find('active').length;	
	$('#playStart').text("Play "+ (1) + " / " + countSong);		
   		
	//Create audio object => audio = ('media/'+ song);	
	audio = new Audio(song);
	
	
   	$(audio).bind('ended',function(){ switchTrack(); });
   					
	//Insert audio info
	$('#songArtist').text(artist);
	$('#songTrack').text(title);
		
	
	//Insert song cover attr('src','images/covers/'+cover) 
	//$('#cover').attr('src','./Custom-Audio-Player-master/'+cover);
	$('#cover').css('background-image','url('+cover+')');	
	
	$('#playlist li').removeClass('active');
	element.addClass('active');		
}



	
//Lecture en boucle
$('#retweet').click(function(){	
   $(this).removeClass('fa-retweet');
   $(this).addClass('fa-repeat-1');  
   audio.play();
   showDuration();    
});

//Play button
$('#play').click(function(){
	if($(this).hasClass('fa-play'))
   {  	   	
     $(this).removeClass('fa-play');
     $(this).addClass('fa-pause');
     audio.play();
     showDuration();
   }
  else
   {
     $(this).removeClass('fa-pause');
     $(this).addClass('fa-play');
     audio.pause();
   }
});

//Stop button
$('#stop').click(function(){
	$('#play').addClass('fa-play');	
	audio.pause();
	audio.currentTime = 0;
});

//Next button
$('#next').click(function(){
	audio.pause();
	var next = $('#playlist li.active').next();
	if(next.length == 0){
		next = $('#playlist li:first-child');
	}
	initAudio(next);
	audio.play();
	showDuration();
});

//Prev button
$('#prev').click(function(){
	audio.pause();
	var prev = $('#playlist li.active').prev();
	if(prev.length == 0){
		prev = $('#playlist li:last-child');
	}
	initAudio(prev);
	audio.play();
	showDuration();
});

//FastNext button
$('#fastnext').click(function(){
	audio.currentTime += parseInt(10);
});

//FastPrev button
$('#fastprev').click(function(){
	audio.currentTime -= parseInt(10);
});

//Affiché masquer la playlist

$("#playlistShow").click(function(){
    $("#playlist").slideToggle(2000);
});



//Playlist song click
$('#playlist li').click(function(){
	audio.pause();
	initAudio($(this));
	if(audio.paused){
		audio.play();
		showDuration();
		$('#play').removeClass('fa-play');
     	$('#play').addClass('fa-pause');		
	}else{
		audio.pause();
		$('#play').removeClass('fa-pause');
     	$('#play').addClass('fa-play');		
	}
	$('#download').click(function(){	
		$('#download').attr("src",+audio.src);
	});	
});


//Volume control
//Barre de changement du volume
$('#volumeSlider').change(function(){
        audio.volume = parseFloat(this.value / 100);
        if(this.value == 0){
        	$('#muted').removeClass('fa-volume-up');
     		$('#muted').addClass('fa-volume-mute');        
     	}else{
     		$('#muted').removeClass('fa-volume-mute');
     		$('#muted').addClass('fa-volume-up');     	
     	}	
});
//bouton arrêt du volume
$('#muted').click(function(){
		if(audio.muted){
		    audio.muted = false;
		    $(this).removeClass('fa-volume-mute');
     		$(this).addClass('fa-volume-up');
     		$('#volumeSlider') = parseFloat(this.value / 100);
	    } else {
		    audio.muted = true;
		    $(this).removeClass('fa-volume-up');
     		$(this).addClass('fa-volume-mute');
     		audio.volume = 0;
	    }
	});

//Lecture continu de la playlist	
function switchTrack(){
		audio.pause();
	var next = $('#playlist li.active').next();
	if(next.length == 0){
		next = $('#playlist li:first-child');
	}
	initAudio(next);
	audio.play();
	showDuration();
}	
	    
//Time/Duration
function showDuration(){	
	
	$(audio).bind('timeupdate',function(){
  		if (!isNaN(audio.duration)) {	
			//Get hours and minutes
			var currentHours = Math.floor(audio.currentTime / 3600);
			var currentMinutes = Math.floor(audio.currentTime / 60);	
			var currentSeconds = Math.floor(audio.currentTime - currentMinutes * 60);		
				
			var durationHours = Math.floor(audio.duration / 3600);	
			var durationMinutes = Math.floor(audio.duration / 60);	
			var durationSeconds = Math.floor(audio.duration - durationMinutes * 60);
			
			if(currentSeconds < 10){
				currentSeconds = '0'+currentSeconds;
			}
			if(currentMinutes < 10){
				currentMinutes = '0'+currentMinutes;
			}
			if(currentHours < 10){
				currentHours = '0'+currentHours;
			}		
					
			if(durationSeconds < 10){
				durationSeconds = '0'+durationSeconds;
			}
			if(durationMinutes < 10){
				durationMinutes = '0'+durationMinutes;
			}
			if(durationHours < 10){
				durationHours = '0'+durationHours;
			}	
			
			$('#currentTime').text(currentHours + ':' + currentMinutes + ':' + currentSeconds);	
			$('#currentDuration').text(durationHours + ':' + durationMinutes + ':' + durationSeconds);	
				
			var value = 0;
			if(audio.currentTime > 0){
				value = parseFloat((100 / audio.duration) * audio.currentTime);
				$('#handle').css('width',value+'%');				
			}
  		}
	});
}


Pouvez-vous m'aider S'il Vous Plait.

Configuration: Macintosh / Firefox 84.0
A voir également:

2 réponses

Réponse 1 / 2
Yuushi_Sato Messages postés 104 Date d'inscription mardi 1 décembre 2009 Statut Membre Dernière intervention 18 février 2021 1
13 févr. 2021 à 07:42
Mon problème pour l'affichage de la piste en court se situe ici : 
$('#playStart').text("Play "+ (1) + " / " + countSong);

Je pense qu'il faut faire en sorte qu'il sache sur la quelle ligne LI il est, mais la je bug complètement.

Pour la barre de progression : 
var value = 0;
			if(audio.currentTime > 0){
				value = parseFloat((100 / audio.duration) * audio.currentTime);
				$('#handle').css('width',value+'%');				
			}


Il faut que je puisse avancer dans le temps sur la barre, mais la aussi je bug.
0
Réponse 2 / 2
Yuushi_Sato Messages postés 104 Date d'inscription mardi 1 décembre 2009 Statut Membre Dernière intervention 18 février 2021 1
18 févr. 2021 à 08:09
Bonjour à tous

Mes problèmes sont régler, mais il me reste encore un problème.
J'aimerais faire une lecture aléatoire en me basant sur la playlist en html, mais je n'y arrive pas.

Voici mon code : 
var audio;

initAudio($('#playlist li:first-child'));

function initAudio(element){
	var song = element.attr('data-song');
	var title = element.attr('data-title');
	var cover = element.attr('data-cover');
	var artist = element.attr('data-artist');
	var album = element.attr('data-album');	 	
   	
   	var progressBar = element.attr('progressbar');   	
   		
	//Create audio object => audio = new Audio('media/'+ song);	
	audio = new Audio(song);
	
   	$(audio).bind('ended',function(){ switchTrack(); });
   					
	//Insert audio info
	$('#songArtist').text(artist);
	$('#songTrack').text(title);
	$('#songAlbum').text(album);	
	
	autoplay: true;	
	
	//Insert song cover attr('src','images/covers/'+cover) 
	//$('#cover').attr('src','./Custom-Audio-Player-master/'+cover);
	$('#cover').css('background-image','url('+cover+')');
	$('#cover').attr('src',cover);		
	
	$('#playlist li').removeClass('active');
	element.addClass('active');		
}

$('#playlist li').click(function(){ 
	var linkList = $("#playlist").find("li"); 
	var index = linkList.index($(this)); 
	var countSong = $("#playlist").find("li").length;
	$("#playStart").text("Play " + (index + 1) + " / " + countSong);		   
});	

//Lecture aléatoire de la playlist
$("#random").click(function(){  
	audio.random = true;       
});
function randomPlay(){
	var countSong = $("#playlist").find("li").length
    var x = Math.floor((Math.random() * countSong) + 1);
}
    
//Lecture en boucle
$('#retweet').click(function(){	
	if ($(this).hasClass('fa-redo'))
	{
	    audio.loop = true;
	    audio.play();
	    
	seekUpdate();	    
	    $('#retweet').removeClass('fa-redo');
    	$('#retweet').addClass('fa-sync');
    	$('#play').removeClass('fa-play');
     	$('#play').addClass('fa-pause');    	
    	$('#retweet').css('color','#FFFFFF');    		    
	}
	else
	{
		audio.loop = false;
	    audio.addEventListener('ended', function(){
			audio.pause();	
	        audio.currentTime = 0;
	        audio.play();
	    }, false);
	    $('#retweet').removeClass('fa-sync');
    	$('#retweet').addClass('fa-redo');	    
	    
	}	     	
});

//Play button
$('#play').click(function(){
	if($(this).hasClass('fa-play'))
   {  	   	
     $(this).removeClass('fa-play');
     $(this).addClass('fa-pause');
     audio.play();
     seekUpdate();
   }else{
     $(this).removeClass('fa-pause');
     $(this).addClass('fa-play');
     audio.pause();
   }
});

//Stop button
$('#stop').click(function(){
	$('#play').addClass('fa-play');	
	audio.pause();
	audio.currentTime = 0;
});

//Next button
$('#next').click(function(){
	audio.pause();
	var next = $('#playlist li.active').next();
	if(next.length == 0){
		next = $('#playlist li:first-child');
	}
	$('#play').removeClass('fa-play');
    $('#play').addClass('fa-pause');	
	initAudio(next);
	audio.play();
	seekUpdate();
});

//Prev button
$('#prev').click(function(){
	audio.pause();
	var prev = $('#playlist li.active').prev();
	if(prev.length == 0){
		prev = $('#playlist li:last-child');
	}
	$('#play').removeClass('fa-play');
    $('#play').addClass('fa-pause');	
	initAudio(prev);
	audio.play();
	seekUpdate();
});

//FastNext button
$('#fastnext').click(function(){
	audio.currentTime += parseInt(10);
});

//FastPrev button
$('#fastprev').click(function(){
	audio.currentTime -= parseInt(10);
});

//Affiché masquer la playlist
$("#playlist").hide();

$("#playlistShow").click(function(){
    $("#playlist").slideToggle(2000);
});

//Playlist song click
$('#playlist li').click(function(){
	audio.pause();
	initAudio($(this));
	if(audio.paused){
		audio.play();
		seekUpdate();
		$('#play').removeClass('fa-play');
     	$('#play').addClass('fa-pause');		
	}else{
		audio.pause();
		$('#play').removeClass('fa-pause');
     	$('#play').addClass('fa-play');		
	}
	
	$('#download').click(function(){	
		$('#download').attr("src",+audio.src);
	});	
});

//Volume control
//Barre de changement du volume
$('#volume-0').change(function(){
  $audio.volume = 0.0;
});
$('#volume-25').change(function(){
  $audio.volume = 0.25;
});

$('#volume-50').change(function(){
  $audio.volume = 0.5;
});

$('#volume-75').change(function(){
  $audio.volume = 0.75;
});

$('#volume-100').click(function(){
  $audio.volume = 1.0;
});
//bouton arrêt du volume
$('#muted').click(function(){
		if(audio.muted){
		    audio.muted = false;
		    $(this).removeClass('fa-volume-mute');
     		$(this).addClass('fa-volume-up');
     		$('#volumeSlider') = parseFloat(this.value / 100);
	    } else {
		    audio.muted = true;
		    $(this).removeClass('fa-volume-up');
     		$(this).addClass('fa-volume-mute');
     		audio.volume = 0;
	    }
	});

//Lecture continu de la playlist	
function switchTrack(){
		audio.pause();
	var next = $('#playlist li.active').next();
	if(next.length == 0){
		next = $('#playlist li:first-child');
	}
	initAudio(next);
	audio.play();
	seekUpdate();
}        

//Barre de progression cliquable
$("#custom-seekbar").bind("click", function(e){
    var offset = $(this).offset();
    var left = (e.pageX - offset.left);
    var totalWidth = $("#custom-seekbar").width();
    var percentage = ( left / totalWidth );
    var audioTime = audio.duration * percentage;
    audio.currentTime = audioTime;
});           		
	    
//Time/Duration
function seekUpdate(){	
		
	$(audio).bind('timeupdate',function(){
  		if (!isNaN(audio.duration)) {	 			
  			
			//Get hours and minutes
			var currentHours = Math.floor(audio.currentTime / 3600);
			var currentMinutes = Math.floor(audio.currentTime / 60);	
			var currentSeconds = Math.floor(audio.currentTime - currentMinutes * 60);		
				
			var durationHours = Math.floor(audio.duration / 3600);	
			var durationMinutes = Math.floor(audio.duration / 60);	
			var durationSeconds = Math.floor(audio.duration - durationMinutes * 60);
			
			if(currentSeconds < 10){
				currentSeconds = '0'+currentSeconds;
			}
			if(currentMinutes < 10){
				currentMinutes = '0'+currentMinutes;
			}
			if(currentHours < 10){
				currentHours = '0'+currentHours;
			}		
					
			if(durationSeconds < 10){
				durationSeconds = '0'+durationSeconds;
			}
			if(durationMinutes < 10){
				durationMinutes = '0'+durationMinutes;
			}
			if(durationHours < 10){
				durationHours = '0'+durationHours;
			}	
			
			$('#currentTime').text(currentHours + ':' + currentMinutes + ':' + currentSeconds);	
			$('#currentDuration').text(durationHours + ':' + durationMinutes + ':' + durationSeconds);	
			
			var percentage = ( audio.currentTime / audio.duration ) * 100;
  			$("#custom-seekbar span").css("width", percentage+"%");			
						
  		}
	});
}

La progression est opérationnel, la lecture en boucle aussi.
Les problèmes sont sur la fonction mute qui ne démute pas, sur la fonction d'affichage de la piste en cours et de la fonction lecture aléatoire.
je donne le code html : 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
		  	<!-- Load FontAwesome icons -->
		  	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
		  	<link rel="stylesheet" href="test-player1.css">	
		<title>Media Player - Ipod</title>
	</head>
	<body>
		<div class="bg">
			<section class="player">
				<div class="container">
				
					<!-- Top Icons-->
					<div class="top-icons">
						<i class="far fa-heart"></i>
						<i id="playlistShow" class="fas fa-list-ol"></i>
					</div>
					
					<!-- Images Cover -->
					<div class="img">
						<img id="cover" src="" alt="">
					</div>
					
					<!-- Text Artistes - Titres - Autres -->
					<div class="text">
						<h3 id="songArtist">Artist</h3>
						<h4 id="songTrack">Titres</h4>
						<h6 id="songAlbum">Albums</h6>						
					</div>
					
					<!-- Time -->
					<div class="time">
						<div id="currentTime">--:--:--</div>
						<div id="currentDuration">--:--:--</div>	
					</div>
					
					<!-- Seek Bar -->
					<div id="custom-seekbar">
			  			<span></span>		  			
					</div>
					
					<!-- Buttons Navigation Player -->
					<div class="btns">
						<i id="retweet" class="fa fa-redo"></i>	
						<i id="prev" class="fa fa-fast-backward"></i>							
						<i id="fastprev" class="fa fa-backward"></i>					
						<i id="play" class="fa fa-play"></i> 					
						<i id="stop" class="fa fa-stop"></i> 
						<i id="fastnext" class="fa fa-forward"></i>					
						<i id="next" class="fa fa-fast-forward"></i>
						<i id="random" class="fa fa-random"></i>					 
					</div>
				</div>
				<!-- Playlist -->
				<ol id="playlist" class="hidden">
					<li class="active" data-song="./Audio/Sash - Ecuador (Single Mix).mp3" data-cover="./Covers/Poster3.jpg" data-artist="Sash!" data-title="Ecuador (Single Mix)" data-album="Ecuador [Single]">Sash! - Ecuador (Single Mix)</li>				
					<li data-song="./Audio/Clean Bandit - Solo (feat. Demi Lovato).m4a" data-cover="./Covers/Poster5.jpg" data-artist="Clean Bandit Feat. Demi Lovato" data-title="Solo" data-album="What Is Love ?">Clean Bandit Feat. Demi Lovato - Solo</li>							<li data-song="./Audio/EnV - Heaven.mp3" data-cover="./Covers/Poster3.jpg" data-artist="EnV" data-title="Heaven" data-album="">EnV - Heaven</li>
										
					<li data-song="./Audio/MCKEY TRAXX - Come With Me.mp3" data-cover="./Covers/Poster3.jpg" data-artist="Mickey Traxx" data-title="Come With Me" data-album="">Mickey Traxx - Come With Me</li>
					<li data-song="./Audio/Aron Chupa Feat. Little Sis Nora - The Woodchuck Song.m4a" data-cover="./Covers/Poster2.jpg" data-artist="Aron Chupa Feat. Little Sis Nora" data-title="The Woodchuck Son" data-album="Hits Albums">Aron Chupa Feat. Little Sis Nora - The Woodchuck Son</li>
					<li data-song="./Audio/Ava Max - Take You To Hell.m4a" data-cover="./Covers/Poster6.jpg" data-artist="Ava Max" data-title="Take You To Hell" data-album="Heaven & Hell">Ava Max - Take You To Hell</li>								
					<li data-song="./Audio/Jousboxx-BuzzerBeater.ogg" data-cover="./Covers/Poster3.jpg" data-artist="Jousboxx" data-title="BuzzerBeater" data-album="">Jousboxx - BuzzerBeater</li>
					<li data-song="./Audio/Clean Bandit - Rockabye (feat. Sean Paul & Anne-Marie).m4a" data-cover="./Covers/Poster5.jpg" data-artist="Clean Bandit Feat. Sean Paul & Anne-Marie" data-title="Rockabye" data-album="What Is Love ?">Clean Bandit Feat. Sean Paul & Anne-Marie - Rockabye</li>
					<li data-song="./Audio/Sash - Ganbareh (Single Edit).mp3" data-cover="./Covers/Poster3.jpg" data-artist="Sash!" data-title="Ganbareh (Single Edit)" data-album="Ganbareh [Single]">Sash! - Ganbareh (Single Edit)</li>				
										
					<li data-song="./Audio/Alan Walker Feat.Ava Max - Alone, Pt. II (Live at Château de Fontainebleau).m4a" data-cover="./Covers/Poster4.jpg" data-artist="Alan Walker Feat.Ava Max" data-title="Alone, Pt. II (Live at Château de Fontainebleau)" data-album="Alone Pt. II">Alan Walker Feat.Ava Max - Alone, Pt. II (Live at Château de Fontainebleau)</li>							
					<li data-song="http://192.168.1.15/WebSite/Project/playlist/Albums/Ang%c3%a8le/Brol/04%20Tout%20oublier%20(feat.%20Romeo%20Elvis).mp3" data-cover="./Covers/Poster7.jpg" data-artist="Angèle Feat. Roméo Elvis" data-title="Tout Oublier " data-album="">Angèle Feat. Roméo Elvis - Tout Oublier</li>			
					<li data-song="./Audio/Ava Max - Kings & Queens.m4a" data-cover="./Covers/Poster6.jpg" data-artist="Ava Max" data-title="Kings & Queens " data-album="Heaven & Hell">Ava Max - Kings & Queens</li>				
				</ol>
			</section>
		</div>
	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<script src="playerplaylist-main2.js"></script>
</html>

et le css qui va avec: 
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap');


  •  {	margin:0;	padding:0;	box-sizing: border-box;}body {	font-family:'Nunito',sans-serif;	font-size:16px;	width:100%	height:100%;	overflow:hidden;	color:#FFFFF;	font-weight:200;}.bg {	background-color:#808080;	height100vh;	height: 100vh;}img {	max-width: 100%;}.player {	width:400px;	min-height:570px;	position:absolute;	top: 45%;	left: 50%;	transform: translate(-50%,-50%);	background:rgba(255, 255, 255, 0.1);	border-radius: 10px;	margin: 10px 0 0 0;	box-shadow: 3px 3px 50px rgba(0, 0, 0, 0.5), -3px -3px 50px rgba(0, 0, 0, 0.5);}.container {	width:90%;	margin: 0 auto;	overflow:hidden;}.top-icons {	display:flex;	justify-content: space-between;	margin: 10px 0}.top-icons i {	color:#FFFFFF;	font-size: 1.3em}.top-icons i:hover {	color: #b9B6B6;	tansition: all 0.2s ease-in-out;}.img { 	border-top: 3px solid #FFFFFF;	border-radius: 50%;		} .img img { 	margin: 50px 0 0 55px;	width:70%;		height:240px;	border-radius: 50%;	transition: all 0.4s ease-in-out;	cursor:pointer;	}.img img:hover { 	box-shadow: 3px 3px 50px rgba(0, 0, 0, 0.5), -3px -3px 50px rgba(0, 0, 0, 0.5);	}#cover {	background-image: url("");}.text { 	text-align:center;	margin:10px 0;}.text h3 { 	font-size:1em;	font-weight:bold;	}.text h4{ 	font-size:0.9em;	color:#A52A2A;	}.text h6{ 	font-size:0.8em;	font-style:italic;	color:#ECECEC;	}.time {	display:flex;	justify-content:space-between;	margin:20px 0 0 0;}#currentTime, #currentDuration  {	  color:#FFFFFF;	  font-size: 12px;	  text-decoration:none;	  font-weight:bold;}.seek { 	width: 100%;	height: 4px;	background: rgba(155, 155, 155, 0.3);		margin:5px 0;	position:relative;}.fill { 	width:65%;	height:4px;	background: rgba(255, 255, 255, 0.7);	}.handle { 	width:10px;	height:10px;	background: rgba(255, 255, 255, 0.8);	border-radius:50%;	position:absolute;	top:-3px;	right:120px;	}#custom-seekbar{    cursor: pointer;  height: 8px;  border:1px solid #CCCCCC;  border-radius:4px;  overflow: hidden;  position: relative;  width: 100%;  margin:5px 0;}#custom-seekbar span{  background-color: #FFFFFF;  border-radius:4px;    position: absolute;  top: 0;  left: 0;  height: 8px;  width: 0px;  background-image: -webkit-linear-gradient(-45deg, transparent 25%, rgba(155, 155, 155, 0.3) 25%, rgba(155, 155, 155, 0.3) 50%, transparent 50%, transparent 75%, rgba(155, 155, 155, 0.3) 75%, rgba(155, 155, 155, 0.3));  background-image: linear-gradient(-45deg, transparent 25%, rgba(155, 155, 155, 0.3) 25%, rgba(155, 155, 155, 0.3) 50%, transparent 50%, transparent 75%, rgba(155, 155, 155, 0.3) 75%, rgba(155, 155, 155, 0.3));  background-size: 40px 40px;    -moz-animation: progress 8s linear infinite;  animation: progress 8s linear infinite;      }.btns { 	margin:40px 0;	text-align:center;}.btns i { 	color: #FFFFFF;	font-size:1.2em;	margin: 0 6px;	transition: all 0.3s ease-in-out;}.btns i:hover { 	color: #b9b6b6;}.btns i:nth-child(1) , .btns i:nth-child(8) { 	opacity: 0.6;}.btns i:nth-child(1):hover , .btns i:nth-child(8):hover { 	opacity:1;	color: #FFFFFF;}.btns i:nth-child(4) { 	border: 2px solid #FFFFFF;	padding:15px 22px;	border-radius: 50%;}#playlistShow {	text-align:left;	opacity:1;	}#playlistShow i:hover {	text-align:left;	opacity:1;	} #playlist{ 	height:200px;	padding: 0px; 	margin: 0px; 	list-style: decimal-leading-zero inside; 	color: #FFFFFF; 	border-top: 1px solid #ccc; 	font-size: 0.9em;	padding:6px;	border-radius: 10px;		 } .hidden{	height:190px;	overflow-y:scroll;	-webkit-overflow-scrolling: touch;	border:1px solid gray;		border-bottom-radius::20px;}#playlist li { 	position: relative; 	margin: 0px; 	padding: 9px 4px 10px; 	border-bottom: 1px solid #ccc; 	cursor: pointer; }#playlist li:nth-child(odd){  	background:#696969;}#playlist li.active{	font-weight:bold;	background:#EEEEEE;	color:#000000;}


Je sais que pour une lecture aléatoire il faut utiliser ce code :
var audio = Math.floor(Math.random() * (collection.length));
Sachant que collection .length permet de retourner le nombre de piste audio.

J'attends un petit coup de main SVP.
Grand Merci D'AVANCE.
0

Discussions similaires

Branchez le câble réseau du player freebox
Marie -
Frezdesboas -

3 réponses
Câble réseau player freebox
Madiba -
brupala -

9 réponses
comment trouver l'url de IPTV ?
Metler -
Papounet17000 -

1 réponse