'Audio tag does not work in Safari or Opera

I'm having a problem playing audio in Safari or Opera. The following code does not work in either:

<audio controls>
    <source src="http://fallowproduction.com/music/Paradigm%20E%20-%20Once%20upon%20a%20Dubstep2.mp3" type="audio/mpeg">
</audio>

Here's the jsFiddle for easy access to the code: http://jsfiddle.net/panq7/1/

Considering it's really simple, I'm mystified as to why. Is this a normal problem? Or is there something else going on? I looked up playing mp3 problems with Safari and while I found no solution, I found a bunch of complaints.

Edit: I fixed the Safari problem by adding an option for an embed tag. Still, it's not the ideal fix, as Safari is supposed to support the <audio> tag, which it does not, apparently (someone let me know if it works in their version of Safari). However, Opera apparently does not support the <audio> tag, or the <embed> tag. This is contrary to the browser specifications, as mentioned later by another member of StackOverflow.

htmlaudiosafariopera


Solution 1:[1]

Opera does support <audio> however, when using MP3, there seems to be limited support for different sampling rates. To solve this problem, I detect support for OGG and detect the Opera browser and fall back to OGG. It's not perfect because I would prefer to simply detect if there is MP3 support and go with that, however Opera reports that it does support MP3, so it's not enough to just check that.

You could also simply use supported MP3 formats for Opera. I believe the following is supported:

32kHz/44.1kHz/48kHz frequencies, 16kbps-10Mbps bitrate

Solution 2:[2]

The reason may be the missing closed tag /> in source line. Wolfgang

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Howard
Solution 2 Wolfgang

Related Questions