Слушать GIF один раз на клик и изменить обратно - PullRequest
Новая
       22

Слушать GIF один раз на клик и изменить обратно

0 голосов
/ 29 апреля 2020

У меня есть файл HTML с изображением дождя и кнопкой, которая запускает звук, похожий на гром. У меня есть thunder.gif, который я хотел бы воспроизвести один раз, когда звук грома запускается кнопкой, а затем вернуться к исходному дождевому GIF.

Сейчас у меня есть функция startAudio (), которая создает аудио, и одна функция playGif (), где это единственный контент 

document.getElementById("theImage").src="thunder.gif";

Они оба помещены в третью функцию, называемую playThunder. (), который вызывается после нажатия кнопки. Тем не менее, я не знаю, как go вернуться к rain.gif, который раньше был "theImage", когда thunder.gif заканчивал играть. Я только хочу, чтобы gif проигрывался один раз, а затем снова заменял содержимое «theImage» на rain.gif. Если я сделаю функцию 

 function thunderGif(){
  document.getElementById("theImage").src="thunder.gif";
  document.getElementById("theImage").src="rain.gif";
}

Так она будет перебирать thunder.gif, а затем воспроизводить rain.gif, просто переопределяет и по какой-то причине вообще не играет thunder.gif

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

Используйте что-то вроде setTimeout, чтобы правильно рассчитать изменения sr c в зависимости от длины анимации gif

Таким образом, вы можете запланировать изменение sr c и избежать немедленного sr c изменение вашего текущего thunderGif(). Попробуйте 

function thunderGif(){
  document.getElementById("theImage").src="thunder.gif";
  setTimeout(function(){ document.getElementById("theImage").src="rain.gif"; }, 3000);
  //assuming thunder.gif animation length is 3 seconds
}
0 голосов
/ 30 апреля 2020

Вот необычное использование тега <video>:

HTML

  1. Назначьте URL файла MP3 на [src] (у видео-тегов нет проблем с воспроизведением аудиофайлов)

  2. Назначьте URL-адрес дождя GIF для [poster]

JavaScript

См. Комментарии в Демо

Демо 

/*
- Reference and register click event to <video>
- Click on <video> to call event handler function storm()
*/
document.querySelector('video').onclick = storm;

// Event handler always passes Event Object (event)
function storm(event) {
  // Reference the tag user clicked
  const clicked = event.target;
  // Define both GIFs
  const rain = 'https://media.giphy.com/media/Wmp1EOzVybWd13s5DB/giphy.gif';
  const lightning = 'https://media.giphy.com/media/3otPoT1atQUL9KIta0/giphy.gif';
  
  // Play MP3 file
  clicked.play();
  // Change the [poster] from rain to lightning GIF
  clicked.poster = lightning;
  /*
  - Change the [poster] from lightning to rain GIF after
    5 seconds which is the time duration of the MP3
  */  
  setTimeout(function() {
    clicked.poster = rain;
  }, 5000);
}
video {
  display: block;
  width: 320px;
  height: 180px;
  background: rgba(1, 10, 20, 0.9);
  object-fit: cover;
  cursor: pointer;
}
<video src='https://glsec.s3.amazonaws.com/mp3/thunder.mp3' poster='https://media.giphy.com/media/Wmp1EOzVybWd13s5DB/giphy.gif'></video>
...