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:
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 > Copy 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.
Solution 2:
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.
Post a Comment for "Audio Not Loading In Html's Audio Tag"