JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<script src="https://unpkg.com/wavesurfer.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<style>

.play {
  float: left;
  margin: 30px 10px 0 0;
  background-color: transparent;
  border: none;
}

#waveform {
  width: 300px;
  border: 1px solid #f2f2f2;
  border-radius: 5px;
}

#waveform wave {
  border-right: none !important;
}

.audio-title {
  font-family: Helvetica, Arial, sans-serif;
}


</style>
</head>


<div id="waveform"><button class="play" onclick="wavesurfer.playPause()">
  <i class="fa fa-play"></i> <i class="fa fa-pause"></i>
</button></div>
<p class="audio-title">
MLK I have a dream
</p>

<script>
  var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple',
    height: 75,
    responsive: true,
    normalize: false
  });

  wavesurfer.load('https://ia600207.us.archive.org/29/items/MLKDream/MLKDream.mp3');

  wavesurfer.on('ready', function() {
    wavesurfer.play();
  });

</script>