Остановить другие плееры wavesurfer-js?

На странице выводится множество плееров отдельно.При запуске одного плеера все хорошо, но когда я хочу запустить второй трек например то первый так и работает, каким образом его остановить, всю документацию прочел, но никакие проверку не даются. Прикладываю код самой кнопке по клику которой происходит play/pause

playIconContainer.addEventListener('click', () => {     
        if(playState === 'play') {
            audio.play();
            wavesurfer.play();
            playIconContainer.innerHTML = '<svg width="800px" height="800px" viewBox="-1 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Dribbble-Light-Preview" transform="translate(-227.000000, -3765.000000)" fill="#000000"><g id="icons" transform="translate(56.000000, 160.000000)"><path d="M172,3605 C171.448,3605 171,3605.448 171,3606 L171,3612 C171,3612.552 171.448,3613 172,3613 C172.552,3613 173,3612.552 173,3612 L173,3606 C173,3605.448 172.552,3605 172,3605 M177,3606 L177,3612 C177,3612.552 176.552,3613 176,3613 C175.448,3613 175,3612.552 175,3612 L175,3606 C175,3605.448 175.448,3605 176,3605 C176.552,3605 177,3605.448 177,3606" id="pause-[#1006]"></path></g></g></g></svg>';
            requestAnimationFrame(whilePlaying);
            playState = 'pause';
        }else {
            wavesurfer.pause();
            audio.pause();
            playIconContainer.innerHTML = '<svg><use xlink:href="/wp-content/themes/provodnik/img/sprite.svg#music-play"></use></svg>';
            cancelAnimationFrame(raf);
            playState = 'play';
            
        }       
        
     });