Запись фрагментов с использованием JavaScript MediaRecorder - PullRequest
Новая
       3

Запись фрагментов с использованием JavaScript MediaRecorder

0 голосов
/ 07 мая 2019

Код ниже позволяет пользователю начать запись и затем воспроизвести ее для пользователя: 

<body>
<div>
        <h2>Audio record and playback</h2>
        <p>
            <button id=startRecord>start</button>
            <button id=stopRecord disabled>stop</button>
        </p>    
        <p>
            <audio id=recordedAudio></audio>
            <a id=audioDownload></a>
        </p>
</div>
</body>


<script>


(function() {
   // your page initialization code here
   // the DOM will be available here


navigator.mediaDevices.getUserMedia({audio:true})
    .then(stream => {
        rec = new MediaRecorder(stream);
        rec.ondataavailable = e => {
            audioChunks.push(e.data);
            if (rec.state == "inactive"){
        let blob = new Blob(audioChunks,{type:'audio/x-mpeg-3'});
        recordedAudio.src = URL.createObjectURL(blob);
        recordedAudio.controls=true;
        recordedAudio.autoplay=true;
        audioDownload.href = recordedAudio.src;
        audioDownload.download = 'mp3';
        audioDownload.innerHTML = 'download';
     }
        }
    })
    .catch(e=>console.log(e));

startRecord.onclick = e => {
  startRecord.disabled = true;
  stopRecord.disabled=false;
  audioChunks = [];
  rec.start();
}
stopRecord.onclick = e => {
  startRecord.disabled = false;
  stopRecord.disabled=true;
  rec.stop();
}



})();

</script>

Я пытаюсь изменить код, чтобы запись сохранялась каждые 5 секунд. Как программно запустить и остановить функцию записи?

Я пробовал: 

rec.start();
var i = 0, howManyTimes = 10;
function f() {
    i++;
    if( i < howManyTimes ){
        setTimeout( f, 5000 );
        rec.stop();
        rec.start();
    }

}
f();

Но возвращает ошибку: 

ReferenceError: rec is not defined
...