I am making a game with HTML5 and Javascript.
How could I play game audio via Javascript?
Join Stack Overflow to learn, share knowledge, and build your career.
I am making a game with HTML5 and Javascript.
How could I play game audio via Javascript?
If you don't want to mess with HTML elements:
var audio = new Audio('audio_file.mp3');
audio.play();
This uses the HTMLAudioElement interface, which plays audio the same way as the <audio> element.
If you need more functionality, I used the howler.js library and found it simple and useful.
<audio>. Wikipedia has a audio format compatibility table. new Audio() can play WAV files in all browsers except Internet Explorer.
– Rory O'Kane
Mar 15 '15 at 14:18
It's easy, just get your audio element and call the play() method:
document.getElementById('yourAudioTag').play();
Check out this example: http://www.storiesinflight.com/html5/audio.html
This site uncovers some of the other cool things you can do such as load(), pause(), and a few other properties of the audio element.
http://www.schillmania.com/projects/soundmanager2/
SoundManager 2 provides a easy to use API that allows sound to be played in any modern browser, including IE 6+. If the browser doesn't support HTML5, then it gets help from flash. If you want stricly HTML5 and no flash, there's a setting for that, preferFlash=false
It supports 100% Flash-free audio on iPad, iPhone (iOS4) and other HTML5-enabled devices + browsers
Use is as simple as:
<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>
Here's a demo of it in action: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/
This is a quite old question but I wanna add some useful info. The topic starter has mentioned that he is "making a game". So for everybody who needs audio for game development there is a better choice than just an <audio> tag or an HTMLAudioElement. I think you should consider the use of the Web Audio API:
While audio on the web no longer requires a plugin, the audio tag brings significant limitations for implementing sophisticated games and interactive applications. The Web Audio API is a high-level JavaScript API for processing and synthesizing audio in web applications. The goal of this API is to include capabilities found in modern game audio engines and some of the mixing, processing, and filtering tasks that are found in modern desktop audio production applications.
Easy with Jquery
// set audio tags with no preload
<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>
// add jquery to load
$(".my_audio").trigger('load');
// write methods for playing and stopping
function play_audio(task) {
if(task == 'play'){
$(".my_audio").trigger('play');
}
if(task == 'stop'){
$(".my_audio").trigger('pause');
$(".my_audio").prop("currentTime",0);
}
}
// decide how to control audio
<button onclick="play_audio('play')">PLAY</button>
<button onclick="play_audio('stop')">STOP</button>
EDIT
To address @stomy's question, here is how you would use this approach to play a playlist:
Set your songs in an object:
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'
}
Use the trigger and play functions as before:
$(".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);
}
}
Load the first song dynamically:
keys = Object.keys(playlist);
$('.my_audio').append("<source id='sound_src' src=" + playlist[keys[0]] + " type='audio/mpeg'>");
Reset the audio source to the next song in the playlist, when the current song ends:
count = 0;
$('.my_audio').on('ended', function() {
count++;
$("#sound_src").attr("src", playlist[keys[count]])[0];
$(".my_audio").trigger('load');
play_audio('play');
});
See here for an example of this code in action.
ended event to be emitted and start the next audio file in the list (presumably you are keeping track either in the DOM, JS memory, etc). developer.mozilla.org/en-US/docs/Web/Events/ended
– Sgnl
Jan 25 at 2:21
Add a hidden audio and play it.
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);
}
Pretty simple solution if you have an HTML tag like below:
<audio id="myAudio" src="some_audio.mp3"></audio>
Just use JavaScript to play it, like so:
document.getElementById('myAudio').play();
If you are getting the following error:
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
That means the user needs to interact with the website first (as the error message says). In this case you need to use click or just another event listener, so the user can interact with your website.
If you want to auto load the audio and don't want the user to interact with the document first, you could use setTimeout.
setTimeout(() => {
document.getElementById('mySound').play();
}, 500)
<audio id="mySound" src="sound.mp3"></audio>
The sound will start after 0.5 second.
I used this method to play a sound...
var audioElement;
if(!audioElement) {
audioElement = document.createElement('audio');
audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
}
audioElement.play();
if you want to play your audio whenever the page is opened then do like this.
<script>
function playMusic(){
music.play();
}
</script>
<html>
<audio id="music" loop src="sounds/music.wav" autoplay> </audio>
</html>
and call this playMusic() whenever you need in your game code.
var song = new Audio();
song.src = 'file.mp3';
song.play();
You can use Web Audio API for playing sounds. There are quite some audio libraries out there like howler.js, soundjs etc. If you don't worry about old browsers then you can also check on http://musquitojs.com/. It provides a simple API to create and play sounds.
For example, to play a sound all you've to do is.
import $buzz from 'musquito';
const buzz = $buzz('gunfire.mp3');
buzz.play();
The library also supports Audio Sprites.
<audio>. That element will have appropriate JS hooks for 'play', 'pause', etc... – Marc B Feb 23 '12 at 18:50