Nos últimos meses, a API Web Audio do WebKit surgiu como uma plataforma atraente para jogos e aplicativos de áudio na Web. À medida que os desenvolvedores se familiarizam com eles, ouvem perguntas semelhantes surgem repetidamente. Esta rápida atualização é uma tentativa de abordar algumas das perguntas mais frequentes para tornar sua experiência com a API de áudio da Web mais agradável.
P: Socorro, não consigo emitir sons!
R: Se você não conhece a API Web Audio, consulte o tutorial de primeiros passos ou a receita de Eric para tocar áudio com base na interação do usuário.
P: Quantos contextos de áudio preciso ter?
R: Geralmente, você precisa incluir um AudioContext por página, e um único contexto de áudio pode aceitar muitos nós conectados a ele. Embora você possa incluir vários AudioContexts em uma única página, isso pode levar a um impacto no desempenho.
P: Tenho um AudioBufferSourceNode. Acabei de reproduzir com noteOn() e quero abrir de novo, mas o noteOn() não faz nada. Preciso de ajuda!
R: Assim que a reprodução de um nó de origem for concluída, não é possível reproduzir mais dele. Para reproduzir o buffer subjacente novamente, crie um novo AudioBufferSourceNode e chame noteOn().
Embora a recriação do nó de origem possa parecer ineficiente, os nós de origem são altamente otimizados para esse padrão. Além disso, se você mantiver um handle para o AudioBuffer, não precisará fazer outra solicitação ao ativo para reproduzir o mesmo som novamente. Se você precisar repetir esse padrão, encapsular a reprodução com uma função auxiliar simples, como playSound(buffer).
P: Ao reproduzir um som, por que você precisa criar um novo nó de origem todas as vezes?
R: A ideia desta arquitetura é separar o recurso de áudio do estado de reprodução. Fazendo uma analogia com um toca-discos, os buffers são análogos a registros e fontes aos marcadores. Como muitos aplicativos envolvem várias versões do mesmo buffer sendo reproduzidas simultaneamente, esse padrão é essencial.
P: Como faço para processar o som das tags audio e video?
R: O MediaElementAudioSourceNode está sendo criado. Quando disponível, ele funcionará aproximadamente da seguinte maneira (adicionando um efeito de filtro a uma amostra reproduzida pela tag de áudio):
<audio src="sounds/sample.wav" controls>
var audioElement = document.querySelector('audio');
var mediaSourceNode = context.createMediaElementSource(audioElement);
mediaSourceNode.connect(filter);
filter.connect(context.destination);
Esse recurso é acompanhado neste crbug. Nessa configuração, não é necessário chamar mediaSourceNode.noteOn(), a tag de áudio controla a reprodução.
P: Quando posso ouvir o som de um microfone?
R: A parte de entrada de áudio será implementada como parte do WebRTC usando getUserMedia e estará disponível como um nó de origem especial na API Web Audio. Funciona em conjunto com createMediaElementSource
P: Como posso conferir quando a reprodução de um AudioSourceNode foi concluída?
R: No momento, você precisa usar um timer JavaScript, já que a API Web Audio não é compatível com esse recurso. Este snippet do tutorial de introdução à API Web Audio é um exemplo disso na prática:
// Assume source and buffer are previously defined.
source.noteOn(0);
var timer = setTimeout(function() {
console.log('playback finished');
}, buffer.duration * 1000);
Existe um bug em aberto para fazer a API Web Audio implementar um callback mais preciso.
P: Os sons de carregamento fazem com que toda a linha de execução da interface seja travada e minha interface não responda. Ajuda!**
R: Usar a API decodeAudioData para carregamento assíncrono e evitar o bloqueio da linha de execução principal. Confira este exemplo.
P: A API de áudio da Web pode ser usada para processar sons mais rapidamente do que em tempo real?
R: Sim, estamos trabalhando em uma solução. Fique por dentro!
P: Criei um aplicativo incrível da API de áudio da web, mas sempre que a guia em execução entra em segundo plano, os sons ficam estranhos!
R: Isso provavelmente ocorre porque você está usando setTimeouts, que se comportam de maneira diferente quando a página está em segundo plano. No futuro, a API Web Audio poderá fazer callback em momentos específicos usando o timer interno do áudio da Web (atributo context.currentTime). Para mais informações, consulte esta solicitação de recurso.
Em geral, pode ser uma boa ideia interromper a reprodução quando o app fica em segundo plano. Use a API Page Visibility para detectar quando uma página vai para o segundo plano.
P: Como posso mudar o tom de um som usando a API Web Audio?
A: Alterar o playbackRate no nó de origem.
P: Posso mudar o tom sem mudar a velocidade?
R: A API Web Audio pode ter um PitchNode no contexto de áudio, mas isso é difícil de implementar. Isso ocorre porque não há um algoritmo simples de mudança de tom na comunidade de áudio. Técnicas conhecidas criam artefatos, especialmente nos casos em que a mudança de tom é grande. Há dois tipos de abordagens para lidar com esse problema:
- Algoritmos de domínio de tempo, que fazem com que um segmento repetido ecoa artefatos.
- Técnicas de domínio de frequência, que causam artefatos de som reverberante.
Embora não haja um nó nativo para realizar essas técnicas, é possível fazer isso com um JavaScriptAudioNode. Este snippet de código pode servir como ponto de partida.
P: Como posso criar um AudioContext com uma taxa de amostragem da minha escolha?
R: No momento, não há suporte para isso, mas estamos analisando a situação. Confira esta solicitação de recurso.
Se você tiver outras dúvidas, pergunte no StackOverflow usando a tag web-audio.