게임을 프로그래밍하기 위해 HTML5를 사용하고 있습니다. 내가 지금 겪었던 장애물은 음향 효과를 재생하는 방법입니다.

구체적인 요구 사항은 거의 없습니다.

• 여러 사운드를 재생하고 믹스
• 동일한 샘플을 여러 번 재생합니다.
• 언제든 샘플의 재생을 중단
• 바람직하게는 (저품질) 원시 PCM을 포함하는 WAV 파일을 재생하지만 물론 변환 할 수 있습니다.

첫 번째 방법은 HTML5 <audio>요소 를 사용하고 내 페이지에서 모든 사운드 효과를 정의하는 것이 었습니다. Firefox는 WAV 파일을 복숭아처럼 재생하지만 #play여러 번 호출 해도 실제로는 여러 번 재생되지 않습니다. HTML5 사양에 대한 나의 이해에서 <audio>요소는 재생 상태를 추적하므로 이유를 설명합니다.

내 생각은 오디오 요소를 복제하는 것이기 때문에 jQuery에 따라 다음과 같은 작은 JavaScript 라이브러리를 만들었습니다.

var Snd = {
  init: function() {
    $("audio").each(function() {
      var src = this.getAttribute('src');
      if (src.substring(0, 4) !== "snd/") { return; }
      // Cut out the basename (strip directory and extension)
      var name = src.substring(4, src.length - 4);
      // Create the helper function, which clones the audio object and plays it
      var Constructor = function() {};
      Constructor.prototype = this;
      Snd[name] = function() {
        var clone = new Constructor();
        clone.play();
        // Return the cloned element, so the caller can interrupt the sound effect
        return clone;
      };
    });
  }
};

이제 Snd.boom();Firebug 콘솔에서 할 수 있고을 재생할 snd/boom.wav수 있지만 여전히 동일한 샘플을 여러 번 재생할 수는 없습니다. 이 <audio>요소는 실제로 음향 효과를 재생하는 것이 아니라 스트리밍 기능에 가깝습니다.

HTML5와 JavaScript 만 사용하여 내가 빠졌을 수있는 영리한 방법이 있습니까?

또한 테스트 환경은 Ubuntu 9.10의 Firefox 3.5입니다. 내가 시도한 다른 브라우저-Opera, Midori, Chromium, Epiphany는 다양한 결과를 냈습니다. 일부는 아무것도하지 않으며 일부는 예외를 던집니다.

HTML5 Audio객체

당신은 <audio>요소 를 귀찮게 할 필요가 없습니다 . HTML 5를 사용하면 Audio객체에 직접 액세스 할 수 있습니다.

var snd = new Audio("file.wav"); // buffers automatically when created
snd.play();

현재 버전의 스펙에서 믹싱을 지원하지 않습니다.

동일한 사운드를 여러 번 재생하려면 Audio객체의 인스턴스를 여러 개 만듭니다 . snd.currentTime=0재생이 끝난 후에도 객체를 설정할 수 있습니다 .

JS 생성자는 대체 <source>요소를 지원하지 않으므로 사용해야합니다.

(new Audio()).canPlayType("audio/ogg; codecs=vorbis")

브라우저가 Ogg Vorbis를 지원하는지 테스트합니다.

게임 또는 음악 앱 (플레이어 이상)을 작성하는 경우 이제 대부분의 브라우저에서 지원되는 고급 Web Audio API 를 사용하려고 합니다 .

W3C의 WebAudio API

2012 년 7 월 현재 WebAudio API 는 이제 Chrome에서 지원되고 Firefox에서 적어도 부분적으로 지원되며 버전 6부터 IOS에 추가 될 예정입니다.

기본 작업에 프로그래밍 방식으로 사용할 수있을 정도로 강력하지만 오디오 요소는 게임 등을 완벽하게 지원할 수 없습니다. 단일 미디어를 img와 유사한 페이지에 내장 할 수 있도록 설계되었습니다. 꼬리표. 게임에 오디오 태그를 사용하는 데 많은 문제가 있습니다.

