Mudanças no áudio da Web na versão m36

Chris wilson
Chris Wilson

Mudanças no áudio da Web

No Google, adoramos padrões. Temos a missão de criar uma plataforma da Web definida por padrões. Uma das pequenas causas disso por algum tempo foi a implementação da API Web Audio prefixada pelo webkit (especialmente o objeto webkitAudioContext) e alguns dos trechos obsoletos de Web Audio que continuamos a oferecer suporte.

Originalmente, o Chrome 36 removeria o suporte ao prefixo webkitAudioContext, já que começamos a oferecer suporte ao objeto AudioContext não prefixado. Isso acabou sendo mais complicado do que o esperado e, por isso, o Chrome 36 oferece suporte sem prefixo e prefixo. No entanto, mesmo no webkitAudioContext reintroduzido, vários métodos e atributos legados, como createGainNode e createJavaScriptNode, foram removidos. Em resumo, no Chrome 36, webkitAudioContext e AudioContext são aliases um do outro. Não há diferença de funcionalidade entre eles.

Removeremos completamente o suporte ao prefixo após o Chrome 36, provavelmente em algumas versões. Faremos um anúncio aqui quando a mudança for iminente e continuamos a entrar em contato com os autores para que eles corrijam seus aplicativos de áudio da Web.

Por que fizemos isso em vez de voltar à implementação anterior? Em parte, ficamos reticentes a fazer muito para trás. Já removemos essas APIs e, como um bom efeito colateral, os aplicativos podem funcionar bem no Firefox, que nunca deu suporte a um objeto AudioContext com prefixo (e até mesmo!) em seu suporte ao Web Audio lançado inicialmente no ano passado.

O restante desta atualização oferece um guia para corrigir coisas que podem ser corrompidas no seu código devido a essa mudança. A melhor coisa sobre corrigir esses problemas é que seu código provavelmente também funcionará no Firefox também! (Eu pensei por muito tempo que meu aplicativo Vocoder estava corrompido devido à implementação do Firefox, mas acabou sendo um desses problemas!)

Se você quiser apenas começar a usar, confira a biblioteca monkey-patch que escrevi para aplicativos criados no antigo código de Web Audio. Isso pode ajudar você a começar a trabalhar em pouco tempo, porque ela atribuirá alias aos objetos e métodos corretamente. De fato, os patches que a biblioteca lista são um bom guia para as mudanças.

Antes de mais nada

Todas as referências a window.webkitAudioContext precisam ser feitas a window.AudioContext. Frequentemente, isso foi corrigido com uma simples:

window.AudioContext = window.AudioContext || window.webkitAudioContext;

Se o aplicativo responder algo como "Infelizmente, seu navegador não oferece suporte ao Web Audio. Use o Chrome ou o Safari." é bem provável que ela esteja procurando explicitamente por webkitAudioContext. Desenvolvedor ruim! Você poderia ter sido compatível com o Firefox por meses!

No entanto, há algumas outras remoções de código mais sutis, algumas das quais podem ser menos óbvias.

  • As constantes de tipo enumerado do BiquadFilter para o atributo .type, que agora é uma string, não aparecem mais no objeto BiquadFilterNode. Também não há suporte para elas no atributo .type. Então, você não usa mais .LOWPASS (ou 0), então o defina como "lowpass".
  • Além disso, o atributo Oscillator.type agora é, da mesma forma, um tipo enumerado de string, sem mais .SAWTOOTH.
  • PannerNode.type agora também é um tipo enumerado de string.
  • PannerNode.distanceModel agora também é um tipo enumerado de string.
  • createGainNode foi renomeado como createGain.
  • createDelayNode foi renomeado como createDelay.
  • createJavaScriptNode foi renomeado como createScriptProcessor.
  • AudioBufferSourceNode.noteOn() foi substituído por start().
  • AudioBufferSourceNode.noteGrainOn() também foi substituído por start().
  • AudioBufferSourceNode.noteOff() foi renomeado como stop().
  • OscillatorNode.noteOn() foi renomeado como start().
  • OscillatorNode.noteOff() foi renomeado como stop().
  • AudioParam.setTargetValueAtTime() foi renomeado como setTargetAtTime().
  • AudioContext.createWaveTable() e OscillatorNode.setWaveTable() agora foram renomeados como createPeriodicWave() andsetPeriodicWave()`.
  • AudioBufferSourceNode.looping foi removido, em favor de .loop
  • O AudioContext.createBuffer(ArrayBuffer, boolean) para decodificar de maneira síncrona um blob de dados de áudio codificados foi removido. Chamadas síncronas que levam muito tempo para serem concluídas são uma prática de codificação ruim. Em vez dela, use a chamada decodeAudioData assíncrona. Essa é uma das mudanças mais desafiadoras: você precisa mudar o fluxo lógico, mas é uma prática muito melhor. Ehsan Angkari, do Mozilla, escreveu um bom exemplo de como fazer isso em sua postagem sobre a conversão para áudio da Web padrão.

Muitos deles (como a renomeação de createGainNode e a remoção da decodificação síncrona em createBuffer) obviamente aparecerão como erros no console de ferramentas para desenvolvedores. No entanto, alguns outros, como este uso:

MULTI_LINE_CODE_PLACEHOLDER_1

não aparecerá e falhará silenciosamente (myFilterNode.BANDPASS agora será resolvido como "undefined", e a tentativa de definir .type como "undefined" simplesmente não produzirá nenhum efeito. Aliás, isso era o que estava causando a falha do vocoder.) Da mesma forma, basta atribuir o filter.type a um número usado para funcionar:

myFilterNode.type = 2;

Mas agora, você precisa usar a enumeração de string:

myFilterNode.type = “bandpass”;

Então, use um grep no código para os seguintes termos:

  • webkitAudioContext
  • .LOWPASS
  • .HIGHPASS
  • .BANDPASS
  • .LOWSHELF
  • .HIGHSHELF
  • .PEAKING
  • .NOTCH
  • .ALLPASS
  • .SINE
  • .SQUARE
  • .SAWTOOTH
  • .TRIANGLE
  • .noteOn
  • .noteGrainOn
  • .noteOff
  • .setWaveTable
  • .createWaveTable
  • .looping
  • .EQUALPOWER
  • .HRTF
  • .LINEAR
  • .INVERSE
  • .EXPONENTIAL
  • createGainNode
  • createDelayNode
  • .type: sim, haverá muitos falsos positivos, mas essa é a única maneira de entender o último exemplo acima.

Mais uma vez, se você estiver com pressa e quiser começar a usar, é só pegar uma cópia da biblioteca monkeypatch webkitAudioContext e incluí-la no seu aplicativo. Divirta-se!