Блог

Я использовал следующий метод для записи аудио через браузер, который работает безупречно:

 <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>
  

Теперь я хотел бы иметь несколько экземпляров таких наборов «запись и воспроизведение». При дублировании приведенного выше кода работает только первый экземпляр. Как дублировать / переименовывать переменные js, чтобы каждый набор работал независимо?

Может ли кто-нибудь помочь мне обрабатывать различные экземпляры на одной странице?