Sujet Précédent Sujet Suivant

Audio barre de progression

Fermé
chabinot Messages postés 322 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2024 - 19 avril 2023 à 16:28
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 - 21 avril 2023 à 19:59

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

5 réponses

Réponse 1 / 5
Pitet
21 avril 2023 à 11:01

Bonjour,

La barre s'arrête à 1:40 (100 secondes) car la balise input type="range" possède un attribut max="100".
0
Réponse 2 / 5
chabinot Messages postés 322 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2024 16
21 avril 2023 à 14:23

Merci,

Mais que proposes tu pour y remédier. Je suis un peu novice en javascript et en html.
0
Réponse 3 / 5
chabinot Messages postés 322 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2024 16
21 avril 2023 à 16:30

Merci encore.

J'ai trouvé la solution grâce à chatgpt.
0
Réponse 4 / 5
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 718
21 avril 2023 à 16:36

Bonjour,

Il faut, comme le dit Pitet ..modifier la valeur de l'attribut MAX de ton input

progressBar.setAttribute('max',audio.duration);

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
chabinot Messages postés 322 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2024 16
21 avril 2023 à 18:41

Merci,

J'avais trouvé grâce à "ChatGPT". qui m'a donné la même réponse et comment le coder.
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 718
Modifié le 21 avril 2023 à 20:00

Ne te reste plus alors qu'à marquer la question comme résolue...

et à l'avenir essaie de le faire aussitôt ta réponse trouvée ça m'évitera de perdre du temps

0

Discussions similaires

Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses
Alt + = un égal barré = différence !
KAPAZZA -
benj -

7 réponses
Comment faire le signe = barré?
rma71 -
gillette83 -

5 réponses
Comment écrire le signe mathématique "différent de"?
moillola -
ziggourat -

7 réponses
telecharger musique mp3 gratuit
foufou996 -
SamuelBeckett -

5 réponses