Sound Issues HTML5


#1

I’ve been updating a project from an older version of Haxe/OpenFL and whilst most if it has been fine, I’ve not got the sounds to work, I get this error:

ERROR: There is no SOUND asset with an ID of “sound/btn.mp3”

I think this is probably to do with my project.xml which I’ve compared against PiratePig…

in PP I can see the sounds are defined explicitly, with each mp3 being assigned to a key. Because I have quite a lot more sounds than this, I originally did this generically, which did work - but now doesn’t (when I checked it was using sound.js rather than howler, so it is pretty old!)

I was using this:

but wondered is there a better way of doing this?? (I have different audio files for different browsers, WAV/OGG/MP3)


#2

In project.xml you can specify which files to use for different platforms.

All sound files are in the same folder assets/sounds with the following examples, but you can organize things differently if you want.

Option 1

<assets if="windows||mobile" path="assets/sounds" rename="sounds" include="*.wav" />
<assets if="html5" path="assets/sounds" rename="sounds" include="*.ogg" />
<assets if="flash" path="assets/sounds" rename="sounds" include="*.mp3" />

or to use the id "sound1" instead of“sounds/sound1.ogg”` you can list them all like this.

Option 2

<assets if="windows||mobile" path="assets/sounds" rename="sounds">
	<sound path="sound1.wav" id="sound1" />
	<sound path="sound2.wav" id="sound2" />
	<sound path="etc.wav" id="etc" />
</assets>

<assets if="html5" path="assets/sounds" rename="sounds">
	<sound path="sound1.ogg" id="sound1" />
	<sound path="sound2.ogg" id="sound2" />
	<sound path="etc.ogg" id="etc" />
</assets>

<assets if="flash" path="assets/sounds" rename="sounds">
	<sound path="sound1.mp3" id="sound1" />
	<sound path="sound2.mp3" id="sound2" />
	<sound path="etc.mp3" id="etc" />
</assets>

Hope it helps.

EDIT: I use option 2 to make it easier to specify the file in my code by using the id “sound1” no matter which type. You can use option 1 but need to add code and a var to specify which file extension.

var soundExt = ".mp3";
#if (html5)
soundExt = ".ogg";
#end

#if (windows)
soundExt = ".wav";
#end

"sounds/my_sound" + soundExt;


#3

thanks @dean
so there’s 2 things:
is a clearer way to aggregate? I’ve got a reasonable number of sounds, so I’d rather go with option 1 in some form, but… different browsers prefer different audio types, so how could I specify mp3 for ie11, ogg for FF etc.?

whilst I appreciate that windows !== mobile !== html5 how best to differentiate? Is there any guidance about how best to subdivide?

Thanks!


#4

I know what you mean that using option one is easier with lots of sounds so you can just add to the sounds folder without editing project.xml every time you add a sound.

I’m not sure of the best way to go about it, I still use option 2 even though I have a lot of sounds.

Is there a reason to use different types for different browsers? I the same for all broswers: ogg (html5) and mp3 (flash).

maybe make a getSoundFile() function?

function getSoundFile(soundID:String, soundPath:String="sounds/"):String
{
	var soundFile = soundPath + soundID + ".mp3"; // default

#if html5 
	soundFile = soundPath + soundID + ".ogg"; 
#end

#if flash 
	soundFile = soundPath + soundID + ".mp3"; 
#end

#if windows
	soundFile = soundPath + soundID + ".wav"; 
#end

	return soundFile ;
}

Then you can use:

Assets.getSound(getSoundFile("mySound", "sounds/"));

Maybe someone else will have a better way.

EDIT:
If you need to check the browser, you can add the browser check in the getSoundFile() function. Check this post.