• 타이밍 슬립은 오디오 요소와 공통입니다
• 사운드의 각 인스턴스에 오디오 요소가 필요합니다
• 로드 이벤트는 아직 완전히 신뢰할 수는 없지만
• 일반적인 볼륨 컨트롤, 페이딩 없음, 필터 / 효과 없음

이 WebAudio 시작하기 기사를 사용하여 WebAudio API를 시작했습니다. FieldRunners 웹 오디오 사례 연구 도 좋은 읽기입니다.

howler.js

게임 제작의 경우 최상의 솔루션 중 하나는 howler.js 와 같이 웹용 코드를 작성할 때 직면하는 많은 문제를 해결하는 라이브러리를 사용하는 것 입니다. howler.js는 훌륭한 (그러나 저수준) 웹 오디오 API 를 사용하기 쉬운 프레임 워크로 추상화합니다 . 웹 오디오 API를 사용할 수없는 경우 HTML5 오디오 요소 로 폴백을 시도합니다 .

var sound = new Howl({
  urls: ['sound.mp3', 'sound.ogg']
}).play();
// it also provides calls for spatial/3d audio effects (most browsers)
sound.pos3d(0.1,0.3,0.5);

wad.js

또 다른 훌륭한 라이브러리 인 wad.js 는 음악 및 효과와 같은 신디사이저 오디오를 제작하는 데 특히 유용합니다. 예를 들면 다음과 같습니다.

var saw = new Wad({source : 'sawtooth'})
saw.play({
    volume  : 0.8,
    wait    : 0,     // Time in seconds between calling play() and actually triggering the note.
    loop    : false, // This overrides the value for loop on the constructor, if it was set. 
    pitch   : 'A4',  // A4 is 440 hertz.
    label   : 'A',   // A label that identifies this note.
    env     : {hold : 9001},
    panning : [1, -1, 10],
    filter  : {frequency : 900},
    delay   : {delayTime : .8}
})

게임 소리

Wad.js와 유사한 또 다른 라이브러리는 " Sound for Games "이며, 효과 제작에 더 중점을두고 있으며 비교적 뚜렷한 (그리고 더 간결한 느낌) API를 통해 유사한 기능을 제공합니다.

function shootSound() {
  soundEffect(
    1046.5,           //frequency
    0,                //attack
    0.3,              //decay
    "sawtooth",       //waveform
    1,                //Volume
    -0.8,             //pan
    0,                //wait before playing
    1200,             //pitch bend amount
    false,            //reverse bend
    0,                //random pitch range
    25,               //dissonance
    [0.2, 0.2, 2000], //echo array: [delay, feedback, filter]
    undefined         //reverb array: [duration, decay, reverse?]
  );
}

요약

하나의 사운드 파일을 재생하거나 자신 만의 HTML 기반 음악 편집기, 효과 생성기 또는 비디오 게임을 만들어야하는지 여부에 관계없이 이러한 라이브러리 각각을 살펴볼 가치가 있습니다.

경우에 따라이 기능을 사용하여 HTML 5 오디오를 감지 할 수도 있습니다.

http://diveintohtml5.ep.io/everything.html

HTML 5 JS 감지 기능

function supportsAudio()
{
    var a = document.createElement('audio'); 
    return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
}

동일한 사운드를 동시에 재생할 수있는 한 가지 방법이 있습니다. 프리 로더와 결합하면 모든 준비가 완료됩니다. 이것은 Firefox 17.0.1 이상에서 작동하지만 아직 다른 것으로 테스트하지 않았습니다.

// collection of sounds that are playing
var playing={};
// collection of sounds
var sounds={step:"knock.ogg",throw:"swing.ogg"};

// function that is used to play sounds
function player(x)
{
    var a,b;
    b=new Date();
    a=x+b.getTime();
    playing[a]=new Audio(sounds[x]);
    // with this we prevent playing-object from becoming a memory-monster:
    playing[a].onended=function(){delete playing[a]};
    playing[a].play();
}

