waveforfer with for循环中的多个波

Question

我正在尝试使用for循环生成多个waveurfer音频波，这是我的代码：

        $.ajax({
        url: "./php/getMusic.php",
        dataType: "json",
        async: false,
        success: function(data){
            var wavesurfer = []
            var array = data;
            console.log(array)
            var i = 0;
            while( i < array.length){
                document.addEventListener('DOMContentLoaded', function () {

                    document.getElementById("trackholder").innerHTML += '<div id="wave'+i+'" class="waveform"><div class="tracklogo">Sample logo</div><div class="title"><p><font color="lightblue" size="5em">Sample artist -<font size="4em">Sample Title</p></div></font></font></div></div>'

                    wavesurfer[i] = Object.create(WaveSurfer);

                    wavesurfer[i].init({
                        container: document.getElementById("wave"+i),
                        waveColor: 'purple',
                        progressColor: 'blue'
                    });

                    wavesurfer[i].load("./music/"+array[i]);

                    console.log(i+" is loading")
                  })
            i++
        }
    }
})

问题在于DOMCOntentLoaded事件监听器，没有任何波浪会加载，只有on会加载。

注意：名为'array'的数组包含2个元素：demo1.mp3和demo2.mp3