Audio not loading in HTML's audio tag_问答_开发者

I'm testing the audio HTML tag.

And it is working on my testing env, but for some reason not on my production env.

I simply use: <audio src="/sandbox/test.mp3" controls="controls"></audio>.

The testing site is on Windows and the production site is on Linux, but that should make any difference I think.

I can download the track so I know it is in the right place.

The production url is: http://pieterhordijk.com/sandbox

As stated the exact same code works on testsite.

Anybody has any idea as to why it doesn't loa开发者_StackOverflow社区d my audio?

I'm testing using:

Chrome 11.0.696.68

EDIT

Now I'm on Chrome 13 (Canary Build) and the MP3 loads.

But the WAV only loads the first second(s).

http://pieterhordijk.com/sandbox/test.mp3 is served as audio/mpeg, which is good. However, when I download it with Opera, it comes out corrupted for some reason and I cannot add it to Foobar's playlist or anything. But, it does download fine with wget, so that may just be an issue with Opera or something funky the server gives to Opera. Loading the mp3 with <audio> doesn't work in Opera of course anyway since Opera doesn't support that format.

http://pieterhordijk.com/sandbox/test.ogg is served as audio/ogg, which is good. And, it also contains vorbis now instead of flac (since you fixed it). It won't play in Opera remotely, but plays fine if I download the file and open it in Opera locally. It plays in Foobar fine too.

http://pieterhordijk.com/sandbox/test.oga is served with the wrong mime type. It's served as text/plain, but should be served as audio/ogg (you can fix this in .htaccess). But, it does contain vorbis and is playable with Foobar. Again, this one won't play remotely in Opera. But, if I download it and open it in Opera locally, it plays no problem.

http://pieterhordijk.com/sandbox/test.wav is served as audio/x-wav, which is good. But, the wav file isn't acceptable for streaming since it's 30.9MB in size and playback can be horrible unless it's fully been fetched. This one does play in Opera remotely at least.

However, things work fine on my site. See http://shadow2531.com/opera/testcases/plugins/temp/peehaa/test_audio_vorbis.html. Your oga file plays in Opera no problem and it should fall back to the mp3 for UAs that don't support Vorbis.

With that said, it seems like it's something with how your server is serving up the files. The only difference I noticed is that your server is sending a Vary: Accept-Encoding header. But, not sure if that's the cause or not.

Now, as you'll see from my test page, it's using:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>
            <audio controls width="300">
                <source src="test.oga" type='audio/ogg; codecs="vorbis"'>
                <source src="test.mp3" type="audio/mpeg">
                <a href="test.oga">test.oga</a>
                <a href="test.mp3">test.mp3</a>
            </audio>
        </p>
    </body>
</html>

That's how you can fall back to other types. See http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-source-element for more info. If mp3 and vorbis are not enough, you could add aac audio in an mp4/m4a container as another fallback.

I had a similar issue, for some reason it would not load local MP3 files, the solution for me was to use OGG files and all worked. My local dev system is Linux/apache2 and I tested with Firefox 8, and Chrome 15. The audio tag did work with remote MP3 and OGG files though, I don't know why they were not working locally, again OGG worked locally.