How to play music on both desktop and mobile?

[K1kk0z90]

Hi all!

I would like to add background music to an HTML5 game. I'm using GameMaker, and its audio system is quite bad, infact with last version music doesn't play even on Firefox 24 for desktop.

 

So I'm trying to figure out by myself how it is possible to play music in Javascript in a way that works on both desktop and mobile browsers.

This is my current code:

/* * Plays and loops a music file. There must be the music * files in the "html5game" directory. * There must be 2 versions of the same file: a .mp3 and a .ogg. * @param file File name WITHOUT EXTENSION!*/function html5_play_music(file){	// first of all delete the audio element if already exists	var audio = document.getElementById("gameMusic");	if (audio)	{		audio.parentNode.removeChild(audio);	}		// create a new audio element	audio = document.createElement("audio");	audio.setAttribute("id", "gameMusic");	audio.setAttribute("autoplay", "true");		var mp3 = document.createElement("source");	mp3.setAttribute("src", "html5game/" + file + ".mp3");	mp3.setAttribute("type", "audio/mpeg");	audio.appendChild(mp3);		var ogg = document.createElement("source");	ogg.setAttribute("src", "html5game" + file + ".ogg");	ogg.setAttribute("type", "audio/ogg");	audio.appendChild(ogg);}

This works fine on desktop (tried Firefox, Chrome, IE10), but it does not work on mobile (tried mobile Safari, Chrome and IE10).

How can I do?

I see that Premium games on marketjs correctly play music on both desktop and mobile browsers: how do they do it?

 

Thank you in advance for your help!

[rich]

You can't auto-play audio on mobile, it has to be started from a touch event.

[AhmedElyamani]

I'm also interested in the same thing as the OP.

 

You can't auto-play audio on mobile, it has to be started from a touch event.

That would be fine , I have a question : What is the most proper way to play audio to run on every browser (or at least most browsers?)

[K1kk0z90]

Thanks to the tip of Rich, I found the solution!

 

This is my Javascript code:

function runs_on_desktop(){	var isWindows = (navigator.userAgent.toLowerCase().indexOf("windows nt") != -1		&& navigator.userAgent.toLowerCase().indexOf("touch") == -1);	var isMacintosh = (navigator.userAgent.toLowerCase().indexOf("macintosh") != -1);	var isLinux = (navigator.userAgent.toLowerCase().indexOf("linux") != -1		&& navigator.userAgent.toLowerCase().indexOf("android") == -1);			return isWindows || isMacintosh || isLinux;}var musicToPlay = null;/* * Plays and loops a music file AFTER the user RELEASES * their finger from the canvas. There must be the music * files in the "html5game" directory. * There must be 2 versions of the same file: a .mp3 and a .ogg. * @param file File name WITHOUT EXTENSION!*/function html5_play_music(file){	if (!runs_on_desktop())	{		musicToPlay = file;		var canvas = document.getElementById("canvas");		canvas.addEventListener("touchend", startMusicOnMobile, false);	}	else		startMusic(file);}function startMusicOnMobile(){		event.preventDefault();		if (musicToPlay == null || musicToPlay == "")		return;		startMusic(musicToPlay);	musicToPlay = null;		setTimeout(		function()		{			var canvas = document.getElementById("canvas");			canvas.removeListener("touchend", startMusicOnMobile, false);		},		1);}function startMusic(file){	// first of all delete the audio element if already exists	var audio = document.getElementById("gameMusic");	if (audio)	{		audio.parentNode.removeChild(audio);	}		// create a new audio element	audio = document.createElement("audio");	audio.setAttribute("id", "gameMusic");	audio.setAttribute("loop", "true");		var mp3 = document.createElement("source");	mp3.setAttribute("src", "html5game/" + file + ".mp3");	mp3.setAttribute("type", "audio/mpeg");	audio.appendChild(mp3);		var ogg = document.createElement("source");	ogg.setAttribute("src", "html5game" + file + ".ogg");	ogg.setAttribute("type", "audio/ogg");	audio.appendChild(ogg);		audio.play();        document.body.appendChild(audio);}

In GameMaker, you should call the html5_play_music() function in the "Left button pressed" event of your Play button in the title screen. In case the game is running on a mobile browser, the music is started inside a "touchend" event handler!

 

Note: this works with Safari on iOS and Chrome on Android, but it doesn't work on IE mobile. Better than nothing!

Edited October 12, 2013 by K1kk0z90

[AhmedElyamani]

Hi,

I have a few questions:

1-Can I use this?

2-How to call the function (which arguments to give it).

3-Where to add the sound files.

 

Thanks a lot!

[K1kk0z90]

Hi,

I have a few questions:

1-Can I use this?

2-How to call the function (which arguments to give it).

3-Where to add the sound files.

 

Thanks a lot!

1. Sure!
2. If you have two music files called "mymusic.mp3" and "mymusic.ogg", call this:

   html5_play_music("mymusic");

   Because on mobile devices music must be started within a touch event, this function automatically delegates the work of starting the music to a "touchend" event handler. So you should call this function inside a "Left mouse pressed" event in GameMaker, for example for the play button object in your title screen. So when the touch starts (GM "Left button pressed" event) the "touchend" event listener is added, so when the user leave their finger from screen, music is started.

   As a result, in both desktop and mobile browsers, the behaviour is the same: music starts after touching/clicking the object in which you added the "Left mouse pressed" event!

3. Simply add the music files to your project's Included Files, without putting them in a subdirectory. When you build the project, these files will be copied in the "html5game" folder of your game, the directory that the function expects to find the music files in.

 

Now I edit my original post, because I forgot an important line of code.

[AhmedElyamani]

That's Great! thanks a lot , I will try this whenever I could!

[K1kk0z90]

Hi again!

After managing to have the game music play correctly on all browsers, on both desktop and mobile devices, I found another audio problem: how to play sound effects?

Not only GameMaker audio system does not play music on mobile browsers, but also normal sound effects (I thought that they were treated differently, but it seems that both music and sound fx assets are treated the same way by GameMaker).

So, I have learned that on mobile browsers the HTML5 audio tag doesn't support autoplay, but the sound must be started inside a touch event. Anyway I see that Premium games on marketjs play sound effects. My assumption is that in a touch event all sounds are preloaded, to be then played without the need to be inside of a touch event. This is my current code that tries to do this, but it doesn't work:

function html5_init_sounds(){	if (!runs_on_desktop())	{		var canvas = document.getElementById("canvas");		canvas.addEventListener("touchend", loadSoundsOnMobile, false);	}	else		loadSounds();}function loadSoundsOnMobile(){	event.preventDefault();		loadSounds();		setTimeout(		function()		{			var canvas = document.getElementById("canvas");			canvas.removeListener("touchend", loadSoundsOnMobile, false);		},		1);}function loadSounds(){	// preload all sounds	var audio;	var file = "sndBounce";	audio = document.createElement("audio");	audio.setAttribute("id", file);	audio.setAttribute("preload", "auto");		var mp3 = document.createElement("source");	mp3.setAttribute("src", "html5game/sounds/" + file + ".mp3");	mp3.setAttribute("type", "audio/mpeg");	audio.appendChild(mp3);		var ogg = document.createElement("source");	ogg.setAttribute("src", "html5game/sounds/" + file + ".ogg");	ogg.setAttribute("type", "audio/ogg");	audio.appendChild(ogg);		document.body.appendChild(audio);}function html5_play_sound(file){	var audio = document.getElementById(file);	if (audio)		audio.play();}

First I call the html5_init_sounds() function, then I call the html5_play_sound() function whenever I need to play a sound, but as I said it doesn't work.

 

So my question is, how do I play a sound in a way that works on both desktop and mobile browsers? How do marketjs Premium games do it?

 

Thank you again for your help!

[Silen]

In GameMaker for Android and WinPhone mobile devices works old play_sound() function. Unfortunately sound plays with delay.

Currently I use code like this:

    if (audio_system() == audio_old_system) {        sound_play(argument0);    } else {        audio_play_sound(argument0,1,false);    }

PS: Oops, this post should have been in a different thread My fault.

Edited October 22, 2013 by silengames

[Silen]

Great post!

In GameMaker for play music on Internet Explorer possible to use old play_music() function. It ok if you use music only (without any sounds).