Bonjour à tous,

je suis bien débutant et je n'arrive pas à résoudre un problème... (au passage, je n'ai pas codé moi-même le css et le script).

Je voudrais mettre 2 ou plus de player sur la même page. Je n'arrive pour le moment qu'à les ajouter, mais quand je lance l'un d'eux, un seul son est joué (le premier).

Merci pour votre aide !

H.

Voici le code pour un seul player :



	<link rel="stylesheet" type="text/css" href="son.css"> 
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	</head>

	<body>
		<div class="content-son">
		
			<header><h1>titre de l'oeuvre/artiste</h1></header>
		
			<div class="contener-son">
				<div class="ghost-cont"></div>
				<div class="progress"></div>
				<div class="play-pause" onClick="togglePlay()"></div>
				<!-- tu colles le lien de ta musique sur ton ftp là dessous -->
				<audio id="audio" src="1.mp3" preload="auto"></audio>
			</div>
		</div>
       
	
		<script type="text/javascript">

			var myAudio = document.getElementById("audio");
			var isPlaying = false;
			
			function togglePlay() {
			  if (isPlaying) {
			    myAudio.pause()
			  } else {
			    myAudio.play();
			  }
			};
			myAudio.onplaying = function() {
			  isPlaying = true;
			  $('.play-pause').css("background-image", "url(pause.png)");  
			};
			myAudio.onpause = function() {
			  isPlaying = false;
			  $('.play-pause').css("background-image", "url(play.png)");
			};

			// Update the seek bar as the video plays
			myAudio.ontimeupdate = function() {myFunction()};

			$(".ghost-cont").click(function(e){
   				var parentOffset = $(this).offset(); //if you really just want the current element's offset
   				var contenerLenght = $(".contener-son").width();
   				var relX = e.pageX - parentOffset.left;
   				$(".progress").width(relX);	
				myAudio.currentTime = myAudio.duration * relX / contenerLenght;
			});

			function myFunction() {
			  // Calculate the slider value
			  	var contenerLenght = $(".ghost-cont").width();
				var value = myAudio.currentTime / myAudio.duration * contenerLenght;
				$(".progress").width(value);
				console.log(contenerLenght);
				console.log($(".progress").width());

				if ($(".ghost-cont").width() == $(".progress").width()) {
					togglePlay();
					$(".progress").width(0);
					myAudio.currentTime = 0;
				}
			};
		</script>

	</body>
</html>
as-tu mis un id à chacun et ajouté dans le javascript ?

<audio id="audio-02" src="2xx.mp3" preload="auto"></audio>

Modifié par Jean-Pierre-Bruneau (26 Nov 2019 - 19:30)
Donc je cherche toujours comment modifier le javascript, afin qu'il ne joue pas un seul media sur les deux players... si quelqu'un sait cela ? merci !!