I really wish you hadn't asked this question, as I just had to go do some further research to see what was possible. (I know that JQuery etc could probably do it but I decided to have a look at doing it myself)
It turns out that .mp3 is handled by firefox, it's just it won't work in audio tags, instead you have to use video ones.
It should be noted:
This will parse any urls with mp3 written in them, that could mean the subdomain, domain, tld, folder, filename or query string. This can be recoded to be strict in where mp3 applies (although I'm guessing a head request would be required for the file to identify that it's not a folder and perhaps check compatible mime types).
It uses an eventhandler, this allows it to be placed anywhere and waits until the page has finished loading before triggering.
<script>
window.addEventListener('load', function () {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
if (links[i].href.search("mp3") !== -1) {
links[i].outerHTML ='<video id="mediamp3" controls=""><source src="'+links[i]+'" type="audio/mpeg"></video>';
}
}
});
</script>
You can then use CSS to resize the video block;
.mediamp3{
display:inline-block;
height:28px;
width:200px;
}
Edit: This has been updated to reflect the working code.
