astralaaron

I meant "206 partial content"

ahh well again chrome is showing a different result form other browsers....

It downloads from the AJAX call, then once the sound begins, it posts a 204 "partial content" status and begins downloading again as the music plays..

EDIT: [ I guess there is no way to force chrome to check for a cached file? ]

Something that might solve my problem would be if I could just detect when addEventListener("progress", STOPS fireing.. is there any way I could do that?

Although a problem with it might be if the file is already buffered..I think it might not even fire the progress event..

Does anyone know if it is possible anyway?

Thanks JSG

I am pretty sure it is preloading... does it even make sense? just call the sound file with an ajax call? viewing the developer network tool it shows it downloading the information from the sound file. but when that is done, does that mean the sound file is cached, or "preloaded" ?

Well, it looks like AJAX is the best way to go about it so it works cross browser...I got it working anyway. I would like to hear if anyone has a solution for what I was trying to do above.

even stranger now, I tried with a different sound file and chrome outputs this:

93.59673309326172 total duration = 93.596735

why with the other sound file does it out put this: ??

progress= 93.20076751708984 total duration = 317.936327

OMG....

I cannot catch a break with Chrome.

I am trying this:

			temp.addEventListener("progress", function() {				tracker++;				console.log(tracker + " progress= " + this.buffered.end(0) + ' total duration = ' + this.duration);				//if(this.buffered.end(0) >= this.duration)			}, true);

which looked very promising on firefox and IE with the final output of the console looking like I can simply check this.buffered.end(0) against this.duration...

FireFox console output:

2 progress fireing : 317.966333 total duration : 317.966333

Internet Explorer output:

17 progress fireing : 317.9716666 total duration : 317.9716666

And then Chrome has to go and output this:

6 progress= 93.07910919189453 total duration = 317.936327

I don't know what to do with chrome.....

ok, I figured out in IE you must appendChild(temp) before adding an event listener in order for it to work...

That only solves one problem, in Chrome, the preload doesn't work considering 'canplaythrough' fires immediately after 'canplay'. Any suggestions are very appreciated

Well, this doesn't seem to be a good method anyway, as Chrome seems to not preload the audio. I read on a website saying that chrome fires the canplaythrough event imediately after the canplay event. (therefore is basically useless, as they put it)

is there any other way to detect the file has loaded?

also..the addEventListener seems to not be working at all on IE. I've tried the 'progress' event as well, which works on firefox and, still nothing on IE...

I have ran into a problem...my sound preloading seems to work fine in FireFox, but will not work with IE.

this.loadSounds = function(snd) {		var loadedSounds = 0;		for (var i = 0; i < snd.length; i++) {			var temp = new Audio();			temp.addEventListener("canplaythrough", function() {				loadedSounds++;				console.log('SOUND LOADED ' + loadedSounds);				if (loadedSounds == snd.length){					LOADED_SND = true;					console.log('LOADED_SND ' + LOADED_SND);				}			}, true);			if (temp.canPlayType('audio/mpeg')) {				console.log('temp canPlayType mp3');				temp.type = "audio/mpeg";				temp.src = snd[i] + ".mp3";			} else {				temp.type = "audio/ogg";				console.log('temp canPlayType ogg');				temp.src = snd[i] + ".ogg";			}			//temp.preload = "auto";			console.log('after canplaythrough event set');		}	}

these console.log()'s fire in IE:

console.log('temp canPlayType mp3');

console.log('after canplaythrough event set');

however, the addEventListener function never happens, does anyone know why? and a fix?

thank you.

EDIT: is temp.preload = "auto"; neccessary?

Perfect, thank you.

I am pretty close to having this working...I have one problem though. Since I am creating my audio elements with javascript, how do I go about adding multiple sources (one for mp3 and 1 for ogg) ?

for example:

<audio controls>  <source src="horse.ogg" type="audio/ogg">  <source src="horse.mp3" type="audio/mpeg"></audio> 

Edit, just found this page which seems like it will work:

http://stackoverflow.com/questions/4053262/how-can-i-add-multiple-sources-to-an-html5-audio-tag-programmatically

I need to be able to preload my audio files for some small games I am making... Ideally I would like to do it similarly to how I am preloading my images, as shown in the following code:

	this.preload = function(images) {		var loaded = 0;		    for (var i = 0; i < images.length; i++) {			var temp = new Image();			temp.addEventListener("load", function() {				loaded++;				if (loaded == images.length) LOADED = true;			}, true);			temp.src = images[i];		}	}

I am having a hard time searching around the web for help.. still looking, just thought I would start a thread to see if anyone here has an answer, or knows a good site with info.

edit:

I am aware of this: HTML5 preload attribute

However I need to be able to detect when all audio is loaded before executing certain code...

maybe you could put the day numbers in the top left or right so that there is more space for event information in each day box

Looks like you did a pretty good job. Sorry, I don't have many suggestions.

Maybe depending on which month it is, have a new page background or header background show up? and change the colors of the calendar?

awesome! (spotlight / eyeballs)

    padding: 1px 0; /* Prevent collapsing margins */

What do you mean by collapsing margins?

Thanks for the info. It's close enough anyway.

By the way I forgot to mention, the canvas (marquee with the text) shows in IE9 / IE10, and a marquee element shows in IE7 / IE8. Maybe IE7 / IE8 render px differently

it is pretty close anyway...but definitely a little different

yes same font

Is there any reason why 14px text in the document and 14px text in a Canvas element are different? The canvas text is bigger..

Thank you, I appreciate the response

I realize now there is an easier way to go about this... basically just attempting to create a canvas and checking for true / false

http://stackoverflow.com/questions/2745432/best-way-to-detect-that-html5-canvas-is-not-supported

Browser detection is very unreliable. Look at the userAgent string to see what Opera is giving it.

 

Why do you want to know what browser the user has?

Because I just want to know if they are on a browser which supports the Canvas. It is just for a Marquee...for newer browsers I am using a Canvas marquee that I made. For older versions I am falling back on the <marquee> element.... I can detect safari, chrome, firefox and IE without issues. It's just Opera that is giving me problems

I am having a bit of trouble detecting opera as the browser (using opera on windows right now).

Any tips?

http://www.w3schools.com/js/tryit.asp?filename=try_nav_all

The example on w3schools at the link above outputs this info:

Browser CodeName: Mozilla

Browser Name: Netscape

Browser Version: 5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 OPR/17.0.1241.45

Cookies Enabled: true

Platform: Win32

User-agent header: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 OPR/17.0.1241.45

User-agent language: undefined

I've been messing with something like this:

 var ua= navigator.userAgent; M= ua.match(/(opera|opr|msie|firefox|chrome|safari)/?s*([d.]+)/i) || [];

but M finds chrome and not the OPR

perfect, thanks!