maxvolodya,
вот пример
http://learn.javascript.ru/play/xCoCP
<!DOCTYPE HTML>
<html>
<head>
<style>
table tr:hover
{
cursor: pointer;
background-color: rgba(255,0,0,.3);
}
</style>
</head>
<body>
<table id="music-list">
<tr>
<td data-src="http://cs9-10v4.vk.me/p12/e61136d2b40a9f.mp3?extra=idJNGELhQWCZ1k15kvGnbif0aY5rO7rWXgLMqvpWWKJvSiUajonMVR7F0nT8LWT47aoeLPQW0GNcOwMYKm1fuPIitsw-K6Q">
<div>30 Seconds To Mars - This Is War</div>
</td>
</tr>
<tr>
<td data-src="http://cs9-8v4.vk.me/p24/bb968817be6960.mp3?extra=hskh5caZMrgPY5KCBbL38PQQ9GVpJZc5fpfaCPaxCLTvEX6l2fgyrgn8RMCWhUMpTOB33jlD81ZjBHEa3cfwf-0ulHqFnmU">
Lana Del Rey - Video Games (Original)
</td>
</tr>
<tr>
<td data-src="http://cs536204.vk.me/u35133798/audios/2d5d9e0a126e.mp3?extra=TLxfUtQSuJKwrMd-RcWdWhqR9UnQpT_gdcbiJNX9lGyK9xdfP7qZ1SLsoiuZLjCsSjVpfMZyWYcnWF2RPESkcgNR2rt3tzU">
Muse - Panic Station
</td>
</tr>
</table>
<script>
(function () {
function parent(fnc, endElem) {// лень было писать цикл проверки поэтому скопировал со своего кода реализцаю.
if(typeof fnc != "function")
return this.parentElement;
if(fnc.call(this, this))
return this;
var parent = this;
while(parent = parent.parentElement) {
if(endElem && parent == endElem)
return;
if(fnc.call(this, parent))
return parent;
}
};
var list = document.getElementById("music-list"), audio = audioCreate();
list.addEventListener("click", function (e) {
var src;
var elem = parent.call(e.target, function (elem) {
return elem.tagName == "TD" && (src = elem.getAttribute("data-src"));
}, list);
if(!elem) return;
audio.src = src;
audio.play();
});
function audioCreate() {
audio = document.createElement('audio');
audio.className = 'music';
audio.setAttribute('controls','');
audio.preload = 'metadata';
audio.type = 'audio/mp3';
audio.innerHTML = 'Вашим браузером не поддерживаеться вопспроизведение музыки.';
return document.body.appendChild(audio);
}
}());
</script>
</body>
</html>