Lista de botones Play - Stop audio

Question

Hola!, espero me puedan ayudar.
Estoy haciendo una página web para una radio, en la cual se coloca una lista de canciones ("el Top 10"), y quiero poner una lista con el nombre de la canción y cada una con su botón para que el usuario pueda reproducir cada una de estas canciones de forma individual. Me estoy basando en el siguiente código:(fuente:https://github.com/victorcuervo/lineadecodigo_html5/blob/master/Audio/boton-play-stop.html)

<h1>Boton Play y Stop</h1>

       <audio src="ruta_de_mp3" controls>  

         Tu navegador no soporta el elemento <code>audio</code>.  

       </audio>  

       <button id="boton">Play</button>

       <script type="text/javascript">

        var v = document.getElementsByTagName("audio")[0];

        var sound = false;

        var boton = document.getElementById("boton");

        boton.addEventListener("click", function(){

        if (!sound) {

        v.play();

        this.innerHTML = "Pause";

        sound = true;

        } else {

        v.pause();

        this.innerHTML = "Play";

        sound = false;

        }

        });

       </script>

Espero me puedan ayudar. 
De antemano, muchas Gracias!

Answer 1

Buenas,

Creo que la respuesta la vas a encontrar en otro artículo http://lineadecodigo.com/html5/musica-aleatoria-html5/

La idea es que tengas una lista de las canciones:

var lista = [
['nirvana.ogg','Nirvana - Lithium (Live at Reading 1992)'],
['blur.ogg','Blur - Country House'],['weezer.ogg','Weezer - Buddy Holly']];

Y luego cargues mediante Javascript la canción que quieras. Por ejemplo para cargar la que quieras puedes utilizar lo siguiente:

var reproductor = document.getElementById("miaudio");
var source= document.createElement('source');
source.src=lista[numero][0];
source.type="audio/ogg";
reproductor.appendChild(source);

Espero que esto te pueda ayudar.