That seems to work well in Safari, Firefox and Chrome. However, IE9 won't show the controls if the height is shorter than its controller. FireFox, of course, doesn't play mp3 files (
What were you thinking?), hence the need to have everything duplicated as ogg.
/QUOTE]
One final response, to set the record straight on a few things:
The CSS I posted was an example to show how to style via the CSS/selector, not the actual styles. ;-)
Secondly, please be informed FireFox version 20 which is out now supports the MP3 codec. The issue you noted was related to a licensing and patent situation where FF would not support the MP3 (and h.264 codecs) in certain products. This all changed in January of this year.
If it doesn't work, there's a hidden option to enable:
about:config → media.windows-media-foundation.enabled → true
Now users here following this are fully informed of what's really going on with FF and MP3 support.
Finally, here is an example of a technique using HTML5 and Javascript which is 100% MP3/cross browser compatible (example, unstyled, for concept only):
Code:
<audio id="audioplayer" preload controls loop>
<source src="audio.mp3">
</audio>
<script type="text/javascript">
var audioTag = document.createElement('audio');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
AudioPlayer.embed("audioplayer", {soundFile: "audio.mp3"});
}
</script>
Look carefully -- it uses Javascript to dynamically create an audio tag and embed an MP3. If you know Javascript, and based on your last response with code that you do, you can see adding customizations is easy to create exactly what you want, without OGG, and it works on any browser any platform. Just posting it as an
alternative that fits your needs, not that it's the best.
You got it from here.
Cheers.