Zmiany Web Audio w M36

Kuba Sienkiewicz
Chris Wilson
Twitter

Zmiany Web Audio

W Google uwielbiamy standardy. Naszą misją jest stworzenie platformy internetowej opartej na standardach. Jedną z małych brodawek na tej samej stronie jest od jakiegoś czasu implementacja interfejsu Web Audio API z przedrostkiem webkit- (zwłaszcza obiekt webkitAudioContext) i niektóre wycofane elementy interfejsu Web Audio, które nadal są obsługiwane.

Początkowo planowaliśmy usunąć obsługę obiektu AudioContext w Chrome 36 z prefiksem webkitAudioContext. Okazało się to dość problematyczne, więc Chrome 36 obsługuje zarówno interfejs bez przedrostka, jak i z prefiksem. Jednak nawet w odnowionej wersji webkitAudioContext z niej usunięto kilka starszych metod i atrybutów, takich jak createGainNode czy createJavaScriptNode. Krótko mówiąc, w Chrome 36 opcje webkitAudioContext i AudioContext są wzajemnymi aliasami, nie ma między nimi różnicy w funkcjonalności.

Po wersji Chrome 36 całkowicie wycofamy obsługę prefiksu, prawdopodobnie w kilku wersjach. Gdy nadejdzie ta zmiana, poinformujemy o tym tutaj i nadal kontaktujemy się z autorami w celu naprawienia aplikacji Web Audio.

Dlaczego to zrobiliśmy, zamiast przywrócić poprzednią implementację? Cóż, niechętnie podchodziliśmy za daleko wstecz. Te interfejsy API zostały już usunięte i – jako fajny efekt uboczny w przypadku takiego aliasu, aplikacje mogą dobrze funkcjonować w Firefoksie, który nigdy nie obsługiwał obiektu AudioContext (a nawet dobrze!) w obsłudze Web Audio, która została po raz pierwszy udostępniona jesienią zeszłego roku.

Pozostała część tej aktualizacji zawiera wskazówki dotyczące naprawiania elementów, które mogą przestać działać w kodzie w wyniku tej zmiany. Ogromną zaletą rozwiązania tych problemów jest to, że Twój kod prawdopodobnie będzie działać także w przeglądarce Firefox! Przez długi czas myślałem, że moja aplikacja Vocoder nie działa z powodu implementacji Firefoksa, ale okazało się, że to jeden z tych problemów.

Jeśli chcesz po prostu zacząć korzystać z aplikacji, zajrzyj do monkey-patch biblioteki napisanej przeze mnie dla aplikacji, które zostały napisane w starym kodzie Web Audio. Pomogą Ci one w szybkim rozpoczęciu pracy i ułatwianiu korzystania z obiektów. Poprawki na liście w bibliotece to dobry przewodnik po tym, co się zmieniło.

Najważniejsze

Wszystkie odniesienia do window.webkitAudioContext powinny być przekierowane do window.AudioContext. Często udaje nam się rozwiązać ten problem w następujący sposób:

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

Jeśli aplikacja wyświetla komunikat „Niestety, Twoja przeglądarka nie obsługuje Web Audio. Użyj Chrome lub Safari”. Pewnie chodzi o webkitAudioContext. Niegrzeczny programista! Istnieje możliwość, że przeglądarka Firefox będzie działać przez całe miesiące.

Istnieje jednak kilka innych, bardziej subtelnych usunięć kodu, z których część może być mniej oczywista.

  • Stałe typu wskazanego przez BiquadFilter dla atrybutu .type (który jest teraz ciągiem znaków) nie pojawiają się już w obiekcie BiquadFilterNode i nie są obsługiwane w atrybucie .type. Nie używasz już atrybutu .LOWPASS (lub 0) - ustawiasz wartość „lowpass”.
  • Poza tym atrybut Oscillator.type jest teraz łańcuchem wyliczonym jako typ – już nie .SAWTOOTH.
  • PannerNode.type jest teraz również typem wyliczonym w postaci ciągu znaków.
  • PannerNode.distanceModel jest teraz również typem wyliczonym w postaci ciągu znaków.
  • Nazwa elementu „createGainNode” została zmieniona na „createGain”
  • Nazwa elementu „createDelayNode” została zmieniona na „createDelay”
  • Nazwa elementu „createJavaScriptNode” została zmieniona na „createScriptProcessor”
  • Pole AudioBufferSourceNode.noteOn() zostało zastąpione przez start()
  • Pole AudioBufferSourceNode.noteGrainOn() zostało też zastąpione przez start()
  • Nazwa elementu AudioBufferSourceNode.noteOff() została zmieniona na stop()
  • Nazwa elementu OscillatorNode.noteOn() została zmieniona na start()
  • Nazwa elementu OscillatorNode.noteOff() została zmieniona na stop()
  • Nazwa elementu AudioParam.setTargetValueAtTime() została zmieniona na setTargetAtTime()
  • Nazwy AudioContext.createWaveTable() i OscillatorNode.setWaveTable() zmieniły się na createPeriodicWave() andsetPeriodicWave().
  • Usunięto: AudioBufferSourceNode.looping na rzecz: .loop
  • Funkcja AudioContext.createBuffer(ArrayBuffer, boolean), która umożliwia synchroniczne dekodowanie bloba zakodowanych danych audio, została usunięta. Synchroniczne wywołania, które są długotrwałe z kodowaniem, nie są dobrym sposobem na kodowanie. Zamiast nich użyj wywołania asynchronicznego dekodowaniaAudioData. Jest to jedna z trudniejszych zmian – trzeba samodzielnie zmienić tok logiki, ale jest to zdecydowanie lepsza praktyka. Ehsan Angkari z Mozilli (Ehsan Angkari) podał fajny przykład tego, jak to zrobić w swoim poście na temat konwersji do standardowego formatu Web Audio.

Wiele z nich (np. zmiana nazwy createGainNode czy usunięcie synchronicznego dekodowania w createBuffer) jest oczywiście wyświetlany w konsoli narzędzi dla programistów jako błąd, ale inne, takie jak to użycie:

MULTI_LINE_CODE_PLACEHOLDER_1

nie pojawi się w ogóle i dyskretnie się nie uda (myFilterNode.BANDPASS zostanie teraz uznana za niezdefiniowaną, a próba ustawienia atrybutu .type na wartość nieokreślona zakończy się niepowodzeniem; Przy okazji to to było powodem nieprawidłowości w wokoderze). Podobnie po przypisaniu parametru filtra.type do stosowanej liczby:

myFilterNode.type = 2;

Teraz musisz jednak użyć zapisu w postaci ciągu znaków:

myFilterNode.type = “bandpass”;

Możesz więc użyć kodu greując kod w przypadku tych terminów:

  • 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 (Tak, można uzyskać wiele fałszywych trafień, ale to jedyny sposób, aby wychwycić ostatni powyżej przykład)

Jeszcze raz – jeśli spieszysz się i chcesz szybko zacząć działać, pobierz kopię mojej biblioteki webkitAudioContext i dodaj ją do swojej aplikacji. Udanego Hackingu audio!