Cambios de audio web en m36

Chris Wilson
Chris Wilson

Cambios en Web Audio

En Google, nos encantan los estándares. Nuestra misión es compilar la plataforma web definida por estándares. Uno de los pequeños problemas durante algún tiempo fue la implementación de la API de Web Audio con el prefijo webkit (en particular, el objeto webkitAudioContext) y algunos de los fragmentos obsoletos de Web Audio que seguimos admitiendo.

Originalmente, se planeó que Chrome 36 quitara la compatibilidad con webkitAudioContext con prefijo, ya que comenzamos a admitir el objeto AudioContext sin prefijo. Esto resultó ser más problemático de lo esperado, por lo que Chrome 36 admite sin prefijo y con prefijo. Sin embargo, incluso en el webkitAudioContext reintroducido, se quitaron varios métodos y atributos heredados, como createGainNode y createJavaScriptNode. En resumen, en Chrome 36, webkitAudioContext y AudioContext son alias entre sí; no hay diferencia en la funcionalidad entre ambos.

Quitaremos la compatibilidad con el prefijo por completo después de Chrome 36, probablemente en un par de versiones. Haremos un anuncio aquí cuando el cambio sea inminente y seguiremos comunicándonos con los autores para que corrijan sus aplicaciones de Web Audio.

¿Por qué hicimos esto en lugar de volver a la implementación anterior? En parte, hemos sido reacios a retroceder demasiado. Ya quitamos esas APIs y, como un buen efecto secundario de este alias, las aplicaciones pueden funcionar bien en Firefox, que nunca admitió un objeto AudioContext con prefijo (y con razón) en su compatibilidad con Web Audio, que se lanzó inicialmente el otoño pasado.

En el resto de esta actualización, se proporciona una guía para corregir los problemas que puedan ocurrir en tu código debido a este cambio. La gran ventaja de solucionar estos problemas es que es muy probable que tu código también funcione en Firefox. (Durante mucho tiempo, pensé que mi aplicación de Vocoder estaba dañada debido a la implementación de Firefox, pero resultó ser uno de estos problemas).

Si solo quieres comenzar a usar la biblioteca, te recomiendo que mires una biblioteca de monkey-patch que escribí para aplicaciones que se escribieron en el código de Web Audio anterior. Esto puede ayudarte a comenzar a usar la biblioteca en un tiempo mínimo, ya que asignará un alias a los objetos y métodos de forma adecuada. De hecho, los parches que enumera la biblioteca son una buena guía de los cambios.

En primer lugar

Todas las referencias a window.webkitAudioContext deben hacerse a window.AudioContext. A menudo, esto se soluciona con una simple acción:

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

Si tu app responde con un mensaje como "Lamentablemente, tu navegador no es compatible con Web Audio. Usa Chrome o Safari”. Es probable que esté buscando webkitAudioContext de forma explícita. ¡Desarrollador malo! Podrías haber estado apoyando a Firefox durante meses.

Sin embargo, hay otras eliminaciones de código más sutiles, algunas de las cuales pueden ser menos obvias.

  • Las constantes de tipo enumerado BiquadFilter para el atributo .type (que ahora es una cadena) ya no aparecen en el objeto BiquadFilterNode y no las admitimos en el atributo .type. Por lo tanto, ya no usas .LOWPASS (o 0), sino que lo configuras en “pasa-bajo”.
  • Además, el atributo Oscillator.type ahora también es un tipo enumerado de cadena, ya no hay .SAWTOOTH.
  • PannerNode.type ahora también es un tipo enumerado de cadena.
  • PannerNode.distanceModel ahora también es un tipo enumerado de cadena.
  • Se cambió el nombre de createGainNode por createGain.
  • Se cambió el nombre de createDelayNode por createDelay.
  • Se cambió el nombre de createJavaScriptNode por createScriptProcessor.
  • AudioBufferSourceNode.noteOn() ahora se reemplaza por start()
  • AudioBufferSourceNode.noteGrainOn() también se reemplaza por start().
  • Se cambió el nombre de AudioBufferSourceNode.noteOff() por stop().
  • Se cambió el nombre de OscillatorNode.noteOn() por start().
  • Se cambió el nombre de OscillatorNode.noteOff() por stop().
  • Se cambió el nombre de AudioParam.setTargetValueAtTime() por setTargetAtTime().
  • AudioContext.createWaveTable() y OscillatorNode.setWaveTable() ahora se llaman createPeriodicWave() andsetPeriodicWave()`.
  • Se quitó AudioBufferSourceNode.looping y se reemplazó por .loop.
  • Se quitó AudioContext.createBuffer(ArrayBuffer, boolean) para decodificar de forma síncrona un blob de datos de audio codificados. Las llamadas síncronas que tardan mucho tiempo en completarse son una práctica de programación deficiente. En su lugar, usa la llamada asíncrona decodeAudioData. Este es uno de los cambios más desafiantes (debes cambiar el flujo de lógica), pero es una práctica mucho mejor. Ehsan Angkari, de Mozilla, escribió un buen ejemplo de cómo hacerlo en su publicación sobre la conversión a Web Audio estándar.

Muchos de estos (como el cambio de nombre de createGainNode y la eliminación de la decodificación síncrona en createBuffer) aparecerán en la consola de herramientas para desarrolladores como un error. Sin embargo, otros, como este uso:

MULTI_LINE_CODE_PLACEHOLDER_1

no aparecerá en absoluto y fallará de forma silenciosa (myFilterNode.BANDPASS ahora se resolverá como indefinido, y el intento de establecer .type como indefinido simplemente no producirá ningún efecto. Esto, por cierto, era lo que causaba que fallara el vocoder). Del mismo modo, solo asignar el filter.type a un número solía funcionar:

myFilterNode.type = 2;

Pero ahora, debes usar la enumeración de cadenas:

myFilterNode.type = bandpass;

Por lo tanto, te recomendamos que busques los siguientes términos en tu código:

  • 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 (sí, esto tendrá muchos falsos positivos, pero es la única forma de detectar el último ejemplo anterior).

Una vez más, si tienes prisa y quieres comenzar a usarla, toma una copia de mi biblioteca monkeypatch webkitAudioContext y, luego, inclúyela en tu aplicación. ¡Que disfrutes de la piratería de audio!