HTML5 audio issue

[warnakey]

Hey everyone,

This is my first time posting here. I am making a website for radio show and they want me to put about 30 mp3s up on a page. Simple enough idea, but its ended up being ...difficult.

ISSUE 1: When you open up the page in any browser it will only load maybe 75% of the images and mp3s, requiring you to refresh the page a few times to get it all.

ISSUE 2: For some reason, one of the mp3s, specifically the one for Brooks Firestone, appears grayed out in Chrome (it plays perfectly in Safari, IE or Firefox, so its a chrome issue) making it unplayable. I tried switching it to .ogg format, but that didn't work.

I am trying to use an infinite loading tool (Jscroll) so that it will only have to load 6 or 8 files at a time. Is this my best bet to have the page load properly?

You can see the page here:

http://retirementautopilot.com/financialsafari/asheardontheshow.html (with everything loading all at once)
http://retirementautopilot.com/financialsafari/asheardontheshow2.html (with only the first 8 loading...notice Brooks Firestone's mp3 is grayed out in Chrome)

Any help would be greatly appreciated!

 

[warnakey]

I solved one of my problems. I re-encoded all of the mp3s on the page to be 80kbps and mono (thus cutting their file sizes in half) and now the grayed out mp3 works. Maybe it was too big to play before???

Not sure. But that solved one of my problems.

 

[warnakey]

I solved the second problem.

In the audio tag, I simply added preload="none"

<audio controls="controls" preload="none">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

Now the page loads all 30 mp3s perfectly and only loads one at a time when the play button is clicked.

I hope this helps someone else. Luckily I was able to help myself.

 

[ronaldroe]

Thanks for coming back to post your fixes. Most don't.