0

Good day,

I am trying to build a simple music player using the html audio tag and some javascript. When I was coding it worked ok while the files were stored locally with both safari (on an Imac) and Firefox. Then I uploaded it to my web page to test it live and had these issues:

(1) Safari on the Imac takes about a minute to load the file and start playing (2) Safari on the iphone doesn't autoplay the files although I used the autoplay attribute in the code....see code below) (3) Firefox just doesn't play it! (although it played just fine when the files were local)

Seems like the files are too large....my questions are: (1) is there a way to make the loading time shorter? and (2) any idea why the autoplay doesn't work on the iPhone Safari and how to get around it?

Here is the code I used for the songs:

<audio autoplay="autoplay" controls="controls">
<source src="../audio/3.ogv" />
<source src="../audio/3.mp3" />
Your browser does not support the audio element.
</audio>

thanks for your help

diego

Diego Sanabria
  • 1
  • 2

2 Answers2

1

I believe you cannot autoplay on the iPhone. I think this is a restriction imposed in order to prevent excess accidental data usage. There were some workarounds to create a fake click, but they seem to have been patched.

Firefox doesn't support MP3 via HTML5. ogv files are Ogg Video, not Audio (ogg), which could be why it's not playing in the audio tag.

As for loading time, the best way would be to compress the file as much as possible. This would reduce the download time.

keyboardP
  • 68,824
  • 13
  • 156
  • 205
  • thanks for the heads up on the file extension. I'll try with ogg...still puzzles me why it works with local files but not over the web!? Any tools you know of to compress mp3 and/or ogg files? – Diego Sanabria Jul 07 '11 at 14:52
  • @Diego Sanabria - Ogg files are already compressed. If you try and compress it further, the quality might decrease. If you have the original audio file, you could mess around with various compression settings and sample rates to get the file size down. Tools like Audacity might help there (http://audacity.sourceforge.net/). Not sure why FF plays locally. Are you using the exact same files locally as those on the server? – keyboardP Jul 07 '11 at 15:02
  • I think I found a way to compress the mp3's (http://tinyurl.com/66lf2gf). I'll try to go from 320 kbps bit rate to 160 and see if it loads faster. we'll see how big the ogg files are once I convert them. I'm using the exact same files local and live...it is weird :-) Thanks a lot for your help – Diego Sanabria Jul 07 '11 at 15:12
0

Just a heads up ... since HTML 5 isn't XML based syntactically, you don't assign attributes like that.

use <audio autoplay controls> as the opening tag.

Michael Wright
  • 581
  • 2
  • 2