延伸我的前幾篇問題：（已解決）使用 wavesurfer.js 顯示聲音的波形圖
我想加個幾個按鈕來控制多個聲音檔的播放與暫停，包含：快速播放、正常播放、慢速播放、暫停。
我嘗試過，如果只有控制一個聲音檔的話可以，但多個聲音檔的話，目前只能控制到最後一個聲音檔。
目前程式碼大致如下(PS：在loadvoice()部分的寫法重複了很多次，請先見諒)：

Javascript部分：

var btnCheck = 0;
var btnRate = 1;
document.onclick=function(){
	var obj = event.srcElement; 
	if(obj.type == "button")
	{ 
		if(obj.id == "fastPlay"){
			btnCheck = 1; //播放
			btnRate = 1.3; //快速
			loadvoice();
		}else if(obj.id == "slowPlay"){
			btnCheck = 1; //播放
			btnRate = 0.7; //慢速
			loadvoice();
		}else if(obj.id == "btnPlay"){
			btnCheck = 1; //播放
			btnRate = 1; //正常
			loadvoice();
		}else if(obj.id == "btnPause"){
			btnCheck = 2; //暫停
			loadvoice();
		}
	} 
}

function loadvoice(){
	if(btnCheck == 0 && btnRate == 1){
		for(i = 0 ; i < waveNum ; i++){
			var wavesurfer = 'wavesurfer' + i;
			wavesurfer = WaveSurfer.create({
				container: '#waveform_'+i,
				waveColor: 'violet',
				progressColor: 'purple',
				audioRate: btnRate
			});
			var voicepath = 'voice/'+voicename+'/'+voicename+'.pcm_'+i+'.wav';
			wavesurfer.load(voicepath);
		}
		wavesurfer.on('ready', function () {
			wavesurfer.play();
		});
	}else if(btnCheck == 1 && btnRate == 0.7){
		for(i = 0 ; i < waveNum ; i++){
			var wavesurfer = 'wavesurfer' + i;
			wavesurfer = WaveSurfer.create({
				container: '#waveform_'+i,
				waveColor: 'violet',
				progressColor: 'purple',
				audioRate: btnRate
			});
			var voicepath = 'voice/'+voicename+'/'+voicename+'.pcm_'+i+'.wav';
			wavesurfer.load(voicepath);
		}
		wavesurfer.on('ready', function () {
			wavesurfer.play();
		});
	}else if(btnCheck == 1 && btnRate == 1){
		for(i = 0 ; i < waveNum ; i++){
			var wavesurfer = 'wavesurfer' + i;
			wavesurfer = WaveSurfer.create({
				container: '#waveform_'+i,
				waveColor: 'violet',
				progressColor: 'purple',
				audioRate: btnRate
			});
			var voicepath = 'voice/'+voicename+'/'+voicename+'.pcm_'+i+'.wav';
			wavesurfer.load(voicepath);
		}
		wavesurfer.on('ready', function () {
			wavesurfer.play();
		});
	}else if(btnCheck == 1 && btnRate == 1.3){
		for(i = 0 ; i < waveNum ; i++){
			var wavesurfer = 'wavesurfer' + i;
			wavesurfer = WaveSurfer.create({
				container: '#waveform_'+i,
				waveColor: 'violet',
				progressColor: 'purple',
				audioRate: btnRate
			});
			var voicepath = 'voice/'+voicename+'/'+voicename+'.pcm_'+i+'.wav';
			wavesurfer.load(voicepath);
		}
		wavesurfer.on('ready', function () {
			wavesurfer.play();
		});
	}else if(btnCheck == 2){
		for(i = 0 ; i < waveNum ; i++){
			var wavesurfer = 'wavesurfer' + i;
			wavesurfer = WaveSurfer.create({
				container: '#waveform_'+i,
				waveColor: 'violet',
				progressColor: 'purple',
				audioRate: 1
			});
			var voicepath = 'voice/'+voicename+'/'+voicename+'.pcm_'+i+'.wav';
			wavesurfer.load(voicepath);
		}
	}
}

HTML部分：

<?php
for($i = 0 ; $i < 24 ; $i++){
	echo "
	<div id='waveform_$i' class='waveform' style='background-color:rgba(255, 255, 255, 0.5)'></div><br>
	<div class='btn-group' role='group'>
		<button type='button' class='btn btn-secondary' id='fastPlay' name='fastPlay_$i' onclick=submit(this)>快速播放</button>
		<button type='button' class='btn btn-secondary' id='btnPlay' name='btnPlay_$i' onclick=submit(this)>正常播放</button>
		<button type='button' class='btn btn-secondary' id='slowPlay' name='slowPlay_$i' onclick=submit(this)>慢速播放</button>
		<button type='button' class='btn btn-warning' id='btnPause' name='btnPause_$i' onclick=submit(this)>暫停</button>
	</div>
	";
}
?>