Modifications de Web Audio dans m36

Chris Wilson
Chris Wilson
Twitter

Modifications de l'audio sur le Web

Chez Google, nous adorons les standards. Nous avons pour mission de créer une plate-forme Web standard. Depuis quelque temps, l'une des petites verrues à ce sujet est l'implémentation de l'API Web Audio (préfixée par le webkitAudioContext) (en particulier l'objet webkitAudioContext) et certains des bits obsolètes de Web Audio que nous continuons de prendre en charge.

À l'origine, Chrome 36 prévoyait de supprimer la prise en charge du webkitAudioContext précédé du préfixe, car nous avions commencé à prendre en charge l'objet AudioContext sans préfixe. Cela s'est avéré plus pénible que prévu. Chrome 36 est donc compatible avec les méthodes sans préfixe et avec les préfixes. Toutefois, même dans le réintroduit de webkitAudioContext, plusieurs anciennes méthodes et attributs, tels que createGainNode et createJavaScriptNode, ont été supprimés. En bref, dans Chrome 36, webkitAudioContext et AudioContext sont des alias l'un de l'autre. Il n'y a aucune différence de fonctionnalité entre les deux.

Ce préfixe ne sera plus pris en charge après Chrome 36, probablement dans quelques versions. Nous ferons une annonce sur cette page lorsque ce changement sera imminent, et nous continuons à contacter les auteurs afin qu'ils corrigent leurs applications Web Audio.

Pourquoi avons-nous fait cela, plutôt que de revenir à l'implémentation précédente ? En partie, nous avons été réticents à aller trop en arrière ; nous avons déjà supprimé ces API, et comme effet secondaire de cette création d'alias, les applications peuvent alors fonctionner correctement sur Firefox, qui n'a jamais pris en charge un objet AudioContext préfixé (et tout à fait aussi !) dans leur prise en charge Web Audio initialement publiée l'automne dernier.

Le reste de cette mise à jour fournit un guide pour corriger les problèmes susceptibles de causer un dysfonctionnement dans votre code en raison de cette modification. L'avantage de la résolution de ces problèmes, c'est que votre code est susceptible de fonctionner également dans Firefox ! (J'ai pensé depuis longtemps que mon application Vocoder ne fonctionnait pas à cause de l'implémentation de Firefox, mais il s'est avéré que c'était l'un de ces problèmes !)

Si vous souhaitez simplement être opérationnel, vous pouvez consulter une bibliothèque monkey-patch que j'ai écrite pour les applications écrites dans l'ancien code audio Web. Cela peut vous aider à être opérationnel en un temps minimal, car elle créera des alias pour les objets et les méthodes de manière appropriée. En effet, les correctifs présentés dans la bibliothèque constituent un bon guide pour identifier les éléments qui ont changé.

Avant toute chose,

Toutes les références à window.webkitAudioContext doivent être remplacées par window.AudioContext. Ce problème a souvent été corrigé en procédant comme suit:

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

Si l'application affiche un message du type "Malheureusement, votre navigateur n'est pas compatible avec l'audio Web. Veuillez utiliser Chrome ou Safari." - il est très probable qu'il recherche explicitement webkitAudioContext. Mauvaise développeur ! Cela faisait des mois que vous preniez en charge Firefox !

Il existe toutefois d'autres suppressions de code plus subtiles, dont certaines peuvent être moins évidentes.

  • Les constantes de type énumérées BiquadFilter pour l'attribut .type (qui est désormais une chaîne) n'apparaissent plus dans l'objet BiquadFilterNode. Elles ne sont pas compatibles avec l'attribut .type. Vous n'utilisez donc plus .LOWPASS (ou 0), mais définissez-le sur "passerelle".
  • De plus, l'attribut Oscillator.type est désormais un type énuméré de chaîne (plus de .SAWTOOTH).
  • PannerNode.type est désormais également un type de chaîne énuméré.
  • PannerNode.distanceModel est désormais également un type de chaîne énuméré.
  • Changement de nom : createGainNode devient createGain.
  • Changement de nom : createDelayNode devient createDelay.
  • Changement de nom : createJavaScriptNode devient createScriptProcessor.
  • Remplacement de AudioBufferSourceNode.noteOn() par start().
  • AudioBufferSourceNode.noteGrainOn() est également remplacé par start().
  • AudioBufferSourceNode.noteOff() a été renommé stop().
  • OscillatorNode.noteOn() a été renommé start().
  • OscillatorNode.noteOff() a été renommé stop().
  • AudioParam.setTargetValueAtTime() a été renommé setTargetAtTime().
  • AudioContext.createWaveTable() et OscillatorNode.setWaveTable() sont désormais renommés createPeriodicWave() andsetPeriodicWave()`.
  • AudioBufferSourceNode.looping a été supprimé au profit de .loop
  • Suppression de AudioContext.createBuffer(ArrayBuffer, boolean) pour décoder de manière synchrone un blob de données audio encodées. Les appels synchrones dont l'exécution prend beaucoup de temps constituent une mauvaise pratique de codage. Utilisez plutôt l'appel asynchrone decodeAudioData. C'est l'un des changements les plus difficiles, vous devez réellement changer le flux de logique, mais une bien meilleure pratique. Ehsan Angkari de Mozilla a rédigé un excellent exemple de cette procédure dans son article sur la conversion en audio standard pour le Web.

Un grand nombre d'entre elles (comme le changement de nom de createGainNode et la suppression du décodage synchrone dans createBuffer) apparaîtront de toute évidence comme une erreur dans la console des outils pour les développeurs. Cependant, d'autres, comme l'exemple suivant, sont signalés comme suit:

MULTI_LINE_CODE_PLACEHOLDER_1

ne s'affichera pas du tout et échouera silencieusement (myFilterNode.BANDPASS se résoudra à présent en indéfini, et la tentative de définir .type sur non défini échouera tout simplement à produire un effet. C'est d'ailleurs ce qui était à l'origine de l'échec du vocoder.) De même, il suffit d'affecter le filter.type à un numéro qui a déjà fonctionné:

myFilterNode.type = 2;

Toutefois, vous devez maintenant utiliser l'énumération de chaîne:

myFilterNode.type = “bandpass”;

Vous pouvez donc exécuter une commande grep dans votre code pour les termes suivants:

  • 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 (oui, cela aura beaucoup de faux positifs, mais c'est le seul moyen d'identifier le dernier exemple ci-dessus !)

Une fois encore, si vous êtes pressé et que vous souhaitez vous lancer, il vous suffit de récupérer une copie de ma bibliothèque monkeypatch webkitAudioContext et de l'inclure dans votre application. Amusez-vous avec vos pistes audio !