Player de áudio com JQuery

Como criar um player de áudio com informações dinâmicas, vindo de um banco de dados por exemplo.

Imagine que o nome das músicas esta em uma tabela no banco de dados e você precisa criar um player dinâmico para tocar essas músicas, mas como fazer?

Vamos trabalhar um código JQuery que eu desenvolvi e uso bastante:
1º – Temos que ter um lugar no site para guardar as músicas no meu caso crie uma pasta chamada músicas:

2º – Vamos criar uma div para receber o nosso player quando o usuário clicar no botão correspondente a música que ele quer ouvir.

3º – Como o nome das músicas esta em um “Banco de Dados” e o conteúdo no caso é dinâmico, vamos usar o seguinte código, caso você faça um for,while, etc:

4º – Mágica no JQuery, o que vamos fazer, definir o caminho do nosso site/nomedapasta , quando o usuário clicar no botão player ele vai pegar o identificador “player_em_jquery” que no caso é a classe dos nossos botões e o id atual deste botão, o que retorna nome da música.
Feito isto o montamos o Player via JQuery e incluímos ele dentro da div “player”.

$(document).ready(function(){
$(".player_em_jquery").click(function(){
    /* definimos a url do site e a pasta onde se encontram as músicas */
    var url_site = "http://seusite.com/musicas/";

    /* pega o atributo id da imagem que usuário clicou no momento */
    var audio = $(this).attr("id");

    /* monta o player */
    var inBox = '';
    /* incluí o player montado dentro da div player */
    $("#player").html(inBox);

    });
    });

Nada melhor do que ver um “exemplo” funcionando.