웹 오디오 API를 사용한 동적 사운드

키 테이크 아웃

웹 오디오 API는 웹 애플리케이션에서 사운드를 제어하는 ​​역동적이고 정교한 방법을 제공하여 기능이 제한된 HTML5 오디오 요소보다보다 강력한 솔루션을 제공합니다. 웹 오디오 API는 원시 파형 데이터의 조작, 분석 및 왜곡을 허용하여 게임 및 사운드 편집과 같은 응용 프로그램에 이상적입니다. 또한 브라우저에서 잘 지원되는 깔끔한 API를 제공합니다.

API는 오디오 데이터를 캡슐화하는 데 사용할 수있는 AudioContext 객체와 복잡한 사운드 조작을 위해 함께 묶을 수있는 다양한 오디오 드를 생성 할 수 있습니다. 비행 시뮬레이터 게임에서 엔진 사운드의 피치 변경과 같은 동적 사운드를 만드는 데 사용될 수 있습니다. 기본 재생과는 별도로 API는 Convolution 및 Wave Shaping과 같은보다 정교한 사운드 조작을 가능하게합니다. 이것은 스피커를 통해 오는 음성과 같은 현실적인 음향 효과를 만드는 데 사용될 수 있습니다. 또한 API는 또한 갭리스 오디오 재생 및 루핑을 허용하여 웹 게임에서 발생하는 일반적인 문제를 해결합니다.

이 기사는 Microsoft의 Web Dev 시리즈의 일부입니다. Sitepoint를 가능하게하는 파트너를 지원해 주셔서 감사합니다.

