HTML5 및 Javascript로 게임을 만들고 있습니다.
Javascript를 통해 게임 오디오를 어떻게 재생할 수 있습니까?
답변
HTML 요소를 엉망으로 만들고 싶지 않은 경우 :
var audio = new Audio('audio_file.mp3');
audio.play();이것은 요소HTMLAudioElement 와 같은 방식으로 오디오를 재생 하는 인터페이스를 사용합니다 .<audio>
더 많은 기능이 필요하면 howler.js 라이브러리를 사용하여 간단하고 유용하다는 것을 알았습니다.
답변
간단합니다. audio요소를 가져 와서 play()메소드를 호출하십시오 .
document.getElementById('yourAudioTag').play();이 예제를 확인하십시오 : http://www.storiesinflight.com/html5/audio.html
이 사이트 는 당신이 할 수있는 다른 멋진 일들을 발견합니다 load().pause() 그리고 몇 가지 다른 속성 audio요소를.
답변
http://www.schillmania.com/projects/soundmanager2/
SoundManager 2는 IE 6 이상을 포함한 최신 브라우저에서 사운드를 재생할 수있는 사용하기 쉬운 API를 제공합니다. 브라우저가 HTML5를 지원하지 않으면 플래시에서 도움을받습니다. 엄격하게 HTML5를 원하고 플래시를 사용하지 않으려면 설정이 있습니다.preferFlash=false
iPad, iPhone (iOS4) 및 기타 HTML5 지원 장치 및 브라우저에서 100 % Flash-free 오디오를 지원합니다
사용은 다음과 같이 간단합니다.
<script src="soundmanager2.js"></script>
<script>
// where to find flash SWFs, if needed...
soundManager.url = '/path/to/swf-files/';
soundManager.onready(function() {
soundManager.createSound({
id: 'mySound',
url: '/path/to/an.mp3'
});
// ...and play it
soundManager.play('mySound');
});
</script>실제 데모는 다음과 같습니다. http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/
답변
이것은 매우 오래된 질문이지만 유용한 정보를 추가하고 싶습니다. 토픽 스타터는 그가 있다고 언급했다 "making a game". 따라서 게임 개발을 위해 오디오가 필요한 모든 사람에게는 <audio>태그 또는 태그 보다 더 나은 선택이 있습니다 HTMLAudioElement. Web Audio API 사용을 고려해야한다고 생각합니다 .
웹의 오디오에는 더 이상 플러그인이 필요하지 않지만 오디오 태그는 정교한 게임 및 대화 형 응용 프로그램을 구현하는 데 상당한 제한이 따릅니다. Web Audio API는 웹 응용 프로그램에서 오디오를 처리하고 합성하기위한 고급 JavaScript API입니다. 이 API의 목적은 최신 게임 오디오 엔진에서 발견되는 기능과 최신 데스크탑 오디오 제작 응용 프로그램에서 발견되는 일부 믹싱, 처리 및 필터링 작업을 포함하는 것입니다.
답변
Jquery로 쉽게
// 사전로드없이 오디오 태그 설정
<audio class="my_audio" controls preload="none">
<source src="audio/my_song.mp3" type="audio/mpeg">
<source src="audio/my_song.ogg" type="audio/ogg">
</audio>//로드 할 jquery 추가
$(".my_audio").trigger('load');// 재생 및 정지를위한 메소드 작성
function play_audio(task) {
if(task == 'play'){
$(".my_audio").trigger('play');
}
if(task == 'stop'){
$(".my_audio").trigger('pause');
$(".my_audio").prop("currentTime",0);
}
}// 오디오 제어 방법 결정
<button onclick="play_audio('play')">PLAY</button>
<button onclick="play_audio('stop')">STOP</button>편집하다
@stomy의 질문을 해결하기 위해이 방법을 사용하여 재생 목록 을 재생하는 방법은 다음과 같습니다. 다음과 같습니다.
개체에 노래를 설정하십시오.
playlist = {
'song_1' : 'audio/splat.mp3',
'song_2' : 'audio/saw.mp3',
'song_3' : 'audio/marbles.mp3',
'song_4' : 'audio/seagulls.mp3',
'song_5' : 'audio/plane.mp3'
}이전과 같이 트리거 및 재생 기능을 사용하십시오.
$(".my_audio").trigger('load');
function play_audio(task) {
if(task == 'play'){
$(".my_audio").trigger('play');
}
if(task == 'stop'){
$(".my_audio").trigger('pause');
$(".my_audio").prop("currentTime",0);
}
}첫 번째 노래를 동적으로로드하십시오.
keys = Object.keys(playlist);
$('.my_audio').append("<source id='sound_src' src=" + playlist[keys[0]] + " type='audio/mpeg'>");현재 노래가 끝나면 재생 목록의 다음 노래로 오디오 소스를 재설정합니다.
count = 0;
$('.my_audio').on('ended', function() {
count++;
$("#sound_src").attr("src", playlist[keys[count]])[0];
$(".my_audio").trigger('load');
play_audio('play');
});답변
숨겨진 오디오를 추가하고 재생하십시오.
function playSound(url){
var audio = document.createElement('audio');
audio.style.display = "none";
audio.src = url;
audio.autoplay = true;
audio.onended = function(){
audio.remove() //Remove when played.
};
document.body.appendChild(audio);
}답변
다음과 같은 오류가 발생하는 경우
잡히지 않은 DOMException : 사용자가 먼저 문서와 상호 작용하지 않았기 때문에 play ()가 실패했습니다.
즉, 사용자는 먼저 오류 메시지에서 알 수 있듯이 웹 사이트와 상호 작용해야합니다. 이 경우에는click 웹 사이트와 상호 작용할 수 있도록 다른 이벤트 리스너 합니다.
오디오를 자동으로로드하고 사용자가 먼저 문서와 상호 작용하지 않게하려면을 사용할 수 있습니다 setTimeout.
setTimeout(() => {
document.getElementById('mySound').play();
}, 500)<audio id="mySound" src="sound.mp3"></audio>0.5 초 후에 사운드가 시작됩니다.