Módulo

Title Screen
Green Hill Zone
Marble Zone
Spring Yard Zone

Descrição

O módulo Player de Música é um elemento de bloco com uma ou mais tags <audio>, formando uma playlist a partir da primeira tag <audio> seguinda pelas seguintes, cada uma com um botão para tocar e pausar cada faixa individualmente, além de um elemento de bloco com botões com as funcionalidades tocar, para, avançar para próxima faixa, retroceder para a faixa anterior e controle de volume para todas as faixas.

Uso

Adicione um link para o arquivo WebModules.min.css e para o script WebModules.min.js dentro da tag <head> da sua página:

        
  <head>
    <link rel="stylesheet" href="caminho/para/WebModules.min.css">
    <script src="caminho/para/WebModules.min.js"></script>
  </head>

Depois é só atribuir a classe .wm-mPlayer a um elemento de bloco com seguinte estrutura:

        
  <div class="wm-mPlayer" data-autoplay="false" data-loop="false">
    <div class="controls">
      <button class="control-stop">Stop</button>
      <button class="control-play">Play</button>
      <button class="control-prev">Prev</button>
      <button class="control-next">Next</button>
      <button class="control-volume"><input type="range" min="0" max="10" value="5"></button>
    </div>
    <div class="playlist">
      <table>
        <tbody>
          <tr>
            <td><button class="track-pause">Pause</button></td>
            <td><button class="track-play">Play</button></td>
            <td>Title Screen</td>
            <td><audio src="01-title-screen.mp3" class='track' preload='none' controls></audio></td>
          </tr>
          ...
        </tbody>
      </table>
    </div>
  </div>

Comportamento

O módulo Player de Música se comporta como um elemento de bloco que contem outro elemento de bloco e uma tabela. O módulo aceita dois parâmetros: data-autoplay e data-loop, ambos aceitam apenas dois valores, true e false, sendo false o valor padrão. O parâmetro data-autoplay quando recebe o valor true faz com que o player inicie automaticamente após o carregamento da página, enquanto que o parâmetro data-loop quando recebe o valor true faz a playlist reiniciar depois de a última faixa ser tocada.

Dentro do módulo deve existir um elemento de bloco com a classe controls, que por sua vez contem 5 elementos <button> com as classes indicadas no seguinte exemplo:

        
<div class="controls">
  <button class="control-stop">Stop</button>
  <button class="control-play">Play</button>
  <button class="control-prev">Prev</button>
  <button class="control-next">Next</button>
  <button class="control-volume"><input type="range" min="0" max="10" value="5"></button>
</div>

O elemento com a classe control-stop quando clicado interrompe a faixa que está tocando e retorna as faixas ativas para o começo.

O elemento com a classe control-play quando clicado toca a primeira faixa da playlist e retorna as faixas ativas para o começo.

O elemento com a classe control-prev quando clicado toca a faixa imediatamente anterior em relação a faixa ativa.

O elemento com a classe control-next quando clicado toca a faixa imediatamente posterior em relação a faixa ativa.

O elemento com a classe control-volume deve ter um elemento <input> com o parametro type="range", que controla o volume das faixas ativas.

Log das versões