A collection of computer systems and programming tips that you may find useful.
Brought to you by Craic Computing LLC, a bioinformatics consulting company.

Wednesday, April 17, 2013

Gotchas when working with HTML5 Audio

I've run into a few issues while building a demo web app that plays audio files, so I wanted to post my experiences...

1: Firefox does NOT play MP3 files (as of 2013-04-17)

This is because the MPEG format is proprietary and the Firefox/Mozilla folks insist on only open source formats. You need to use .wav, .ogg or .webm. See https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats for the allowed options.

Unfortunately they do not seem to produce a useful error message if you try and play an MP3 file.

Google Chrome plays anything - so your application may appear to work fine but may fail on Firefox.

2: Firefox is VERY strict in regard to Cross-Origin Resource Sharing (CORS)

Firefox will refuse to play an audio file on a host other than the one that served the original web page. So you can't store an audio file on, say, Amazon S3, and play it on your web site. The same goes for Ajax requests to another site. The Firefox console will, or may, display an error but this is not necessarily clear.

Google Chrome doesn't seem to care about this restriction.

See this page for more details https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

To work around this you can specify a header for the audio file which means that as the owner of the audio file you allow it to be referenced from any other site.
"Access-Control-Allow-Origin" = "*"

To work around the problem with Ajax requests you can use JSONP instead of JSON as I have described.

The special header ought to work with AWS S3... except....

3: AWS S3 does NOT allow the Access-Control-Allow-Origin header

You can set metadata headers with S3 files but not this one. The Amazon support forums are full of requests/complaints about this but it does not seem to have been resolved.

There does seem to be a way round this on Amazon Cloudfront, which pretty much exists to server assets for other sites, but from what I've seen this is pretty ugly.

My workaround for this was to add a proxy method to my server. The client requests a file that resides on S3 from the proxy. It fetches it from S3 and echoes it to the client, which sees it as coming from the originating server. This introduces an unnecessary delay but works file. Here is a snippet of code in Ruby for a Sinatra server. It uses the aws-sdk gem and leaves out set up for that.

  get '/proxy' do
    s3obj = bucket.objects[params['file']]
    response["Access-Control-Allow-Origin"] = "*"
    content_type 'audio/wav'

Apparently Google's equivalent of S3 does not have this issue - I've not tried it.

4: You cannot play audio files from localhost

This makes testing a pain. Your audio files must be hosted on a server other than localhost. I recommend Heroku as a way to get development servers up and running quickly and at no initial cost.

If you don't realize this, then there is no error message in the browser console - it simply doesn't work and you are left scratching your head until you figure it out. I hate stuff like that...


jowdjbrown said...

Google Chrome plays anything - so your application may appear to work fine but may fail on Firefox.speech recognition program

Blogger said...

There is a chance you're qualified to receive a $1,000 Amazon Gift Card.

Karthika Shree said...

This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
AWS Training in Chennai

Blogger said...

eToro is the best forex trading platform for beginning and professional traders.

Blogger said...

BlueHost is definitely the best hosting company with plans for any hosting needs.

johnsy sai said...

Your good knowledge and kindness in playing with all the pieces were very useful. I don’t know what I would have done if I had not encountered such a step like this.
Devops Training in Chennai

Devops Training in Bangalore

Devops Training in pune

Mouni yoga said...

Impressive. Your story always brings hope and new energy. Keep up the good work.
python training institute in chennai
python training in Bangalore
python training in pune
python online training

isai 14 said...

This is my 1st visit to your web... But I'm so impressed with your content. Good Job!
Blueprism training in tambaram

Blueprism training in annanagar

Blueprism training in velachery

Ram priya said...

I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.

Data Science training in rajaji nagar | Data Science with Python training in chenni
Data Science training in electronic city | Data Science training in USA
Data science training in pune | Data science training in kalyan nagar

sudhagar raja said...

Very nice post here and thanks for it .I always like and such a super contents of these post.Excellent and very cool idea and great content of different kinds of the valuable information's.

java training in chennai | java training in bangalore

java online training | java training in pune

genga g said...

Great thoughts you got there, believe I may possibly try just some of it throughout my daily life.
angularjs Training in btm

angularjs Training in electronic-city

angularjs online Training

angularjs Training in marathahalli

angularjs interview questions and answers

Anjali Siva said...

Your article gives lots of information to me. I really appreciate your efforts admin, continue sharing more like this.
DevOps certification Chennai
DevOps Training in Chennai
DevOps Training near me
DevOps certification
RPA Training in Chennai
Blue Prism Training in Chennai
UiPath Training in Chennai

Anbarasan14 said...

Thanks for sharing steps. This is really helpful. Keep doing more.

French Class in Mulund
French Coaching in Mulund
French Classes in Mulund East
French Language Classes in Mulund
French Training in Mulund
French Coaching Classes in Mulund
French Classes in Mulund West

Ishu Sathya said...

Really wonderful blog for those who want to explore more on this technology.

best selenium testing training in chennai
Selenium Courses in Chennai
Selenium training Chennai
selenium training in velachery
Selenium Training in Chennai
iOS Training in Chennai
French Classes in Chennai
Big Data Training in Chennai
web designing training in chennai

jaya devan said...

Informative Blog, Thank you to share this
Devops Training Institute in Chennai

harish sharma said...

whatsapp group links

Sadhana Rathore said...

Learned a lot from your post and it is really good. Share more tech updates regularly.
AWS Training in Chennai
AWS course in Chennai

haripriya said...

Thank you for taking the time to provide us with your valuable information. We strive to provide our candidates with excellent care and we take your comments to heart.As always, we appreciate your confidence and trust in us

Microsoft Azure online training
Selenium online training
Java online training
Java Script online training
Share Point online training

tamilselvan said...

Excellent blog, I wish to share your post with my folks circle. It’s really helped me a lot, so keep sharing post like this
devops online training

aws online training

data science with python online training

data science online training

rpa online training

Mettu said...


thanks for sharing us


ek said...

Very informative educational blog, education has widened its wings to an extent. There are many new and interesting fields are making their ways apart from the usual techie and non-techies educational options. Data Science Course has quite a competition.

ek said...

Detailed blog!

Data Science Course in Pune

ek said...

Thanks for sharing the blog.

data science certification

Archive of Tips