이것을 키보드 키에 묶고 즐기십시오.

player("step");

원하는 것이 멀티 채널 사운드입니다. 실제로 16 비트 게임과 같이 4 개의 채널이 있다고 가정하고 HTML5 오디오 기능을 사용하는 데 어려움을 겪지 않았지만 4 개의 <audio> 요소 만 있으면되고 사용되는주기는 아닙니다. 다음 음향 효과를 재생하려면? 당신은 그것을 시도 했습니까? 무슨 일이야? 작동하는 경우 : 더 많은 사운드를 동시에 재생하려면 <audio> 요소를 더 추가하십시오.

http://flash-mp3-player.net/ 의 작은 Flash 객체를 사용하여 HTML5 <audio> 요소 없이이 작업을 수행했습니다 . 음악 퀴즈 ( http://webdeavour.appspot.com/ )를 작성했습니다. 사용자가 질문 버튼을 클릭했을 때 음악 클립을 재생하는 데 사용했습니다. 처음에는 질문 당 한 명의 플레이어가 있었고 서로의 상단에서 재생할 수 있었기 때문에 다른 음악 클립을 가리키는 한 명의 플레이어만이되도록 변경했습니다.

jai (-> mirror ) (javascript audio interface) 사이트를 살펴보십시오 . 소스를 살펴보면 play()반복해서 호출하는 것처럼 보이며 라이브러리는 HTML5 기반 게임에 사용하기에 적합 할 수 있다고 언급합니다.

자바 스크립트 게임을 만들거나 배경 음악을 통해 음성으로 말하기 위해 여러 오디오 이벤트를 동시에 실행할 수 있습니다.

동일한 샘플을 여러 번 재생하려면 다음과 같은 작업을 수행 할 수 없습니다.

e.pause(); // Perhaps optional
e.currentTime = 0;
e.play();

( e오디오 요소입니다)

어쩌면 나는 당신의 문제를 완전히 이해하지 못했을 것입니다. 사운드 효과가 동시에 여러 번 재생되기를 원하십니까? 그렇다면 이것은 완전히 잘못되었습니다.

여기 아이디어가 있습니다. 특정 클래스의 사운드에 대한 모든 오디오를 하나의 개별 오디오 요소에로드합니다. src 데이터는 인접한 오디오 파일의 모든 샘플입니다 (아마도 약간의 시간을두고 샘플을 포착하고 잘라낼 수 있도록 사이에 약간의 침묵이 필요함) 다음 샘플로의 출혈 위험). 그런 다음 샘플을 찾아 필요할 때 재생하십시오.

재생하기 위해 이들 중 하나 이상이 필요한 경우 동일한 src로 추가 오디오 요소를 만들어 캐시되도록 할 수 있습니다. 이제 여러 개의 "트랙"이 효과적으로 만들어졌습니다. Round Robin 등 선호하는 리소스 할당 체계로 트랙 그룹을 활용할 수 있습니다.

또한 해당 리소스를 사용할 수있게되거나 현재 재생중인 샘플을 잘라낼 때 재생할 큐에 사운드 큐잉과 같은 다른 옵션을 지정할 수도 있습니다.

http://robert.ocallahan.org/2011/11/latency-of-html5-sounds.html

http://people.mozilla.org/~roc/audio-latency-repeating.html

Firefox 및 Chrome에서 제대로 작동합니다.

시작한 사운드를 중지하려면 var sound = document.getElementById ( "shot"). cloneNode (true); sound.play (); 나중에 sound.pause ();

개발에 도움이되는 라이브러리 인 SoundJS를 사용하는 것이 좋습니다 . SoundJS가 웹 오디오, html 오디오 또는 플래시 오디오를 적절히 선택하여 어디에서나 작동하는 단일 코드 기반을 작성할 수 있습니다.

