Slideshow controlado pelo play e pause de uma música

music-slide

Com a tag <audio> do html5, temos uma API JavaScript para manipular e ouvir os eventos dos controles do player. Quando a música inicia, as cores trocam. No pause, elas param, e no play elas tocam novamente, até o fim da música, quando tudo para. Bem simples, não ?

<script>
(function(){
  'use strict';

  var $music = document.getElementById('music'),
      $items = document.getElementById('slide').querySelectorAll('.item'),
      itemsQuantity = $items.length;

  $items = [].slice.call($items);

  var i = 0;
  var itv;
  var SLIDE_TIME = 800;

  var start = function() {
    //..
  };

  $music.addEventListener('ended', function(event) {
    console.log('ended');
    clearInterval(itv);
  });
  $music.addEventListener('pause', function(event) {
    console.log('pause');
    clearInterval(itv);
  });
  $music.addEventListener('playing', function(event) {
    console.log('playing');
    itv = setInterval(start, SLIDE_TIME)
  });

}());
</script>

Veja como implementei isso:

Código

https://github.com/wbruno/examples

Demonstração

http://wbruno.github.io/examples/music-slide/

2 Comments

  1. E ai Jovem, aprendi muita coisa de JS, lendo seu blog, será que você não poderia postar algo sobre WebGL, ou indicar algum site onde eu possa buscar conteúdo diferente de desenhar um triangulo ou um cubo na tela… E também que não envolva o three.js, ou outra lib, já que quero entender o funcionamento do programa e não apenas usar um jeito facil para faze-lo funcionar

  2. Fabiana Ferreira

    dezembro 9, 2016 at 13:44

    Eu não te conheço (só pelos seus posts) e você não tem a mínima ideia de quem sou eu. Mas eu gostaria de deixar os meus mais sinceros agradecimentos a você. Faço curso técnico de informática integrado ao colegial na UNESP, e seus posts tanto aqui, quanto em fóruns já me salvaram MUITAS vezes. Obrigado, você é muito didático e um excelente programador.

Deixe uma resposta

Your email address will not be published.

*