html5 audio | IE9 is being very strange indeed
Hi all,
I don't think this is actually a JQuery problem but I am hoping that someone here has an answer or at least can point me in the right direction to help solve this problem.
I am using JQuery, html5 and CSS to develop music games. Music Teacher's Games
I have had no real problems until now with my first guitar game. Guitar Game One
The guitar game works perfectly in FireFox, Chrome and Safari(slow loading). It actually functions fine with IE9 excepting that IE9 does not play all the sounds. Since Safari and IE9 both us .mp3 files you would think IE9 would work as well but lo it does not. Many of the notes sound but a lot don't.
Another thing that is strange is that IE9 works fine with all the other games including the keyboard games which is very similar to the guitar game in many ways.
The way it works is this. Using html & CSS I create the fretboard. I then preload all the guitar notes for the fret board like so.
var randNotes = ["e0", "e1", "e2", "e3", "e4", "e5", "e6", "e7", "e8", "e9", "e10", "e11", "e12",
"a0", "a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9", "a10", "a11", "a12",
"d0", "d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8", "d9", "d10", "d11", "d12",
"g0", "g1", "g2", "g3", "g4", "g5", "g6", "g7", "g8", "g9", "g10", "g11", "g12",
"b0", "b1", "b2", "b3", "b4", "b5", "b6", "b7", "b8", "b9", "b10", "b11", "b12",
"ee0", "ee1", "ee2", "ee3", "ee4", "ee5", "ee6", "ee7", "ee8", "ee9", "ee10", "ee11", "ee12"]
var displaynameNote = { 'g0': 'G', 'g2': 'A', 'g4': 'B', 'b1': 'C', 'b3': 'D', 'b5': 'E', 'ee1': 'F', 'ee3': 'G', 'ee5': 'A', 'b0': 'B', 'ee0': 'E' };
var FirstPositionptrA = ["ee5", "ee3", "ee1", "b5", "b3", "b1", "g4", "g2", "g0"];
function loadPianoSounds() {
$('body audio').remove();
try {
for (var i = 0; i < randNotes.length; i++) {
var audio = $('<audio></audio>', {
id: 'audio-' + randNotes[i],
preload: 'auto'
}).appendTo('body');
addSource(audio, 'http://musicteachersgames.com/Snd/' + randNotes[i] + '.mp3');
addSource(audio, 'http://musicteachersgames.com/Snd/' + randNotes[i] + '.ogg');
var audio1 = $('<audio></audio>', {
id: 'Success',
preload: 'auto'
}).appendTo('body');
addSource(audio1, 'http://musicteachersgames.com/Snd/Success' + '.mp3');
addSource(audio1, 'http://musicteachersgames.com/Snd/Success' + '.ogg');
var audio2 = $('<audio></audio>', {
id: 'Fail1',
preload: 'auto'
}).appendTo('body');
addSource(audio2, 'http://musicteachersgames.com/Snd/Effects/Fail1' + '.mp3');
addSource(audio2, 'http://musicteachersgames.com/Snd/Effects/Fail1' + '.ogg');
//alert("all sounds loaded");
} catch (exception) {
alert(exception.message);
}
}
function addSource(elem, path) {
var str = path.lastIndexOf(".");
var mmtype = path.substr(str);
var tipe
switch (mmtype) {
case ".mp3":
tipe = 'audio/mpeg';
break;
case ".ogg":
tipe = 'audio/ogg';
break;
case ".wav":
tipe = "audio/wav";
break;
}
$('<source />')
.attr('src', path).appendTo(elem)
.attr('type', tipe).appendTo(elem);
}
Once this is complete you should be able to play all the notes by clicking on each fret of the fretboard. But with IE9 it does not. This is the bits that do that.
$('.fret li').click(function (event) {
difficulty = 5000;
$('#note').removeClass(noteName);
clickedNote = $(this).attr('class');
play_single_sound(clickedNote);
}
});
function play_single_sound(noteName) {
try {
var plyAud = document.getElementById('audio-' + noteName);
plyAud.play();
} catch (exception) {
alert(exception.message);
}
}
My mime types are set etc etc but this seem almost like there is not enough memory for IE9 to load all the small sound files. Anyway I am at a loss and hope someone here can help.
I thank you in advance of your efforts.
Cheers - Gehres Weed