HTML5 오디오 조작을위한 5 개의 라이브러리 및 API

이 게시물은 HTML5 오디오 API와 HTML5 오디오 요소를 활용하는 여러 JavaScript 라이브러리를 탐색하여 웹 게임 및 응용 프로그램의 사운드 조작에 대한 다양한 접근 방식을 제공합니다. 도서관은 다양한 프로젝트 요구를 충족시키는 다양한 기능과 복잡성을 보여줍니다. 키 테이크 아웃 :

webaudiox.js :

웹 오디오 API를위한 가벼운 헬기 세트, 제로 의존성을 자랑합니다. HTML5 게임에 이상적이지만 추가 스크립트가없는 이전 브라우저 지원이 부족합니다. HTML5 오디오 폴백을 사용하여 웹 오디오 API에 대한 불이행으로 haller.js :

는 강력한 JavaScript 오디오 라이브러리입니다. 여러 형식, 동시 재생을 지원하고 광범위한 기능을 제공하여 게임 및 오디오 중심 웹 앱에 적합합니다. Pedalboard.js :

웹 오디오 API를 사용하여 오디오 효과, 특히 기타 효과를 생성하는 데 특수화되었습니다. 객체 지향 디자인은 깨끗하지만 일반적인 게임 개발에는 덜 다재다능 할 수 있습니다.

fifer : 이전 브라우저의 플래시 폴백이있는 HTML5 오디오 API의 최소 라이브러리. 단순성은 IE9 (HTML5) 및 IE8 (플래시)을 지원하는 대형 프로젝트의 좋은 기초가됩니다. WAD : 웹 오디오 DAW (디지털 오디오 워크 스테이션) 라이브러리 웹 오디오 API 조작을 단순화합니다. 패닝, 3D 패닝, 필터 및 리버브와 같은 기능을 제공하지만 현재 Firefox 지원이 부족합니다.
• webaudiox.js
• webaudiox.js는 외부 라이브러리가 필요하지 않은 웹 오디오 API에 헬퍼 기능을 제공합니다. 브라우저 호환성은 웹 오디오 API를 지원하는 사람들로 제한됩니다. 아래의 예는 기본 사용법을 보여줍니다 :
• 헬퍼는 오디오 재생을 실시간으로 시각화합니다. 라이브러리의 Github 저장소에는 추가 예제가 포함되어 있습니다. 구형 브라우저에 대한 폴리 플릴 부족에 유의하십시오.
• Howler.js
Howler.js는 다양한 JavaScript 오디오 라이브러리 웹 오디오 API를 우선시하지만 html5 오디오로 떨어지는 것입니다.
• <:> 주요 기능은 다음과 같습니다 다중 형식 지지대 캐싱 멀티 트랙 재생 글로벌/트랙 특이 적 볼륨 및 음소거 컨트롤
메서드 체인 경량 (3kb Gzipped)

깨끗한 API 및 포괄적 인 기능으로 인해 게임 이외의 다양한 웹 애플리케이션에 적합합니다. 아래의 "Sound Sprite"예제는 간결한 구문을 보여줍니다 :

<code class="language-javascript">// after including the webaudiox library
var context = new AudioContext()

// Create lineOut
var lineOut = new WebAudiox.LineOut(context)

// load a sound and play it immediately
WebAudiox.loadBuffer(context, 'sound.wav', function(buffer){
    // init AudioBufferSourceNode
    var source  = context.createBufferSource();
    source.buffer = buffer
    source.connect(lineOut.destination)

    // start the sound now
    source.start(0);
});</code>

3. <..> pedalboard.js
   Pedalboard.js는 웹 오디오 API를 사용하여 특히 기타의 오디오 효과를 만드는 데 중점을 둡니다. 객체 지향 구조는 효과 체인 생성을 단순화합니다. pedals.io는 그 기능을 보여줍니다

예 :

전문화 된 창의적 응용 프로그램은 핵심 기능을 넘어서 가능합니다.

wad

<code class="language-javascript">var sound = new Howl({
  urls: ['sounds.mp3', 'sounds.ogg'],
  sprite: {
    blast: [0, 1000],
    laser: [2000, 3000],
    winner: [4000, 7500]
  }
});

// shoot the laser!
sound.play('laser');</code>

WAD (Web Audio DAW)는 웹 오디오 API 조작을 단순화합니다. 다음 예는 피아노 사운드를 합성하기위한 구문을 보여줍니다.

4. 기능에는 패닝, 3D 패닝, 필터, 리버브 및 마이크 입력이 포함됩니다. 그러나 현재 Firefox 지원이 부족합니다

fifer

Fifer는 플래시 폴백이있는 HTML5 오디오 API의 작은 라이브러리입니다. 간단한 API는 구축에 적합합니다

예 :

<code class="language-javascript">// initialize the stage and get the context
var stage = new pb.Stage();
var ctx = stage.getContext();

// initialize the board and pedals
var board = new pb.Board(ctx);
var od = new pb.stomp.Overdrive(ctx);
var reverb = new pb.stomp.Reverb(ctx);
var vol = new pb.stomp.Volume(ctx);

// add pedals to board
board.addPedals([od, reverb]);
board.addPedalsAt(1, vol);

// tweak pedal settings
od.setDrive(0.7);
od.setLevel(0.7);
reverb.setLevel(0.3);
vol.setLevel(0.2);

// set the board on stage and start playing!
stage.setBoard(board);</code>

의 주요 장점은 플래시 폴백을 통한 후진 호환성입니다.

웹 오디오 API 리소스 및 브라우저 지원 : 위의 라이브러리는 웹 오디오 API를 추상화하지만 직접 API 학습을위한 리소스에는 Boris SMU의 "Web Audio API"책 (O'Reilly), HTML5 Rocks의 웹 오디오 소개 및 MDN의 문서가 포함됩니다. 웹 오디오 API에 대한 브라우저 지원은 보편적이지 않으며 일부 모바일 브라우저와 사파리 (공급 업체 접두사가 필요)가 부족하며 IE에는 전적으로 결석합니다. 자주 묻는 질문 (FAQ) : (이 섹션은 다시 쓰기/박사 과정과 관련이없는 정보가 포함되어 있고 상당한 길이를 추가하므로 생략됩니다. 필요한 경우 다시 구조 할 수 있습니다.) .

위 내용은 HTML5 오디오 조작을위한 5 개의 라이브러리 및 API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!