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 :
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>