m36의 웹 오디오 변경사항

크리스 윌슨
크리스 윌슨

웹 오디오 변경사항

Google은 표준을 중요하게 생각합니다. Google의 사명은 표준이 정의된 웹 플랫폼을 구축하는 것입니다. 이 문제에 대한 작은 사마함 중 하나는 Web Audio API (특히 webkitAudioContext 객체)의 webkit- 접두사 구현과 Google에서 계속 지원해 왔던 웹 오디오의 지원 중단된 일부 부분이었습니다.

원래는 Chrome 36에서 접두사가 붙은 webkitAudioContext에 대한 지원을 중단할 예정이었으나 Google에서 접두사가 없는 AudioContext 객체를 지원하기 시작했기 때문입니다. 이 문제는 예상보다 더 성가신 것으로 나타났기 때문에 Chrome 36은 접두사 없는 접두사와 접두사를 모두 지원합니다. 그러나 다시 도입된 webkitAudioContext에서도 createGainNode 및 createJavaScriptNode와 같은 여러 기존 메서드와 속성을 삭제했습니다. 간단히 말해 Chrome 36에서 webkitAudioContext와 AudioContext는 서로의 별칭이며 기능상에는 차이가 없습니다.

Google은 Chrome 36 이후 몇 차례의 출시를 예정하여 접두사에 대한 지원을 완전히 삭제할 예정입니다. 이러한 변화가 임박하면 여기에서 공지할 예정이며, 웹 오디오 애플리케이션 수정을 위해 작성자에게 계속 연락할 예정입니다.

이전 구현으로 되돌리는 대신 이렇게 하는 이유는 무엇인가요? 일부 부분에서는 너무 뒤로 옮겨가는 것을 자제해 왔습니다. 이러한 API는 이미 제거했습니다. 이 앨리어싱의 좋은 부작용을 위해 애플리케이션은 Firefox에서 제대로 작동할 수 있습니다. Firefox는 지난 가을에 처음 출시된 웹 오디오 지원에서 접두사가 붙은 AudioContext 객체를 지원하지 않았던 것이 맞습니다.

이 업데이트의 나머지 부분에서는 이러한 변경으로 인해 코드에서 손상될 수 있는 문제를 해결하기 위한 가이드를 제공합니다. 이러한 문제를 해결할 때의 가장 좋은 점은 코드가 Firefox에서도 작동할 가능성이 높다는 것입니다. (Firefox의 구현 때문에 Vocoder 애플리케이션이 손상될 것이라고 오랫동안 생각했으나 이러한 문제 중 하나였습니다.)

바로 시작하고 실행하려면 이전 웹 오디오 코드로 작성된 애플리케이션용으로 작성한 monkey-patch 라이브러리를 살펴보세요. 이 라이브러리는 객체와 메서드의 별칭을 적절하게 지정하므로 최소한의 시간 내에 시작하고 실행하는 데 도움이 될 수 있습니다. 실제로 라이브러리 목록의 패치는 변경된 사항을 파악할 수 있는 좋은 가이드입니다.

첫 번째이자

window.webkitAudioContext에 대한 모든 참조는 대신 window.AudioContext에 이루어져야 합니다. 이 문제는 대부분 간단한 방법으로 해결되었습니다.

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

앱이 '죄송합니다. 브라우저에서 웹 오디오를 지원하지 않습니다. Chrome이나 Safari를 사용해 주세요.'라는 오류 메시지가 표시됩니다. 명시적으로 webkitAudioContext을(를) 찾고 있을 가능성이 큽니다. 개발자님! Firefox를 몇 달 동안 지원해 왔다면

그러나 보다 미묘한 코드 삭제가 몇 가지 더 있으며, 이 중 일부는 명확하지 않을 수 있습니다.

  • .type 속성 (현재 문자열)의 BiquadFilter 열거형 유형 상수가 더 이상 BiquadFilterNode 객체에 표시되지 않으며 .type 속성에서 지원되지 않습니다. 따라서 .LOWPASS (또는 0)을 더 이상 사용하지 않고 'lowpass'로 설정합니다.
  • 또한 Oscillator.type 속성도 마찬가지로 이제 문자열 열거 유형이며 .SAWTOOTH는 없습니다.
  • PannerNode.type도 이제 문자열 열거 유형입니다.
  • PannerNode.distanceModel도 이제 문자열 열거 유형입니다.
  • createGainNode 이름을 createGain로 바꿨습니다.
  • createDelayNode 이름을 createDelay로 바꿨습니다.
  • createJavaScriptNode 이름을 createScriptProcessor로 바꿨습니다.
  • 이제 AudioBufferSourceNode.noteOn()start()로 대체됩니다.
  • AudioBufferSourceNode.noteGrainOn()도 이제 start()로 대체됩니다.
  • AudioBufferSourceNode.noteOff()에서 stop()로 이름이 변경되었습니다.
  • OscillatorNode.noteOn()에서 start()로 이름이 변경되었습니다.
  • OscillatorNode.noteOff()에서 stop()로 이름이 변경되었습니다.
  • AudioParam.setTargetValueAtTime()에서 setTargetAtTime()로 이름이 변경되었습니다.
  • AudioContext.createWaveTable()OscillatorNode.setWaveTable()의 이름이 이제 createPeriodicWave() andsetPeriodicWave()`로 변경되었습니다.
  • AudioBufferSourceNode.looping이(가) 삭제되고 .loop으로 대체됩니다.
  • 인코딩된 오디오 데이터의 blob을 동기적으로 디코딩하는 AudioContext.createBuffer(ArrayBuffer, boolean)가 삭제되었습니다. 완료하는 데 시간이 오래 걸리는 동기 호출은 코딩 관행에 맞지 않습니다. 대신 비동기 debugAudioData 호출을 사용하세요. 이는 실제로 로직 흐름을 변경해야 하는 까다로운 변경사항 중 하나이지만 훨씬 더 나은 방법입니다. 모질라의 에산 안카리(Ehsan Angkari)가 표준 웹 오디오로의 변환에 관한 게시물을 통해 이 작업을 수행하는 방법에 대한 유용한 예시를 작성했습니다.

이러한 오류 중 다수 (예: createGainNode의 이름 변경, createBuffer의 동기 디코딩 삭제)가 개발자 도구 콘솔에 오류로 표시됩니다. 그러나 다음과 같은 몇 가지 사용 사례는 다음과 같습니다.

MULTI_LINE_CODE_PLACEHOLDER_1

표시되지 않으며 자동으로 실패합니다. 이제 myFilterNode.BANDPASS가 undefined로 확인되고 .type을 undefined로 설정하려고 하면 아무런 효과가 없습니다. 그런데 이 때문에 보코더에 오류가 발생했습니다.) 마찬가지로, 필터 유형을 정상적으로 작동하는 숫자에 할당하기만 하면 됩니다.

myFilterNode.type = 2;

그러나 이제는 문자열 열거를 사용해야 합니다.

myFilterNode.type = “bandpass”;

따라서 다음 용어의 경우 코드에 grep하는 것이 좋습니다.

  • 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 (예, 많은 거짓양성이 발생하지만 이것이 위의 마지막 예를 포착할 수 있는 유일한 방법입니다.)

다시 한번 급해서 작업을 시작하고 싶다면 my monkeypatch webkitAudioContext 라이브러리 사본을 가져와 애플리케이션에 포함하기만 하면 됩니다. 오디오 해킹을 즐겁게 활용하시기 바랍니다.