Pause sur texte défilant

Résolu
chabinot Messages postés 391 Statut Membre -  
chabinot 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
 

2 réponses

  1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     

    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 


    0
  2. chabinot Messages postés 391 Statut Membre 16
     

    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

    0