웹 오디오 API 이전에 html5는 오디오 요소를 제공했습니다. 지금 기억하기 어려운 것처럼 보이지만 오디오 요소 이전에 브라우저에서 사운드를위한 최선의 옵션은 플러그인이었습니다! 오디오 요소는 실제로 흥미 진진했지만 꽤 단 하나의 초점이있었습니다. 그것은 본질적으로 비디오가없는 비디오 플레이어였으며 음악이나 팟 캐스트와 같은 긴 오디오에 적합하지만 게임 요구에 적합하지 않습니다. 우리는 루핑 문제, 동시 사운드 제한, 결함 및 사운드 데이터 자체에 대한 전체 액세스 부족을 참고 (또는 찾은 해결 방법을 찾았습니다. 다행히도, 우리의 인내심은 돈을 지불했습니다. 오디오 요소가 부족한 경우 웹 오디오 API가 제공됩니다. 그것은 우리에게 전례없는 사운드에 대한 제어를 제공하며 게임에서 정교한 사운드 편집에 이르기까지 모든 것에 적합합니다. 이 모든 것은 깔끔한 API와 함께 사용하기가 정말 재미 있고 잘 지원됩니다.
• 좀 더 구체적으로하자 : 웹 오디오는 사운드의 원시 파형 데이터에 액세스 할 수있게 해주 며 조작, 분석, 왜곡 또는 달리 수정할 수있게 해줍니다. 캔버스 API가 픽셀에 맞는 것은 오디오입니다. 당신은 사운드 데이터에 대한 깊고 주로 액세스 할 수있는 액세스 권한이 있습니다. 정말 강력합니다! 이 자습서는 Flight Arcade의 시리즈에서 두 번째로 웹 플랫폼과 새로운 Microsoft Edge 브라우저 및 EdgeHTML 렌더링 엔진에서 가능한 것을 보여주기 위해 구축되었습니다. 이 기사의 대화식 코드 및 예제는 다음과 같습니다.[YouTube XYAQ9TPMXRA]

  비행 소리 초기 버전의 비행 시뮬레이터조차도 소리를 사용하여 비행 느낌을 재현하기 위해 노력했습니다. 가장 중요한 사운드 중 하나는 스로틀로 피치를 변경하는 엔진의 동적 피치입니다. 우리는 웹의 게임을 다시 상상하면서 정적 엔진 노이즈가 실제로 평평 해 보일 것이므로 엔진 노이즈의 동적 피치는 웹 오디오의 명백한 후보였습니다.

  .

  당신은 여기에서 대화식으로 시도 할 수 있습니다.

  덜 분명하지만 (아마도 더 흥미로운) 비행 강사의 목소리였습니다. 비행 아케이드의 초기 반복에서, 우리는 녹음 된 것처럼 강사의 목소리를 연주했으며 사운드 부스에서 나오는 것처럼 들렸습니다! 우리는 목소리를“강사”대신“내레이터”라고 언급하기 시작했다는 것을 알았습니다. 어쨌든 그 깨끗한 소리는 게임의 환상을 깨뜨 렸습니다. 조종석의 시끄러운 소리에 완벽한 오디오가 나오는 것은 옳지 않은 것 같습니다. 따라서이 경우 웹 오디오를 사용하여 음성 지시에 간단한 왜곡을 적용하고 비행을 배우는 현실감을 향상 시켰습니다! . 기사 끝에 강사 오디오 샘플이 있습니다. 아래 섹션에서는 웹 오디오 API를 사용하여 이러한 사운드를 만드는 방법에 대한 자세한 내용을 제공합니다. API 사용 : AudioContext 및 오디오 소스 모든 웹 오디오 프로젝트의 첫 번째 단계는 AudioContext 객체를 만드는 것입니다. 일부 브라우저 (크롬 포함)는 여전히이 API를 접두사해야하므로 코드는 다음과 같습니다.

  그런 다음 소리가 필요합니다. 실제로 웹 오디오 API로 처음부터 사운드를 생성 할 수 있지만 목적을 위해 사전 녹음 된 오디오 소스를로드하고 싶었습니다. 이미 HTML 오디오 요소를 가지고 있다면이를 사용할 수는 있지만 많은 시간을 사용할 수 있습니다. 결국 웹 오디오가있는 경우 누가 오디오 요소가 필요합니까? 가장 일반적으로‘HTTP 요청을 사용하여 오디오를 버퍼로 직접 다운로드합니다.

  이제 우리는 오디오 컨텍스트와 오디오 데이터가 있습니다. 다음 단계는 이러한 것들이 함께 작동하도록하는 것입니다. 이를 위해서는…

  가 필요합니다 audionodes 웹 오디오로 수행하는 모든 일에 대해 일부는 어떤 종류의 오디오 노드를 통해 발생하며 여러 가지 맛이 나옵니다. 일부 노드는 오디오 소스, 일부 노드는 오디오 출력 및 오디오 프로세서 또는 분석기로 사용됩니다. 흥미로운 일을하기 위해 함께 사슬을 할 수 있습니다.

  AudioContext를 일종의 사운드 스테이지로 생각할 수 있습니다. 포함하는 다양한 악기, 앰프 및 스피커는 모두 다른 유형의 오디오 드입니다. 웹 오디오 API로 작업하는 것은 이러한 모든 것들을 함께 꽂는 것과 매우 유사합니다 (예 : 효과 페달과 페달을 증폭기와 스피커 등에 넣는 것).

  . , 새로 인수 한 AudioContext 오디오 소스로 흥미로운 일을하려면 먼저 오디오 데이터를 소스 오디오로드로 캡슐화해야합니다.

  재생 <.> 그게 다야. 우리는 출처가 있습니다. 그러나 재생하기 전에 대상 노드에 연결해야합니다. 편의를 위해 AudioContext는 기본 대상 노드 (일반적으로 헤드폰 또는 스피커)를 노출시킵니다. 일단 연결되면 시작과 중지를 호출하는 문제 일뿐입니다.

  각 소스 노드에서 한 번만 시작 ()을 호출 할 수 있다는 점에 주목할 가치가 있습니다. 즉, "일시 정지"가 직접 지원되지 않습니다. 소스가 중지되면 만료됩니다. 다행히 소스 노드는 저렴한 객체로 쉽게 만들어 지도록 설계되었습니다 (오디오 데이터 자체는 별도의 버퍼로 기억하십시오). 따라서 일시 정지 사운드를 재개하려면 타임 스탬프 매개 변수로 새로운 소스 노드를 만들고 start ()를 만들 수 있습니다. AudioContext에는 타임 스탬프를 관리하는 데 사용할 수있는 내부 시계가 있습니다. 엔진 소리 그것은 기본 사항이지만 지금까지 수행 한 모든 작업 (간단한 오디오 재생)은 이전 오디오 요소로 수행 할 수있었습니다. 비행 아케이드의 경우 더 역동적 인 일을해야했습니다. 우리는 엔진의 속도로 피치가 바뀌기를 원했습니다.

  웹 오디오에서는 실제로 매우 간단합니다 (그리고 그것 없이는 거의 불가능했을 것입니다)! 소스 노드에는 재생 속도에 영향을 미치는 속도 속성이 있습니다. 피치를 늘리려면 재생 속도 만 증가시킵니다.

  엔진 사운드도 루프해야합니다. 그것은 또한 매우 쉽습니다 (그것에 대한 속성도 있습니다) :
  하지만 캐치가 있습니다. 많은 오디오 형식 (특히 압축 오디오)은 오디오 데이터를 고정 크기 프레임으로 저장하며 오디오 데이터 자체는 최종 프레임을 "채우지"않습니다. 이렇게하면 오디오 파일 끝에 작은 간격이 남을 수 있으며 오디오 파일이 반복되면 클릭 또는 결함이 발생할 수 있습니다. 표준 HTML 오디오 요소는 이러한 격차를 제어하지 않으며 오디오를 루핑하는 데 의존하는 웹 게임에 큰 도전이 될 수 있습니다. 다행히도 웹 오디오 API를 통한 갭리스 오디오 재생은 정말 간단합니다. 오디오의 루핑 부분의 시작과 끝에 타임 스탬프를 설정하는 문제 일뿐입니다 (이러한 값은 오디오 소스 자체와 관련이 있고 AudioContext 시계가 아닌 오디오 소스 자체와 관련이 있음).

  강사의 목소리

  지금까지 우리가 한 모든 일은 소스 노드 (오디오 파일)와 출력 노드 (일찍 설정 한 사운드 대상, 아마도 스피커)와 함께 사용되었지만 Audionodes는 훨씬 더 많이 사용할 수 있습니다. 소리 조작 또는 분석. Flight Arcade에서는 두 가지 노드 유형 (컨볼버 노드 및 WaveShaphernode)을 사용하여 강사의 목소리가 스피커를 통해 오는 것처럼 소리를냅니다. .

  컨볼 루션 W3C 사양에서

  Convolution은 많은 흥미로운 고품질 선형 효과를 달성하기 위해 오디오 신호에 적용될 수있는 수학적 과정입니다. 종종 그 효과는 콘서트 홀, 성당 또는 야외 원형 극장과 같은 음향 공간을 시뮬레이션하는 데 사용됩니다. 또한 옷장 내부에서 나오는 머플 사운드, 수중 사운드, 전화기를 통해 사운드 사운드 또는 빈티지 스피커 캐비닛을 통해 재생되는 소화 된 사운드와 같은 복잡한 필터 효과에 사용할 수 있습니다. 이 기술은 주요 영화 및 음악 제작에 매우 일반적으로 사용되며 매우 다재다능하고 고품질로 간주됩니다.

  컨볼 루션은 기본적으로 처리 할 사운드 (강사의 목소리)와 임펄스 응답이라는 소리의 두 가지 소리를 결합합니다. 임펄스 응답은 실제로 사운드 파일이지만 실제로 이러한 종류의 컨볼 루션 프로세스에만 유용합니다. 다른 소리로 복잡 할 때 특정 효과를 생성하도록 설계된 종류의 오디오 필터로 생각할 수 있습니다. 결과는 일반적으로 오디오의 단순한 수학적 조작보다 훨씬 더 현실적입니다. 를 사용하려면 컨볼어 노드를 만들고 임펄스 응답이 포함 된 오디오를로드 한 다음 노드를 연결합니다.

  웨이브 쉐이핑

  왜곡을 증가시키기 위해 WaveShaper 노드도 사용했습니다. 이 유형의 노드를 사용하면 오디오 신호에 수학적 왜곡을 적용하여 실제로 극적인 효과를 얻을 수 있습니다. 왜곡은 곡선 함수로 정의됩니다. 이러한 기능에는 복잡한 수학이 필요할 수 있습니다. 아래의 예, 우리는 MDN에서 친구들로부터 좋은 것을 빌 렸습니다.

  원래 파형과 파장이 적용된 파형의 뚜렷한 차이를 주목하십시오.

  당신은 여기에서 대화식으로 시도 할 수 있습니다.

  위의 예는 웹 오디오 API로 얼마나 많은 일을 할 수 있는지에 대한 극적인 표현입니다. 우리는 브라우저에서 사운드를 꽤 극적으로 변경하고있을뿐만 아니라 파형을 분석하고 캔버스 요소로 렌더링하고 있습니다! 웹 오디오 API는 엄청나게 강력하고 다재다능하며 솔직히 많은 재미! javaScript 로 더 많은 실습 Microsoft는 많은 오픈 소스 JavaScript 주제에 대한 많은 무료 학습을 보유하고 있으며 Microsoft Edge를 통해 더 많은 것을 만들어내는 임무를 수행하고 있습니다. 체크 아웃해야 할 사항은 다음과 같습니다

  Microsoft Edge Web Summit 2015 (새로운 브라우저, 새로운 웹 플랫폼 기능 및 커뮤니티의 초청 스피커를 통해 기대할 수있는 모든 일련 // 빌드/및 Windows 10의 빌드 (사이트 및 앱 용 새 JavaScript 엔진 포함) 웹을 깨지 않고 자바 스크립트 발전 (Christian Heilmann의 최근 기조 연설) 호스팅 된 웹 앱 및 웹 플랫폼 혁신 (Manifold.js와 같은 주제에 대한 심오한 다이빙 실용적인 성능 팁 HTML/JavaScript를 더 빠르게 만들 수 있습니다 (반응 형 디자인에서 캐주얼 게임, 성능 최적화, 성능 최적화에 이르기까지 7 부 시리즈) 최신 웹 플랫폼 JumpStart (HTML, CSS 및 JS의 기본 사항)

  및 일부 무료 도구 : Visual Studio Code, Azure Trial 및 Cross-Browser 테스트 도구-Mac, Linux 또는 Windows에 모두 사용할 수 있습니다. 이 기사는 Microsoft의 Web Dev Tech 시리즈의 일부입니다. Microsoft Edge와 New Edgehtml 렌더링 엔진을 공유하게되어 기쁩니다. Modern.ie의 Mac, iOS, Android 또는 Windows 장치에서 무료 가상 머신을 받거나 원격으로 테스트하십시오. 웹 오디오 API를 사용한 동적 사운드에 대한 자주 묻는 질문 (FAQ) 내 웹 애플리케이션에 웹 오디오 API 사용을 시작하려면 어떻게해야합니까?
  웹 오디오 API 사용을 시작하려면 먼저 AudioContext 인터페이스 인스턴스를 만들어야합니다. 이것은 오디오 프로젝트의 기본 '컨테이너'이며 일반적으로 페이지로드시 생성됩니다. AudioContext 인스턴스가 있으면이 컨텍스트에서 노드를 만들고 함께 연결하여 오디오 라우팅 그래프를 형성 한 다음 오디오 데이터를 조작 할 수 있습니다. 모든 브라우저가 웹 오디오 API를 완전히 지원하지는 않으므로 브라우저 호환성을 확인하십시오.

  웹 오디오 API에서 사용할 수있는 다양한 유형의 오디오 노드는 무엇입니까? 웹 오디오 API는 여러 가지를 제공합니다. 각각 특정 목적을 가진 오디오 노드의 유형. 가장 일반적으로 사용되는 노드는 다음과 같습니다. 볼륨 제어를위한 게인 노드, 사운드 생성을위한 오실레이터 노드, 오디오 효과를 적용하기위한 Biquadfilternode 및 사운드 샘플을 연주하기위한 AudioBuffersourcenode가 포함됩니다. 각 노드는 다른 노드에 연결되어 오디오 라우팅 그래프를 형성 할 수 있습니다. 웹 오디오 API를 사용하여 오디오 볼륨을 제어 할 수있는 방법은 무엇입니까?

  gainnode를 사용하여 오디오 볼륨을 제어 할 수 있습니다. 이 노드는 오디오의 음량을 제어하는 ​​데 사용됩니다. AudioContext의 CreateGain () 메소드를 사용하여 GainNode를 만들 수 있습니다. 일단 생성되면 게인 속성의 값을 설정하여 게인 (볼륨)을 조정할 수 있습니다.
  웹 오디오 API를 사용하여 사운드를 생성하는 방법?

  오실로터 노드를 사용하여 사운드를 생성 할 수 있습니다. . 이 노드는주기적인 파형을 생성합니다. audiocontext의 createoscillator () 메소드를 사용하여 오실레이터 노드를 만들 수 있습니다. 일단 생성되면 파형 유형을 생성 할 파형 유형 (사인, 사각형, 톱니 또는 삼각형)과 주파수를 설정할 수 있습니다.

  웹 오디오 API를 사용하여 오디오 효과를 어떻게 적용 할 수 있습니까?
  . Biquadfilternode를 사용하여 오디오 효과를 적용 할 수 있습니다. 이 노드는 톤 제어와 같은 다양한 효과를 생성하는 데 사용할 수있는 2 차 필터를 나타냅니다. AudioContext의 CreateBiquadFilter () 메소드를 사용하여 BiquadFilternode를 만들 수 있습니다. 일단 생성되면 필터 유형 (로우 패스, 하이 패스, 대역 통과 등)과 주파수, Q 및 게인을 설정할 수 있습니다. 웹 오디오 API를 사용하여 사운드 샘플을 어떻게 재생할 수 있습니까? AudioBuffersourcenode를 사용하여 사운드 샘플을 재생할 수 있습니다. 이 노드는 오디오 버퍼에서 직접 오디오 데이터를 재생하는 데 사용됩니다. AudioContext의 CreateBuffersource () 메소드를 사용하여 AudioBuffersourcenode를 만들 수 있습니다. 일단 생성되면 버퍼를 재생하려는 오디오 데이터로 설정 한 다음 start () 메소드를 사용하여 재생을 시작할 수 있습니다.

  웹 오디오 API에서 오디오 노드를 어떻게 연결합니까? Connect () 메소드를 사용하여 오디오 노드를 함께 연결할 수 있습니다. 이 방법은 오디오 라우팅 그래프를 형성하는 데 사용됩니다. 한 노드를 다른 노드에 또는 한 노드를 여러 노드에 연결할 수 있습니다. 오디오 데이터는 소스 노드에서 대상 노드로 흐릅니다.

  웹 오디오 API에서 오디오 데이터를 어떻게 조작 할 수 있습니까?
  다양한 방법을 사용하여 오디오 데이터를 조작 할 수 있습니다. 오디오 노드에서 제공하는 속성. 예를 들어 오실레이터 노드의 주파수를 변경하거나 게인 노드의 이득을 조정하거나 필터를 BiquadFilternode에 적용 할 수 있습니다. AnalySernode를 사용하여 실시간 빈도 및 시간 영역 데이터를 캡처 할 수도 있습니다.

  웹 오디오 API에서 AudioContext의 역할은 무엇입니까?

  AudioContext는 기본 '컨테이너입니다. '오디오 프로젝트를 위해. 오디오 노드를 작성하고 오디오 라우팅 그래프를 관리하며 재생을 제어하는 ​​데 사용됩니다. 페이지로드시 AudioContext의 인스턴스를 작성한 다음이 인스턴스를 사용하여 오디오 노드를 작성하고 조작 할 수 있습니다.
  Web Audio API의 브라우저 호환성은 무엇입니까?

  웹 오디오 API는 Chrome, Firefox, Safari 및 Edge를 포함한 최신 브라우저에서 널리 지원됩니다. 그러나 모든 브라우저에서 모든 기능이 완전히 지원되는 것은 아닙니다. 웹 애플리케이션에서 사용하기 전에 특정 기능 지원을 확인하는 것이 좋습니다.

위 내용은 웹 오디오 API를 사용한 동적 사운드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!