Cuando tengo más de 1 instancia en una sola página, el reproductor no funciona correctamente, pensé que tendría que crear un ciclo foreach de algún tipo, si alguien pudiera ayudarme con este problema, sería muy apreciado.

Esto es lo que tengo:

 <script src='https://unpkg.com/wavesurfer.js'></script> <script> duration = document.querySelector('#duration'); current = document.querySelector('#current'); playPause = document.querySelector('#playPause'); var timeCalculator = function (value) { second = Math.floor(value % 60); minute = Math.floor((value / 60) % 60); if (second < 10) { second = '0' + second; } return minute + ':' + second; }; wavesurfer = WaveSurfer.create({ container: '#wave', waveColor: '#a43152', progressColor: '#5b1b2d', height: 30, barRadius: 2, barWidth:3, barGap:2, scrollParent: false }); wavesurfer.load('files/$title.mp3'); playPause.addEventListener('click', function (e) { wavesurfer.playPause(); }); wavesurfer.on('ready', function (e) { duration.textContent = timeCalculator(wavesurfer.getDuration()); }); wavesurfer.on('audioprocess', function (e) { current.textContent = timeCalculator(wavesurfer.getCurrentTime()); }); wavesurfer.on('play', function (e) { playPause.classList.remove('fi-rr-play'); playPause.classList.add('fi-rr-pause'); }); //change pause button to play on pause wavesurfer.on('pause', function (e) { playPause.classList.add('fi-rr-play'); playPause.classList.remove('fi-rr-pause'); }); wavesurfer.on('seek', function (e) { current.textContent = timeCalculator(wavesurfer.getCurrentTime()); }); </script>";