CODEWITHSUNDEEP
javascripthtmlaudio
Diego Sanabria
Diego Sanabria

Reputation: 1

How do I minimize loading time for html5's audio tag?

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

Upvotes: 0

Views: 1987

Answers (2)

keyboardP
keyboardP

Reputation: 69372

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.

Upvotes: 1

Michael Wright
Michael Wright

Reputation: 591

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.

Upvotes: 0

Related Questions