This is a sample on how to use the microphone plugin for Wavesurfer.js library.  

How to use the microphone sample:

Step 1 - create the html and css

<div id="waveform"></div>
<button class="btn btn-primary" onclick="microphone.start()">
  <i class="glyphicon glyphicon-play"></i>
  Start Mic
</button>

body{
  font: 15px helvetica,arial,freesans,clean,sans-serif;
  margin: 20px auto;    
  text-align: center;
}
#waveform{
  background: rgba(0,0,0,0.8);
}

button{
  background: #eee;
  border: 1px solid #ddd;
  border-bottom: 4px solid #ccc;
  cursor: pointer;
  font-size: 20px;
  margin-top: 10px;
  padding: 10px;
}
button:active{
  outline: none;
  border-top: 4px solid #eee;
  border-bottom: 2px solid #777;
}
button:focus{
  outline: none;
}

Step 2 - create the WaveSurfer object

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#D2EDD4',
  progressColor: '#46B54D',
  barHeight: 2
});

Step 3 - create the Microphone plugin object

var microphone = Object.create(WaveSurfer.Microphone);
microphone.init({
    wavesurfer: wavesurfer
});
microphone.on('deviceReady', function(stream) {
    console.log('Device ready!', stream);
});
microphone.on('deviceError', function(code) {
    console.warn('Device error: ' + code);
});

Step 4 - enable your microphone by clicking the Start Mic button in the preview