Audio not loading in HTML's audio tag

html audio html5-audio

11,164

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.

11,164

Author by

PeeHaa

So long SO main o/ and thanks for all the fish Check out my personal website or check out one of the open source projects I'm currently working on: Jeeves - A headless chatbot for the PHP room GitHub Minifine - JS and CSS minifier GitHub Requestable - online webservice for testing and debugging HTTP / REST requests GitHub OpCacheGUI - a nice webinterface for PHP's OpCache GitHub EmailTester - an online emailaddress validation regex tester GitHub Commentar - an open source PHP5.4+ commenting system GitHub HexDump - an online hex viewer GitHub RichUploader - a private filehoster GitHub PHP OAuth library GitHub Proposal for the new beginners tutorial on php.net GitHub I've created a close-voting Chrome plugin available at GitHub to help clean up Stack Overflow. If you would like to see what other projects I'm working on please visit my GitHub or drop me a line in the PHP chat.

Updated on August 11, 2022

Comments

PeeHaa almost 2 years

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 load my audio?

PS

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).
PeeHaa almost 13 years

It is an MP3. I've downloaded and tested in on multiple machines (all Windows). And it does load on my local development machine, but it doesn't on my live machine.
PeeHaa almost 13 years

can you add your comments about the oggenc and audio/ogg to your answer?
Shadow2531 almost 13 years

@PeeHaa. Will do here in a bit.
Shadow2531 almost 13 years

@PeeHaa. There you go. Hope that helps some.
PeeHaa almost 13 years

Wow thanks for the extensive testing! I know about the fall backs. I just separated it to be able to easily see what is actually happening for testing purposes. Special thanks goes out to you (pieterhordijk.com/sandbox/html5-audio-api)! :)