Develop Reference

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

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.

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.

Play mp3 on iPad Safari

Is it possible to play embedded MP3 on iPad Safari (the way you do on normal desktop browsers) ?
If yes, do we need to code separately for iPad Safari ?
The reason I am asking is bcoz in my app, the desktop code for mp3 is not working on iPad..
The code for desktop is
<EMBED src="'+audioUrl+'" autostart=true loop=false volume=100 hidden=true>

To add to the excellent answers of Blindy and John, the IPad should be HTML5 compliant which means that you can use the HTML5 audio and vido tags. You can read more about this at The Safari Developer Library.

Why don't you just use the <audio> tag, that's what it's there for.
To answer your question, yes it is possible.

You can use the HTML 5 <audio> tag. Check out w3schools - HTML5 Audio.
There is also a table on there telling you what formats work with what browsers.

playing links of music on my own video player

i have a problem, i have a player in my website and the music i want to play is just a link of music, and i want to play it in my own player. i need some idea about this...
thanks you!..

My favorite HTML5 solution for audio right now is this project: http://kolber.github.com/audiojs/
It "fixes" the users browser so the HTML5 <audio /> tag works no matter which browser they are using (IE, FF, Safari, etc). Then with just a sprinkling of JS you can just add something like this to your page:
<audio src="/mp3/juicy.mp3" preload="auto" />
Check out the project page, the setup shouldn't take more than 5-10 minutes.
Apparently there is also a videojs library to run HTML5 video. Its slightly more complicated but if you combine the two, it should give you all the power you need.
http://videojs.com/#getting-started

Javascript Mp3 Player, NONE FLASH

I currently have a simple flash Mp3 player on my site which works lovely. The issue is, most cell phones do not support flash and a large portion of my visitors come through via a mobile device. The alternative to this is to replace the flash player with a javascript player. I found a JQuery one but it only works on HTML5 compatible browsers. Does anyone know of a good alternative that would work on mobile devices as well as most desktop web browsers?

You can check if the browser supports the HTML5 audio tag if not, use the flash version.

Check out jPlayer.

Embedd .wav files in HTML page in all browsers (no controls)

I need to play few wav files on button click. I found solution working in IE but it requires QickTime plugin for Firefox.
Is there any other way?
<html>
<head>
<script>
function DHTMLSound(surl) {
document.getElementById("dummyspan").innerHTML=
"<embed src='"+surl+"' hidden=true autostart=true loop=false>";
}
</script>
</head>
<body>
<h1>test</h1>
<span id=dummyspan></span>
<input type="button" value="Play" onmouseover="DHTMLSound('1.wav')">
</body>
</html>

Use one of these. I have only use jPlayer and can strongly recommend it.
jPlayer (requires Flash)
Scriptaculous plugin (works without Flash in Firefox)
MooTools (requires Flash)

I'd detect whether the browser allows the audio tag, and use that in that case.
That looks like this:
<audio src="1.wav" autoplay></audio>
Currently Firefox, Safari and Opera can play Wavs, Chrome as of version 3 can't, not sure about 4.
See http://html5doctor.com/native-audio-in-the-browser/ for info on how to detect whether the browser has the audio tag.
You'd then use your existing solution for IE.

<audio> as per Rich's answer is definitely the way of the future. Unfortunately at the moment there is no IE support and to get the other browsers that support it to be happy you have to use both WAV and (OGG or MP3).
So for the moment you may need to provide other ways instead or as-well-as <audio>.
Personally I would strongly avoid <embed>ding a media player plugin. It won't work on browsers without plugins and you might not get a plugin you expect, and the one you get might not work the same as you expect. There is also <bgsound> on IE only, but controlling it can be annoying.
So I'd probably go for a Flash fallback solution for when <audio> isn't available. Flash has much better acceptance than any of the media player plugins.
Unfortunately, it doesn't natively support WAV, so either you use a (typically slow) WAV reader or you go with MP3 and have multiple audio formats to worry about again!
One day this will all work nicely. One day, probably around 2056.