mister_ex,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.audio{
display:block;
text-align:center;
margin:10px 10px;
width: 100px;
height: 100px;
background: #444;
color: #fff;
font-weight: bold;
float:left;
cursor:pointer;
}
p{
line-height: 50px;
}
</style>
</head>
<body>
<div class="audio">
<p>Звук-1!</p>
<audio src="4824354" type="audio/mpeg"></audio>
</div>
<div class="audio">
<p>Звук-2!</p>
<audio src="3860794" type="audio/mpeg"></audio>
</div>
<div class="audio">
<p>Звук-3!</p>
<audio src="2962900" type="audio/mpeg"></audio>
</div>
<script>
window.addEventListener("DOMContentLoaded", function() {
var audio = new Audio() ;
[].forEach.call(document.querySelectorAll('.audio'), function(item) {
item.addEventListener('click', function() {
var path = 'http://zf.fm/download/';
var audioName = item.querySelector('audio').getAttribute('src');
audio.pause();
var fullPath = path+audioName;
audio.src = fullPath;
audio.play();
});
});
});
</script>
</body>
</html>