m36의 웹 오디오 변경사항

Chris Wilson
Chris Wilson

Web Audio 변경사항

Google은 표준을 중요하게 생각합니다. Google은 표준 정의 웹 플랫폼을 구축하는 사명을 가지고 있습니다. 한동안 Web Audio API (특히 webkitAudioContext 객체)의 webkit 접두사 구현과 계속 지원해 온 Web Audio의 지원 중단된 일부 부분이 이 문제의 원인 중 하나였습니다.

접두사가 없는 AudioContext 객체를 지원하기 시작했기 때문에 Chrome 36에서는 접두사가 있는 webkitAudioContext 지원을 삭제할 계획이었습니다. 예상보다 더 문제가 많았기 때문에 Chrome 36에서는 접두사가 있는 메서드와 접두사가 없는 메서드 모두 지원합니다. 그러나 다시 도입된 webkitAudioContext에서도 createGainNode 및 createJavaScriptNode와 같은 여러 기존 메서드와 속성이 삭제되었습니다. 간단히 말해 Chrome 36에서 webkitAudioContext와 AudioContext는 서로의 별칭입니다. 두 가지 기능에는 차이가 없습니다.

Chrome 36 이후 몇 번의 출시에서 이 접두사 지원이 완전히 삭제될 예정입니다. 변경이 임박하면 여기에서 공지할 예정이며, Google은 작성자에게 연락하여 웹 오디오 애플리케이션을 수정하라고 계속 요청하고 있습니다.

이전 구현으로 되돌리는 대신 이렇게 한 이유는 무엇인가요? 그 이유는 부분적으로 너무 뒤로 돌아가는 것을 꺼렸기 때문입니다. 이미 이러한 API는 삭제되었으며, 이 별칭 지정의 좋은 부작용으로, 애플리케이션이 작년 가을에 처음 출시된 웹 오디오 지원에서 접두사가 있는 AudioContext 객체를 지원하지 않았던 Firefox에서도 잘 작동할 수 있습니다.

이 업데이트의 나머지 부분에서는 이 변경사항으로 인해 코드에서 손상될 수 있는 항목을 수정하는 방법을 안내합니다. 이러한 문제를 해결하면 코드가 Firefox에서도 작동할 가능성이 높습니다. (오랫동안 Firefox 구현으로 인해 Vocoder 애플리케이션이 손상되었다고 생각했지만 이러한 문제 중 하나로 밝혀졌습니다.)

바로 시작하고 싶다면 이전 Web Audio 코드로 작성된 애플리케이션용으로 작성한 원숭이 패치 라이브러리를 살펴보세요. 객체와 메서드의 별칭을 적절하게 지정하여 최소한의 시간으로 시작하고 실행할 수 있습니다. 실제로 라이브러리에 나열된 패치는 변경된 사항을 파악하는 데 유용한 가이드입니다.

무엇보다도

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)가 삭제되었습니다. 완료하는 데 시간이 오래 걸리는 동기 호출은 좋지 않은 코딩 관행입니다. 대신 비동기 decodeAudioData 호출을 사용하세요. 이는 로직 흐름을 실제로 변경해야 하는 더 어려운 변경사항 중 하나이지만 훨씬 더 나은 방법입니다. Mozilla의 Ehsan Angkari는 표준 Web Audio로 변환에 관한 게시물에서 이를 수행하는 방법에 관한 멋진 예시를 작성했습니다.

createGainNode의 이름 변경, createBuffer의 동기식 디코딩 삭제와 같은 많은 변경사항은 개발자 도구 콘솔에 오류로 표시됩니다. 그러나 다음과 같은 사용법은 예외입니다.

MULTI_LINE_CODE_PLACEHOLDER_1

전혀 표시되지 않고 자동으로 실패합니다. 이제 myFilterNode.BANDPASS가 정의되지 않음으로 확인되고 .type을 정의되지 않음으로 설정하려고 하면 아무런 효과가 없습니다. 이로 인해 보코더가 작동하지 않았습니다.) 마찬가지로 filter.type을 작동하는 데 사용된 숫자로 할당하면 됩니다.

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

다시 한번 말씀드리지만, 서둘러 시작하고 싶다면 내 monkeypatch webkitAudioContext 라이브러리의 사본을 가져와 애플리케이션에 포함하세요. 즐거운 오디오 해킹 되세요.