4

Estou começando em javascript e tenho em mãos um projeto simples porém que estão me quebrando a cabeça.
O projeto consiste em criar um player multitrack (como aqueles softwares de estudio de gravação) onde ao clickar em play, o cliente consegue ouvir todos os instrumentos gravados na faixa em questão.
Segue um exemplo de que estou falando: Multitrack.com

Pois bem, tenho o seguinte markup:

    <audio id="player" src="audio/1.mp3" controls="controls" preload="auto"></audio><br />
    <audio id="player1" src="audio/2.mp3" controls="controls" preload="auto"></audio><br />
    <audio id="player2" src="audio/3.mp3" controls="controls" preload="auto"></audio><br />
    <button id="play">►</button>

E logo abaixo, o seguinte javascript:

<script>
   var play = document.getElementById('play');
       play.addEventListener('click', function() {
            player.play();
            player1.play();
            player2.play();
       });
</script>

Até aqui ok. Quando abro e um navegador pelo PC, os audios carregam corretamente, simultaneamente. Porém, ao abrir o projeto pelo celular android, os audios iniciam com atraso (latência) o que faz com que eles não fiquem sincronizados.
Qual meu erro?
Existe alguma solução para isso?
Ou alguma forma de fazer com que, os audios fiquem sincronizados...

1 Resposta 1

1

Você tem duas opções.

Realizar o download dos recursos como blob, e adicioná-los ao DOM diretamente:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'audio/1.mp3', true);
xhr.responseType = 'blob';
var audio = document.querySelector('audio');
xhr.onload = function () {
    audio.src = URL.createObjectURL(xhr.response);  
};

Codificar os arquivos de áudio como URIs de dados (fazendo os arquivos ficarem, em média, 33% maiores):

var audio = document.querySelector('audio');
audio.src = 'data:audio/mp3;base64,SUQzBAAAAAA...';
document.querySelector('button').onclick = function () {
    audio.play();
};

Fonte.

4
  • OnoSendai Obrigado pela resposta :). Estive testando essa opção porém, não consigo insertar mais do que 1 audio. Para cada audio que eu for utilizar, preciso gerar um novo request? 17/04/2015 às 20:43
  • @ADHenrique, Você pode inserir quantos quiser - o seletor do exemplo está gerando apenas um object. No seu caso talvez valha a pena indicar a URL para o recurso a ser carregado a partir de um atributo em cada item, e então processar todos os elementos.
    – OnoSendai
    17/04/2015 às 20:47
  • OnoSendai, testei todas as formas possíveis com o Web Audio API e realmente, é maravilhoso tudo o que esse api pode fazer. Mas infelizmente ele não é compatível com IEca (ainda). O que faz com que meu projeto fique um tanto quanto limitado. Como pode ver, o site que usei como amostra não usa web audio api e a latência dos audios é ZERO! :( 19/04/2015 às 2:52
  • @ADHenrique Uma pena essa limitação. =/
    – OnoSendai
    8/05/2015 às 17:18

Você deve fazer log-in para responder a esta pergunta.

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