K1kk0z90

How to play music on both desktop and mobile?

Recommended Posts

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! :)

Share this post


Link to post
Share on other sites

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

 

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 by K1kk0z90

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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! :)

Share this post


Link to post
Share on other sites

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 by silengames

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.