chabinot
Messages postés321Date d'inscriptionmardi 10 novembre 2015StatutMembreDernière intervention22 mars 2024
-
12 mai 2023 à 15:40
chabinot
Messages postés321Date d'inscriptionmardi 10 novembre 2015StatutMembreDernière intervention22 mars 2024
-
12 mai 2023 à 19:19
Bonjour,
Je vous soumets mes sources html et javasript audio.
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.
Puisque tu lances la lecture après avoir changer de morceau, essaye de définir le booléen isPlaying à la valeur true dans les listerners de prev et next.
