Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button id="record">record</button>
</body>
</html>
 
var $record = document.querySelector('#record')
$record.onclick = doRecord
var recorder
var recordedData
function doRecord () {
  navigator.mediaDevices.getUserMedia({
    audio: true
  })
  
  .then(function (stream) {
    $record.onclick = doStop
    $record.textContent = 'stop'
    recordedData = []
    
    recorder = new MediaRecorder(stream, {
      mimeType: 'audio/webm; codecs=opus'
    })
    recorder.addEventListener('error', function (event) {
      console.log('Audio Recording error', event)
    })
    recorder.addEventListener('dataavailable', function (event) {
      if (typeof event.data === 'undefined' || event.data.size === 0) return
      recordedData.push(event.data)
    })
    recorder.addEventListener('stop', function (event) {
      var tracks = stream.getTracks()
      tracks.forEach(function (track) { track.stop() })
    })
     
    recorder.start(10)
  })
  
  .catch(function (error) { console.log(error) })
}
function doStop () {
  recorder.stop()
  $record.textContent = 'record'
  $record.onclick = doRecord
  
  var blob = new Blob(recordedData, {
    type: 'audio/webm'
  })
  var a = document.createElement('a')
  var url = window.URL.createObjectURL(blob)
  a.href = url
  a.download = 'record.webm'
  a.click()
  document.body.appendChild(a)
  // http://stackoverflow.com/questions/30694453/blob-createobjecturl-download-not-working-in-firefox-but-works-when-debugging
  setTimeout(function () {
    document.body.removeChild(a)
    window.URL.revokeObjectURL(url)
  }, 100)
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers