게임을 프로그래밍하기 위해 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/ )를 작성했습니다. 사용자가 질문 버튼을 클릭했을 때 음악 클립을 재생하는 데 사용했습니다. 처음에는 질문 당 한 명의 플레이어가 있었고 서로의 상단에서 재생할 수 있었기 때문에 다른 음악 클립을 가리키는 한 명의 플레이어만이되도록 변경했습니다.