Javascript 如何在一个html页面中运行多个音频录制实例？

我使用了以下方法通过浏览器录制音频，其工作方式完美无缺：

<div class="center-align">
   <h1>Example 1 - <span>Version_8 </span></h1>
   <p>getUserMedia() - AudioContext() - <a href="https://github.com/mattdiamond/Recorderjs">RecorderJS</a> - exportWAV()</p>
   <audio controls autoplay></audio>
   <br>
   <button class="btn waves-effect waves-light js-start">Start</button>
   <button class="btn waves-effect waves-light js-stop" disabled>Stop</button>
   <br>
   <br>
   <button class="btn waves-effect waves-light js-code">Show Code</button>
</div>
<hr>
<pre style="font-family: GillSans, Calibri, Trebuchet, sans-serif;" class="hide"></pre>
<script src="./recorder.js"></script>
<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script class="containerScript">
   let recorder;
   let context;
   let audio = document.querySelector('audio');
   let startBtn = document.querySelector('.js-start');
   let stopBtn = document.querySelector('.js-stop');
   let codeBtn = document.querySelector('.js-code');
   let pre = document.querySelector('pre');
   
   window.URL = window.URL || window.webkitURL;
   /** 
    * Detecte the correct AudioContext for the browser 
    * */
   window.AudioContext = window.AudioContext || window.webkitAudioContext;
   navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
   
   let onFail = function(e) {
    alert('Error '+e);
    console.log('Rejected!', e);
   };
   
   let onSuccess = function(s) {
    console.log('Recording...');
    let tracks = s.getTracks();
    startBtn.setAttribute('disabled', true);
    stopBtn.removeAttribute('disabled');
    context = new AudioContext();
    let mediaStreamSource = context.createMediaStreamSource(s);
    recorder = new Recorder(mediaStreamSource);
    recorder.record();
   
    stopBtn.addEventListener('click', ()=>{
        console.log('Stop Recording...');
        stopBtn.setAttribute('disabled', true);
        startBtn.removeAttribute('disabled');
        recorder.stop();
        tracks.forEach(track => track.stop());
        recorder.exportWAV(function(s) {
            audio.src = window.URL.createObjectURL(s);
        });
    });
   }
   
   startBtn.addEventListener('click', ()=>{
    if (navigator.getUserMedia) {
        /** 
         * ask permission of the user for use microphone or camera  
         */
        navigator.getUserMedia({audio: true}, onSuccess, onFail);                                                                           
    } else {
        console.warn('navigator.getUserMedia not present');
    }
   });
   
   codeBtn.addEventListener('click', () => {
    pre.classList.toggle('hide');
    pre.innerHTML = document.querySelector('.containerScript').innerHTML;
   });
</script>

示例1-版本8
getUserMedia（）-AudioContext（）--exportWAV（）



开始
停止




显示代码

让录音机；
让语境；
let audio=document.querySelector（'audio'）；
让startBtn=document.querySelector（'.js start'）；
让stopBtn=document.querySelector（'.js stop'）；
让codeBtn=document.querySelector（'.js-code'）；
let pre=document.querySelector（'pre'）；
window.URL=window.URL | | window.webkitURL；
/** 
*检测浏览器的正确音频上下文
* */
window.AudioContext=window.AudioContext | | window.webkitadiocontext；
navigator.getUserMedia=navigator.getUserMedia | | navigator.webkitGetUserMedia | | navigator.mozGetUserMedia | | navigator.msGetUserMedia；
设onFail=函数（e）{
警报（“错误”+e）；
console.log（'Rejected！'，e）；
};
让onSuccess=函数{
console.log（'Recording…'）；
让tracks=s.getTracks（）；
startBtn.setAttribute（'disabled'，true）；
stopBtn.removeAttribute（“已禁用”）；
上下文=新的AudioContext（）；
让mediaStreamSource=context.createMediaStreamSource；
记录器=新记录器（mediaStreamSource）；
recorder.record（）；
stopBtn.addEventListener（'单击'，（）=>{
console.log（'停止记录…'）；
stopBtn.setAttribute（'disabled'，true）；
startBtn.removeAttribute（“已禁用”）；
录音机。停止（）；
tracks.forEach（track=>track.stop（））；
记录器.exportWAV（功能）{
audio.src=window.URL.createObjectURL；
});
});
}
startBtn.addEventListener（'单击'，（）=>{
if（navigator.getUserMedia）{
/** 
*使用麦克风或摄像头时，请征得用户的许可
*/
getUserMedia（{audio:true}，onSuccess，onFail）；
}否则{
console.warn（'navigator.getUserMedia不存在'）；
}
});
codeBtn.addEventListener（'单击'，（）=>{
pre.classList.toggle（'hide'）；
pre.innerHTML=document.querySelector（'.containerScript'）.innerHTML；
});

现在，我希望有多个这样的“录制和重播”集的实例。在复制上述代码时，只有第一个实例在工作。如何复制/重命名js变量，使每个变量集独立工作

有人能帮我在一个页面中处理各种实例吗