Boutons previous et next dans un script audio
Résolu
chabinot
Messages postés
322
Date d'inscription
Statut
Membre
Dernière intervention
-
chabinot Messages postés 322 Date d'inscription Statut Membre Dernière intervention -
chabinot Messages postés 322 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je vous soumets mes sources html et javasript audio.
1 -HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Martinique - Fleur des Caraïbes</title>
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 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/popper.min.js" defer></script>
<script src="./js/bootstrap.min.js" defer></script>
<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">
<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="/">Martinique ~ Fleur des Caraïbes</a></h1>
<div class="time"></div>
</div>
</header>
<nav class="navbar navbar-expand-lg navbar-dark mb-0">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Jeux de mots
</a>
<ul class="dropdown-menu bg-perso" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="//www.cnews.fr/jeux/mots-fleches" target="_blank">Cnews -
Fléchés</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="//www.cnews.fr/jeux/mots-croises" target="_blank">Cnews -
Croisés</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="//www.20minutes.fr/services/mots-fleches" target="_blank">20 Min
- Fléchés</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="//www.20minutes.fr/services/mots-croises" target="_blank">20 Min
- Croisés</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="//www.20minutes.fr/services/ifleches" target="_blank">20 Min -
iFléchés</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="//www.20minutes.fr/services/ironde-des-mots" target="_blank">20
Min - iRonde</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="//www.20minutes.fr/services/puzzle" target="_blank">20 Min -
Puzzle</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="//www.20minutes.fr/services/mots-coupes" target="_blank">20 Min -
Coupés</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="//www.mathster.com/games/solitaire/" target="_blank">Solitaire</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.programme-tv.net/programme/toutes-les-chaines/"
target="_blank">Programmes Tv</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Administrations
</a>
<ul class="dropdown-menu bg-perso" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="https://www.creditmutuel.fr/fr/particuliers.html?amcrefdec=1"
target="_blank">Crédit mutuel</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="https://www.bouyguestelecom.fr/" target="_blank">Bouygues - mon
compte</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item"
href="https://assure.ameli.fr/PortailAS/appmanager/PortailAS/assure?_nfpb=true&_pageLabel=as_accueil_page&_somtc=true"
target="_blank">Ameli</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="https://www.lassuranceretraite.fr/portail-info/home.html"
target="_blank">Retraite</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="//www.caf.fr/allocataires/caf-de-loire-atlantique/accueil"
target="_blank">CAF</a></li>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="myCarousel" class="carousel slide carousel-fade mt-3" data-bs-ride="carousel" data-bs-interval="2000">
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="3"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="4"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-75 img" src="img/mart-01.jpg">
<div class="caption">
<p>Ville de Saint-Pierre</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-75 img" src="img/mart-02.jpg">
<div class="caption">
<p>Plage du Carbet</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-75 img" src="img/mart-03.jpg">
<div class="caption">
<p>Anse Couleuvre</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-75 img" src="img/mart-04.jpg">
<div class="caption">
<p>Balade à moto</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-75 img" src="img/mart-05.jpg">
<div class="caption">
<p>Habitation Clément</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-75 img" src="img/mart001.jpg">
<div class="caption">
<p>Anse d'Arlet</p>
</div>
</div>
</div>
</div>
<section>
<div class="container mt-4">
<div class="lecteur-audio">
<audio src=""></audio>
<div class="progress-bar">
<input type="range" class="form-range" id="progress" value="0">
</div>
<div class="times">
<span class="curr-time">0:00</span>
<span class="durs">0:00</span>
</div>
<div class="volume">
<span class="volume-high">
<i class="fas fa-volume-high"></i>
</span>
<span class="volume-mute">
<i class="fas fa-volume-mute"></i>
</span>
<input type="range" class="form-range vol" id="volume" min="0" max="1" step="0.1" value="1">
<span id="volume-value">100%</span>
</div>
<div class="controller">
<div class="prev">
<i class="fas fa-backward btn"></i>
</div>
<div class="play-pause">
<i class="fas fa-play btn play"></i>
</div>
<div class="next">
<i class="fas fa-forward btn"></i>
</div>
<div class="stop">
<i class="fas fa-stop btn"></i>
</div>
</div>
<div class="marquee mt-3">
<p class="artist"></p>
</div>
</div>
</div>
</section>
<footer class="fixed-bottom">
<p class="text-center">
Copyright © Martinique - Fleur des Caraïbes (2023 - <span class="cpy"></span>). Tous droits réservés
</p>
</footer>
</body>
</html>
2 - Javascript audio.js
const audio = document.querySelector("audio"),
progressBar = document.querySelector(".progress-bar"),
progress = document.querySelector("#progress"),
currTime = document.querySelector(".curr-time"),
duration = document.querySelector(".durs"),
volume = document.querySelector("#volume"),
volumeValue = document.querySelector("#volume-value"),
volumeUp = document.querySelector(".volume-high"),
volumeMute = document.querySelector(".volume-mute"),
marquee = document.querySelector(".marquee p"),
prev = document.querySelector(".prev"),
next = document.querySelector(".next"),
stop = document.querySelector(".stop"),
playBtn = document.querySelector('play'),
playPause = document.querySelector(".play-pause i");
// Création de la liste des mp3
songList = [
{
num : 1,
path : "audio/maguy.mp3",
artist : "Puissance 8",
songName: "Maguy",
},
{
num : 2,
path : "audio/case.mp3",
artist : "Malavoi",
songName: "Cae à Lucie",
},
{
num : 3,
path : "audio/Les deux écoles.mp3",
artist : "Michel Sardou",
songName: "Les deux écoles",
},
{
num : 4,
path : "audio/patineur.mp3",
artist : "Julien Clerc",
songName: "Le patineur",
},
{
num : 5,
path : "audio/whiterShade.mp3",
artist : "Emily Linge",
songName: "A whiter shade of pale",
},
{
num : 6,
path : "audio/belafonte.mp3",
artist : "Harry Belafonte",
songName: "Banana boat song",
},
{
num : 7,
path : "audio/sardou.mp3",
artist : "Michel Sardou",
songName: "Le Connemara",
},
{
num : 8,
path : "audio/nougaro.mp3",
artist : "Claude Nougaro",
songName: "Le jazz et la java",
},
{
num : 9,
path : "audio/brassens.mp3",
artist : "Georges Brassens",
songName: "Mourir pour des idées",
},
{
num : 10,
path : "audio/reggiani.mp3",
artist : "Serge Reggiani",
songName: "L'italien",
},
{
num : 11,
path : "audio/nantes.mp3",
artist : "Barbara",
songName: "Nantes",
},
{
num : 12,
path : "audio/Le-petit-bal-perdu.mp3",
artist : "Bourvil",
songName: "Le petit bal perdu",
},
{
num : 13,
path : "audio/rosesblanches.mp3",
artist : "Berthe Sylva",
songName: "Les roses blanches",
},
{
num : 14,
path : "audio/monvieux.mp3",
artist : "Daniel Guichard",
songName: "Mon vieux",
},
];
let i = 0,
isPlaying = false,
saveVolume
// Play ou Pause
playPause.addEventListener('click', () => {
if (!isPlaying) {
isPlaying = true
loadSong(songList[i])
}
audio.paused ? audio.play() : audio.pause()
})
audio.addEventListener('play', () => {
playPause.classList.replace('fa-play', 'fa-pause')
marquee.style.animationPlayState = "running"
})
audio.addEventListener('pause', () => {
playPause.classList.replace('fa-pause', 'fa-play')
marquee.style.animationPlayState = "paused"
})
// Charger la chanson
const loadSong = (songList) => {
marquee.textContent =
"♬ ~ " +
songList.num +
" ~ " +
songList.artist +
" ~ " +
songList.songName +
" ~ " +
" ♬";
audio.src = songList.path;
};
// Chanson précédente
prev.addEventListener("click", () => {
i--;
if (i < 0) {
i = songList.length - 1;
}
loadSong(songList[i]);
audio.play();
});
// Chanson suivante
next.addEventListener("click", () => {
i++;
if (i > songList.length) {
i = 0;
}
loadSong(songList[i]);
audio.play();
})
// stop
stop.addEventListener("click", () => {
audio.pause()
isPlaying =false
audio.currentTime = 0
marquee.style.animationPlayState = "paused"
playPause.classList.replace('fa-pause', 'fa-play')
});
// Charger le fichier audio
audio.addEventListener("loadedmetadata", () => {
// Mettre à jour la valeur maximale du seek-slider avec la durée du fichier audio
duration.textContent = rtvDurs(audio.duration)
progress.max = audio.duration;
})
// Mettre à jour la position de lecture de l'audio en fonction de la position du seek-slider
progress.addEventListener("input", function () {
audio.currentTime = progress.value
})
// Mettre à jour la position du seek-slider en fonction de la progression de lecture de l'audio
audio.addEventListener("timeupdate", () => {
progress.value = audio.currentTime;
currTime.textContent = rtvDurs(audio.currentTime)
if (audio.currentTime === audio.duration) {
i++;
if (i > songList.length) {
i = 0;
}
loadSong(songList[i]);
audio.play();
}
})
// On gère le volume
volume.addEventListener("input", () => {
audio.volume = volume.value
if (audio.volume > 0) {
volumeUp.style.display = "block"
volumeMute.style.display = "none"
} else {
volumeMute.style.display = "block"
volumeUp.style.display = "none"
}
volumeValue.textContent = volume.value * 100 + "%";
});
volumeUp.addEventListener("click", () => {
saveVolume = volume.value;
volumeMute.style.display = "block";
volumeUp.style.display = "none";
audio.volume = 0;
volume.value = 0;
volumeValue.textContent = "";
});
volumeMute.addEventListener("click", () => {
audio.volume = saveVolume
volume.value = audio.volume
volumeUp.style.display = "block"
volumeMute.style.display = "none"
volumeValue.textContent = volume.value * 100 + "%"
});
// On transforme la durée du mp3 en heures, minutes, secondes
const 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}`
}
};
J'ai un petit souci au niveau des boutons prev et next.
Quand je clique sur prev par exemple, j'ai bien le morceau précédant qui joue, quand je clique sur pause, il ne se met pas en apuse. Je suis obligé de cliquer à nouveau, il repart à zéro et pause marche.
Je vous saurai très reconnaissant si vous avez une idée.
Très cordialement
Windows / Chrome 113.0.0.0
A voir également:
- Ifleches gratuit
- Musique audio - Télécharger - Lecture & Playlists
- Realtek audio driver - Télécharger - Pilotes & Matériel
- Script vidéo youtube - Guide
- Transcription audio en texte word gratuit - Guide
- Comment réinitialiser un téléphone avec les boutons - Guide
