Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Video and Audio (Retired) Media Basics The Audio Element

Posted by john larson
john larson
16,594 Points

cross browser compatibility for audio

I did a small project adding an mp3 file. The only browser it works in is chrome. IE, edge, firefox, opera... won't play the audio

<audio controls autoplay="autoplay">
    <source src="audio/true-crime.mp3" type="audio/mp3">
</audio>

It's just straight forward so I don't know what else I should do.

3 Answers

Ajay Kondath
Ajay Kondath
1,901 Points
Ajay Kondath
Ajay Kondath
1,901 Points

1 - Convert your .mp3 file to .ogg and name it true-crime.ogg 2 - Add the .ogg file where u have the .mp3 file. 3 - Try adding this code below your first source tag <source src="audio/true-crime.ogg" type="audio/ogg">

It should work now.

john larson
john larson
16,594 Points

Ajay, I will try that and assume it will work. I still have a question. The lesson gave the impression that mp3 was compatible with all major modern browsers. Is this not so? Should I allways go for the ogg format? Can I include two audio tags, one for mp3 and one for ogg and let the browser decide? Thanks so much.

john larson
john larson
16,594 Points

Ok, an update. I converted to ogg. Now it works in chrome, opera and firefox . However, it still does not work in either of bill gates inspired browsers. the error message is: "this type of file is not supported" in edge and "invalid source" for IE

Ajay Kondath
Ajay Kondath
1,901 Points
Ajay Kondath
Ajay Kondath
1,901 Points

Mp3 works on all modern browsers. ogg is a free and open audio encoding format. opera and firefox support ogg. its always better to add both mp3 and ogg for cross browser compatibility. It is ok to have both audio source files in the same audio tag. <audio controls autoplay="autoplay"> <source src="audio/true-crime.mp3" type="audio/mpeg"> <source src="audio/true-crime.ogg" type="audio/ogg"> </audio>

and I believe the standard practice would be to use mpeg in MIME type instead of mp3.

Try changing to mpeg and test it again in IE and EDGE.
john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

Ajay, thanks for the help with this. The only way I can get the file to play in edge is if I leave it in wav format. I suspect we're not supposed to use wav because the file is so much larger that way. Two odd things, firefox will only play it if the .ogg file is on top in the addio element. Also, I'm pretty sure when I first statred putting this part of the project together mp3 worked in all the browsers I tried. So, thank you...I'm midway up the bottom point of my learning curve on this one.