원하는 모든 작업을 수행 할 수 있습니다.

• 여러 사운드를 재생하고 믹스
• 동일한 샘플을 여러 번 재생하며 겹치는 재생
• 언제든 샘플을 중단 재생
• 포함 된 WAV 파일 재생 (브라우저 지원에 따라 다름)

희망이 도움이됩니다.

단일 <audio>요소로 멀티 샷 재생을 할 수 없습니다 . 이를 위해 여러 요소를 사용해야합니다.

뮤직 박스 카드 생성기를 프로그래밍하는 동안이 문제가 발생했습니다. 다른 라이브러리로 시작했지만 항상 결함이있었습니다. 일반적인 오디오 구현의 지연은 나쁘고 여러 번 재생되지 않았습니다.

http://lowlag.alienbill.com/ 및 http://www.schillmania.com/projects/soundmanager2/

http://musicbox.grit.it/ 에서 구현을 확인할 수 있습니다 .

멀티 브라우저 재생을 위해 wav + ogg 파일을 생성했습니다. 이 뮤직 박스 플레이어는 ipad, iphone, Nexus, mac, pc에서 반응 형으로 작동합니다.

나는 이것이 완전한 해킹이라는 것을 알고 있지만 얼마 전에 github에 넣은이 샘플 오픈 소스 오디오 라이브러리를 추가해야한다고 생각했습니다 ...

https://github.com/run-time/jThump

아래 링크를 클릭 한 후 홈 행 키를 입력하여 블루스 리프를 재생하십시오 (여러 키를 동시에 입력하는 등).

jThump 라이브러리를 사용한 샘플 >> http://davealger.com/apps/jthump/

기본적으로 <iframe>onReady () 사운드를 재생하는 페이지를로드하는 보이지 않는 요소를 만들어 작동합니다 .

이것은 확실히 이상적이지 않습니다 않지만 독창성에 기초 하여이 솔루션을 +1 할 수 있습니다 (그리고 그것이 오픈 소스이며 내가 시도한 모든 브라우저에서 작동한다는 사실). 다른 사람이 적어도 몇 가지 아이디어를 검색 할 수 있기를 바랍니다.

:)

선택한 답변은 IE를 제외한 모든 곳에서 작동합니다. 크로스 브라우저 = http://www.andy-howard.com/how-to-play-sounds-cross-browser-include-ie/index.html에서 작동시키는 방법에 대한 자습서를 작성했습니다 .

내가 쓴 기능은 다음과 같습니다.

function playSomeSounds(soundPath)
 {

 var trident = !!navigator.userAgent.match(/Trident\/7.0/);
 var net = !!navigator.userAgent.match(/.NET4.0E/);
 var IE11 = trident && net
 var IEold = ( navigator.userAgent.match(/MSIE/i) ? true : false );
 if(IE11 || IEold){
 document.all.sound.src = soundPath;
 }
 else
 {
 var snd = new Audio(soundPath); // buffers automatically when created
 snd.play();
 }
 };

또한 HTML 페이지에 다음 태그를 추가해야합니다.

<bgsound id="sound">

마지막으로 함수를 호출하고 간단히 경로를 전달할 수 있습니다.

playSomeSounds("sounds/welcome.wav");

항상 AudioContext지원이 제한되어 있지만 웹 오디오 API 작업 초안 의 일부입니다 . 앞으로 무언가를 출시 할 계획이라면 그만한 가치가있을 것입니다. 그리고 크롬과 파이어 폭스만을 프로그래밍한다면 황금색입니다.

Web Audio API는이 작업에 적합한 도구입니다. 사운드 파일을로드하고 재생하는 데 약간의 작업이 있습니다. 다행히도 작업을 단순화하는 라이브러리가 많이 있습니다. 소리에 관심을 가지고 musquito 라는 라이브러리를 만들었습니다. .

현재는 페이딩 사운드 효과 만 지원하며 3D 공간화와 같은 다른 작업을하고 있습니다.