1

Estou criando uma página HTML que possui uma imagem em formato gif e um display de música logo abaixo dele.

<div><img src="imagem.gif"/></div>
<audio>
    <source src="musica.mp3" type="audio/mpeg"/>
</audio>

Eu gostaria de saber como posso pausar a animação da imagem quando o usuário pausar a música e prosseguir com a animação durante a reprodução da música. Exemplo:

audio = document.querySelector("audio");

audio.onpause = stopGifAnimation;
audio.onplay = startGifAnimation;

É possível fazer isso apenas com JavaScript puro ?

1
  • Fechei como dup, realmente eu não lembrava da outra pergunta, lá tem alguns exemplos sem LIBs de terceiros, o que pode ser bem mais interessante pra maioria.
    – Syzoth
    Commented 1/05/2020 às 1:07

1 Resposta 1

2

Eu recomendaria trocar o GIF por CSS Sprites (que você poderia até controlar um pouco com :hover ou outra pseudo-classe) ou por <canvas> (este seria mais complicado)

Mas uma solução rápida é a lib https://github.com/buzzfeed/libgif-js (que internamente usa CANVAS), e possui os controles:

Exemplo com controles:

<img id="example1" src="inicial.jpg" rel:animated_src="seu_gif.gif" rel:auto_play="0" width="467" height="375" />

<script type="text/javascript">
    var sup1 = new SuperGif({ gif: document.getElementById('example1') } );
    sup1.load();
</script>

<hr>

<button onclick="sup1.pause();">Pause</button> |
<button onclick="sup1.play();">Play</button> |
<button onclick="sup1.move_to(0);">Restart</button> |
<button onclick="sup1.move_relative(1);">Step forward</button> |
<button onclick="sup1.move_relative(-1)">Step back</button>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .