[jquery] Problema con tag <audio>

[Scream]

Buongiorno a tutti, partendo da questo script http://jsfiddle.net/WsXX3/ ho creato questo codice:

var audio;
var playlist;
var tracks;
var current;

init();
function init(){
    current = 0;
    audio = $('audio');
    playlist = $('#playlist');
    tracks = playlist.find('a.player');
    len = tracks.length - 1;
    playlist.find('a.player').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
}
function run(link, player){
        par = link.parent();
        par.addClass('success').siblings().removeClass('success');
        var source = document.createElement('source');
        source.type = 'audio/ogg';
        source.src = link.slice(0, -1)+'.ogg';
        audio.appendChild(source);
        source = document.createElement('source');
        source.type = 'audio/mpeg';
        source.src = link;
        audio.appendChild(source);
        $('#audio').append('<a href="'+link+'">Scarica</a>');
        audio[0].load();
        audio[0].play();
}

mentre il codice HTML della pagina è così:

<audio id="audio" controls></audio>
<table id="playlist">
  <tr>
    <td><a href="/playdemo1.mp3" class="player">Play</a>
    <td>Titolo A</td>
  </tr>
  <tr>
    <td><a href="/playdemo2.mp3" class="player">Play</a>
    <td>Titolo B</td>
  </tr>
</table>

Il problema è che cliccando sulla voce Play cerca di aprire il file (non viene quindi intercettato da jquery)
Avete idea su come sistemare?

[rinaldi]

Dovesti forzare il download del file lato server in un'altra pagina da come ho capito

[Scream]

no, non voglio forzare il download. Voglio farlo aprire nel player <audio>. Invece mi apre una nuova pagina.

[Vindav]

init();
function init(){

Stai richiamando una funzione che non esiste, perche viene definita appena sotto.

$(function(){
    current = 0;
    audio = $('audio');
    playlist = $('#playlist');
    tracks = playlist.find('a.player');
    len = tracks.length - 1;
    playlist.find('a.player').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
});

[Scream]

Sembra essere sulla strada giusta, ma ora, al click sul link, ottengo questo errore:

TypeError: audio.appendChild is not a function
audio.appendChild(source);
↑

[Vindav]

è perche stai mischiando javascript puro e jquery, usa il metodo append http://api.jquery.com/append/

[Scream]

Ok, ho risolto in questo modo. Posto lo script che ho caricato su JSFiddle per dare una idea completa:
http://jsfiddle.net/h2kx0uak/

Grazie a tutti per l'aiuto