Tengo un reproductor de audio que carga una lista de reproducción de audio dinámicamente. Todo funciona bien excepto por la forma de onda. El código es el siguiente:

 var data1 = [{ href: "../media/song1.mp3", name: "Song 1", song: "song1.mp3" },{ href: "../media/song2.mp3", name: "Song 2", song: "song2.mp3" }, { href: "../media/song3.mp3", name: "Song 3", song: "song3.mp3" }] // Create li elements for (var i = 0; i < data1.length; i++) { var s = data1[i]; var t = document.createElement('li'); t.setAttribute("onclick","myFunction()"); t.setAttribute("id","li-items"); var wavesurfer = document.createElement('div'); wavesurfer.setAttribute("id","wave"); t.dataset.song = s.song; t.textContent = s.name; t.appendChild(wavesurfer); document.getElementById('playlist1').appendChild(t); } var wavesurfer = WaveSurfer.create({ container: '#wave', waveColor: 'grey', height: '45', progressColor: 'white' }); wavesurfer.load(" + data1[i].href + ");

NOTA: (La pausa de reproducción y otros botones de control están en un archivo js diferente, por lo que supongo que agregar 'wavesurfer.play' al final puede ser inútil, pero corrígeme si me equivoco).

Falta algo y no puedo entender qué. Cualquier ayuda sería muy apreciada.

Gracias por adelantado. :)