Audio barre de progression
Bonjour,
J'ai un petit problème sur la barre de progression de l'audio player que je suis en train de coder.
Le souci est que la barre s'arrête à 1:40 alors que le morceau fait 3:17.
Voilà le code
1 - html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Player</title>
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<!-- Icônes -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'>
<!-- Styles CSS -->
<link rel="stylesheet" href="./css/styles.css">
<!-- Scripts -->
<script src="js/date.prototype.js" defer></script>
<script src="js/date.time.js" defer></script>
<script src="js/audio.js" defer></script>
</head>
<body>
<header>
<div class="top-header">
<div class="datetime">
<span class="date"></span><br>
<span class="day"></span>
<span class="week"></span><br>
<span class="reste"></span>
</div>
<h1><a href="">Ma musique</a></h1>
<div class="time"></div>
</div>
</header>
<hr>
<section>
<div class="audio-container">
<audio src="./audio/sardou2.mp3"></audio><br>
<div class="progress-bar">
<input type="range" id="progress" min="0" max="100" value="0">
</div>
<div class="audio-times">
<span class="elapsed">0.00</span>
<span class="audio-duration">0.00</span>
</div>
<div class="icon-btn">
<i class="fa-sharp fa-solid fa-backward button prev-button"></i>
<i class="fa-regular fa-circle-play button play-button"></i>
<i class="fa-regular fa-circle-pause button pause-button"></i>
<i class="fa-regular fa-circle-stop button stop-button"></i>
<i class="fa-sharp fa-solid fa-forward button next-button"></i>
</div>
<div class="marquee">
<span>1 ~ Michel Sardou ~ Le Connemara</span>
</div>
</div>
</section>
<footer class="fixed-bottom">
<hr>
<p class="text-center">
Copyright © Document(2022 - <span class="cpy"></span>). Tous droits réservés
</p>
</footer>
</body>
</html>
2 - css
.top-header {
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Roboto', sans-serif;
font-style: italic;
}
.top-header .datetime {
margin-left: 5px;
}
.top-header h1 {
font-size: 1.75rem;
font-weight: 400;
color: #777;
}
.top-header h1 a {
color: inherit;
text-decoration: none;
}
.top-header h1 a:hover {
opacity: 0.7;
}
.top-header .time {
margin-right: 5px;
text-transform: lowercase;
}
/* Audio */
.audio-container {
margin: 0 auto;
width: 400px;
height: 200px;
border: 4px solid #00f;
border-radius: 12px;
}
.audio-container audio {
margin-top: 10px;
margin-left: 12%;
}
.audio-container .progress-bar {
margin-left: 5%;
width: 90%;
background-color: #ccc;
border-radius: 8px;
}
.audio-times {
margin-left: 5%;
display: flex;
justify-content: space-between;
width: 90%;
font-style: italic;
}
.icon-btn {
margin-left: 5%;
display: flex;
justify-content: center;
align-items: center;
width: 90%;
height: 60px;
border: 2px solid #00f;
border-radius: 10px;
}
.icon-btn .button {
margin-right: 5px;
font-size: 1.5rem;
cursor: pointer;
}
.icon-btn .button:hover {
color: purple;
}
.pause-button {
display: none;
}
.marquee {
width: 400px;
bottom: -10px;
font-size: 1.25rem;
font-style: italic;
font-weight: 500;
color: #00f;
white-space: nowrap;
overflow: hidden;
}
.marquee span {
display: inline-block;
font-style: italic;
padding-left: 100%;
animation: marquee 15s linear infinite;
animation-play-state: running;
}
.artist {
font-style: italic;
}
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
3 - javascript
// On active le nécessaire
const audio = document.querySelector('audio'),
audioDuration = document.querySelector('.audio-duration'),
progressBar = document.querySelector('#progress')
currTime = document.querySelector('.elapsed'),
playBtn = document.querySelector('.play-button'),
pauseBtn = document.querySelector('.pause-button'),
stopBtn = document.querySelector('.stop-button')
// On affiche la durée du mp3
audioDuration.textContent = rtvDurs(audio.duration)
// On gère le bouton play
playBtn.addEventListener("click", () => {
pauseBtn.style.display = 'initial'
playBtn.style.display = 'none'
audio.play()
})
// On gère le bouton pause
pauseBtn.addEventListener("click", () => {
playBtn.style.display = 'initial'
pauseBtn.style.display = 'none'
audio.pause()
})
// On affiche la barre de progression
audio.addEventListener("timeupdate", function () {
progressBar.value = this.currentTime
currTime.textContent = rtvDurs(this.currentTime)
})
progressBar.addEventListener("input", function () {
currTime.textContent = rtvDurs(this.value)
audio.currentTime = this.value
})
// On transforme la durée du mp3 en heures, minutes, secondes
function rtvDurs (value) {
if (value < 3600) {
let minutes = Math.floor(value / 60),
seconds = Math.floor(value % 60).toString().padStart(2, '0')
return `${minutes}:${seconds}`
} else {
let hours = Math.floor(value / 3600)
minutes = Math.floor(value % 3600 / 60).toString().padStart(2, '0')
seconds = Math.floor(value % 3600 % 60).toString().padStart(2, '0')
return `${hours}:${minutes}:${seconds}`
}
}
Le souci provient de l'action
audio.addEventListener("timeupdate", function () {
progressBar.value = this.currentTime
currTime.textContent = rtvDurs(this.currentTime)
})
et forcément l'action
progressBar.addEventListener("input", function () {
currTime.textContent = rtvDurs(this.value)
audio.currentTime = this.value
})
ne va qu'à 1:40.
Merci de votre aide
Cordialement
Windows / Chrome 112.0.0.0
5 réponses
-
Bonjour,
La barre s'arrête à 1:40 (100 secondes) car la balise input type="range" possède un attribut max="100".
-
Merci,
Mais que proposes tu pour y remédier. Je suis un peu novice en javascript et en html.
-
Merci encore.
J'ai trouvé la solution grâce à chatgpt.
-
Modérateur
Bonjour,
Il faut, comme le dit Pitet ..modifier la valeur de l'attribut MAX de ton input
progressBar.setAttribute('max',audio.duration);
-
Merci,
J'avais trouvé grâce à "ChatGPT". qui m'a donné la même réponse et comment le coder.
