Pause sur texte défilant
Résoluchabinot Messages postés 391 Statut Membre -
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
- Formule excel si contient texte alors texte ✓ - Forum Excel
- 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