Audio barre de progression
chabinot
Messages postés
391
Statut
Membre
-
jordane45 Messages postés 40050 Statut Modérateur -
jordane45 Messages postés 40050 Statut Modérateur -
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
A voir également:
- Audio barre de progression
- Musique audio - Télécharger - Lecture & Playlists
- Realtek audio driver - Télécharger - Pilotes & Matériel
- Windows 11 barre des taches a gauche - Guide
- Transcription audio en texte word gratuit - Guide
- Extraire audio mp4 - Guide
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".
Bonjour,
Il faut, comme le dit Pitet ..modifier la valeur de l'attribut MAX de ton input
progressBar.setAttribute('max',audio.duration);
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
