<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<style type="text/css">
a.link{display:block;width:300px;height:400px;border:1px solid #000;}
</style>
<script type="text/javascript">
function media() {
var self=this,
setSrc=function() {};
srcValue='';
self.getSrc=function() {
return srcValue;
};
setSrc=function(src) {
srcValue=src;
};
self.play=function(mp3) {
document.getElementById('play').innerHTML=mp3+' '+self.getSrc();
};
self.playAudio=function playAudio(src,mp3) {
src.style.background='#000000';
setSrc(src);
self.play(mp3);
};
}
var media=new media();
</script>
</head>
<body>
<span id="play"></span>
<a href="" class="link" onclick="media.playAudio(this,'1.mp3');return false"></a>
</body>
</html>
А дальше разберитесь сами)
Это я для общего представление как работать более удобнее.