Pause sur texte défilant
Résoluchabinot Messages postés 322 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Dans mon site, j'ai une animation en css comme suis :
.marquee { position: absolute; width: 380px; bottom: -10px; font-size: 1.25rem; font-style: italic; font-weight: 500; color: #79f8f8; white-space: nowrap; overflow: hidden; } .marquee p { display: inline-block; padding-left: 100%; animation: marquee 15s linear infinite; } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }
J'ai une balise audio à l'intérieur de laquelle se trouve l'animation, bout de l'html :
<main class="music-container"> <div class="music-progress"> <div class="progressTimes"> <p class="progres"><i></i></p> <div class="times"> <p>0:00</p> <p>0:00</p> </div> </div> </div> <div class="controller"> <div id="volume" class="item"> <i class="fa-solid fa-volume-high"></i> </div> <div id="prev" class="item"> <i class="fa-solid fa-backward"></i> </div> <div id="play" class="item"> <i class="fa-solid fa-circle-play"></i> </div> <div id="next" class="item"> <i class="fa-solid fa-forward"></i> </div> <div id="stop" class="item"> <i class="fa-solid fa-stop"></i> </div> </div> <div class="marquee"> <p class="artist"><span class="icon-num"></span></p> </div> </main>
et enfin le script javascript :
const audioProgress = document.querySelector(".progres i"); const audioProgressTimes = document.querySelector(".progressTimes"); const [audioCurrentTime, audioDurationTime] = document.querySelector(".times").children; const [volume, prev, play, next, stop] = document.querySelectorAll(".item"); const marquee = document.querySelector(".marquee"); const artist = document.querySelector(".artist"); const number = document.querySelector('.icon-num'); const audios = [ 'audio/maguy.mp3', 'audio/case.mp3', 'audio/patineur.mp3', 'audio/whiterShade.mp3', 'audio/belafonte.mp3', 'audio/Sardou2.mp3', 'audio/Sardou.mp3', 'audio/brassens.mp3', 'audio/nougaro.mp3', 'audio/reggiani.mp3', 'audio/Emily-Linge.mp3', 'audio/rosesblanches.mp3', ]; const artists = [ 'Puissance 8 ~ Maguy', 'Malavoï ~ Case à Lucie', 'Julien Clerc ~ Le patineur', 'Emily Linge ~ a whiter shade of pale', 'Harry Belafonte ~ ses meilleurs chansons', 'Michel Sardou ~ ses meilleurs chansons', 'Michel Sardou ~ ses meilleurs chansons', 'Georges Brassens ~ ses meilleurs chansons', 'Claude Nougaro ~ ses meilleurs chansons', 'Serge Reggiani ~ ses meilleurs chansons', 'Emily Linge ~ ses meilleures reprises', 'Berthe Sylva ~ Les roses blanches', ]; let numero = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']; let interval; let countMusic = 0; let iconArray = []; let audio = new Audio(audios[countMusic]); const audioPlay = () => { number.innerText = numero[countMusic]; artist.innerHTML = '♬ ~ <span class="circle">' + number.innerText + '</span> ~ ' + artists[countMusic] + ' ~ ♬'; if (audio.paused) { audio.play(); play.innerHTML = '<i class="fa-solid fa-pause"></i>'; // marquee.animation-playstate = paused musicInterval(); } else { audio.pause(); play.innerHTML = '<i class="fa-solid fa-circle-play"></i>'; // marquee.animation-playstate = running clearInterval(interval); } } const audioStop = () => { audioProgressTimes.style.display = 'block'; if (!audio.paused) { audio.pause(); play.innerHTML = '<i class="fa-solid fa-circle-play"></i>'; clearInterval(interval); } audio.currentTime = 0; timeFormatter(); } const audioNext = () => { audioProgressTimes.style.display = 'block'; if (!audio.paused) { audio.pause(); } if (audios.length - 1 > countMusic) { ++countMusic; } else { countMusic = 0; } audio = new Audio(audios[countMusic]); audioPlay(); musicInterval(); } const audioPrev = () => { audioProgressTimes.style.display = 'block'; if (!audio.paused) { audio.pause(); } if (0 < countMusic) { --countMusic; } else { countMusic = audios.lenght - 1; } audio = new Audio(audios[countMusic]); audioPlay(); musicInterval(); } const audioIsMuted = () => { audioProgressTimes.style.display = 'block'; if (audio.volume > 0) { audio.volume = 0; volume.innerHTML = '<i class="fa-solid fa-volume-xmark"></i>'; } else { audio.volume = 1; volume.innerHTML = '<i class="fa-solid fa-volume-high"></i>'; } } const musicInterval = () => { clearInterval(interval); interval = setInterval( () => { timeFormatter(); }, 1000); } const timeFormatter = () => { audioCurrentTime.textContent = convertCurrent(audio.currentTime); audioDurationTime.textContent = convertHMS(audio.duration); audioProgress.style.width = ((audio.currentTime / audio.duration) * 100) + '%'; if (audio.currentTime === audio.duration) { audioNext(); } } const convertCurrent = (value) => { if (audio.duration > 3600) { let hours = Math.floor(value / 3600); let minutes = Math.floor(value % 3600 / 60); let seconds = Math.floor(value % 3600 % 60); if (minutes < 10) {minutes = "0"+minutes;} if (seconds < 10) {seconds = "0"+seconds;} return hours + ':' + minutes + ':' + seconds; } else { minutes = parseInt(value / 60); seconds = parseInt(value % 60); // if (minutes < 10) {minutes = "0"+minutes;} if (seconds < 10) {seconds = "0"+seconds;} return minutes + ':' + seconds; } } const convertHMS = (value) => { if (value < 3600) { let minutes = parseInt(value / 60); let seconds = parseInt(value % 60); // if (minutes < 10) {minutes = '0' + minutes} if (seconds < 10) {seconds = '0' + seconds} return minutes + ':' + seconds; } else { let hours = Math.floor(value / 3600); let minutes = Math.floor(value % 3600 / 60); let seconds = Math.floor(value % 3600 % 60); if (minutes < 10) {minutes = "0"+minutes;} if (seconds < 10) {seconds = "0"+seconds;} return hours + ':' + minutes + ':' + seconds; } } play.addEventListener('click', audioPlay); stop.addEventListener('click', audioStop); next.addEventListener('click', audioNext); prev.addEventListener('click', audioPrev); volume.addEventListener('click', audioIsMuted);
J'aimerais mettre le défilement en pause lorsque je clique sur le bouton pause.
Merci de votre aide.
Cordialement
- Pause sur texte défilant
- Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Imprimante en pause hp ✓ - Forum Imprimante
- Texte barré whatsapp - Guide
2 réponses
Bonjour
Qu'as-tu essayé ?
Sur quoi bloque tu exactement ?
Une rapide recherche sur internet semble pouvoir te donner la réponse en quelques secondes... As-tu cherché avant de poser ta question ?
par exemple : https://www.google.com/search?q=css+javascript+pause+animation
Bonjour,
Merci pour ton aide, j'ai trouvé ce que je voulais, ci-dessous le script modifié :
// Constantes const audioProgress = document.querySelector(".progres i"), audioProgressTimes = document.querySelector(".progressTimes"), [audioCurrentTime, audioDurationTime] = document.querySelector(".times").children, [volume, prev, play, next, stop] = document.querySelectorAll(".item"), marquee = document.querySelector(".marquee p"), artist = document.querySelector(".artist"), number = document.querySelector('.icon-num'), audios = [ 'audio/maguy.mp3', 'audio/case.mp3', 'audio/patineur.mp3', 'audio/whiterShade.mp3', 'audio/belafonte.mp3', 'audio/Sardou2.mp3', 'audio/Sardou.mp3', 'audio/brassens.mp3', 'audio/nougaro.mp3', 'audio/reggiani.mp3', 'audio/Emily-Linge.mp3', 'audio/rosesblanches.mp3', ], artists = [ 'Puissance 8 ~ Maguy', 'Malavoï ~ Case à Lucie', 'Julien Clerc ~ Le patineur', 'Emily Linge ~ a whiter shade of pale', 'Harry Belafonte ~ ses meilleurs chansons', 'Michel Sardou ~ ses meilleurs chansons', 'Michel Sardou ~ ses meilleurs chansons', 'Georges Brassens ~ ses meilleurs chansons', 'Claude Nougaro ~ ses meilleurs chansons', 'Serge Reggiani ~ ses meilleurs chansons', 'Emily Linge ~ ses meilleures reprises', 'Berthe Sylva ~ Les roses blanches', ] let numero = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], interval, countMusic = 0, iconArray = [], audio = new Audio(audios[countMusic]) const audioPlay = () => { number.innerText = numero[countMusic] artist.innerHTML = '♬ ~ <span class="circle">' + number.innerText + '</span> ~ ' + artists[countMusic] + ' ~ ♬' if (audio.paused) { audio.play(); play.innerHTML = '<i class="fa-solid fa-pause"></i>' marquee.style.animationPlayState = 'running' musicInterval() } else { audio.pause() play.innerHTML = '<i class="fa-solid fa-circle-play"></i>' marquee.style.animationPlayState = 'paused' clearInterval(interval) } } const audioStop = () => { audioProgressTimes.style.display = 'block' if (!audio.paused) { audio.pause(); play.innerHTML = '<i class="fa-solid fa-circle-play"></i>' clearInterval(interval) } audio.currentTime = 0 timeFormatter() } const audioNext = () => { audioProgressTimes.style.display = 'block' if (!audio.paused) { audio.pause() } if (audios.length - 1 > countMusic) { ++countMusic } else { countMusic = 0 } audio = new Audio(audios[countMusic]) audioPlay() musicInterval() } const audioPrev = () => { audioProgressTimes.style.display = 'block' if (!audio.paused) { audio.pause() } if (0 < countMusic) { --countMusic } else { countMusic = audios.lenght - 1 } audio = new Audio(audios[countMusic]) audioPlay() musicInterval() } const audioIsMuted = () => { audioProgressTimes.style.display = 'block'; if (audio.volume > 0) { audio.volume = 0 volume.innerHTML = '<i class="fa-solid fa-volume-xmark"></i>' } else { audio.volume = 1 volume.innerHTML = '<i class="fa-solid fa-volume-high"></i>' } } const musicInterval = () => { clearInterval(interval); interval = setInterval( () => { timeFormatter() }, 1000) } const timeFormatter = () => { audioCurrentTime.textContent = convertCurrent(audio.currentTime) audioDurationTime.textContent = convertHMS(audio.duration) audioProgress.style.width = ((audio.currentTime / audio.duration) * 100) + '%' if (audio.currentTime === audio.duration) { audioNext() } } const convertCurrent = (value) => { if (audio.duration > 3600) { 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 } else { minutes = parseInt(value / 60) seconds = parseInt(value % 60).toString().padStart(2, '0') return minutes + ':' + seconds; } } const convertHMS = (value) => { if (value < 3600) { let minutes = parseInt(value / 60), seconds = parseInt(value % 60).toString().padStart(2, '0') // if (minutes < 10) {minutes = '0' + minutes} // if (seconds < 10) {seconds = '0' + seconds} 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') // if (minutes < 10) {minutes = "0"+minutes;} // if (seconds < 10) {seconds = "0"+seconds;} return hours + ':' + minutes + ':' + seconds } } play.addEventListener('click', audioPlay) stop.addEventListener('click', audioStop) next.addEventListener('click', audioNext) prev.addEventListener('click', audioPrev) volume.addEventListener('click', audioIsMuted)
J'ai rajouté la balise 'p' à la constante 'marquee' et j'ai ajouté le style 'animationPlayState'..
Cela marche comme je veux.
Cordialement