JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.blue_grey-red.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<script src="http://wavesurfer-js.org/dist/wavesurfer.min.js"></script>
<div>
  <h3>Test</h3>

  <div id="waveform"></div>
  <div class="controls">
    <button class="btn btn-primary" data-action="play">
      <i class="glyphicon glyphicon-play"></i> Play /
      <i class="glyphicon glyphicon-pause"></i> Pause
    </button>
  </div>
</div>

CSS

.demo-ribbon {
  width: 100%;
  height: 40vh;
  background-color: #3F51B5;
  flex-shrink: 0;
}

.demo-main {
  margin-top: -35vh;
  flex-shrink: 0;
}

.demo-header .mdl-layout__header-row {
  padding-left: 40px;
}

.demo-container {
  max-width: 1600px;
  width: calc(100% - 16px);
  margin: 0 auto;
}

.demo-content {
  border-radius: 2px;
  padding: 80px 56px;
  margin-bottom: 80px;
}

.demo-layout.is-small-screen .demo-content {
  padding: 40px 28px;
}

.demo-content h3 {
  margin-top: 48px;
}

.demo-footer {
  padding-left: 40px;
}

.demo-footer .mdl-mini-footer--link-list a {
  font-size: 13px;
}


/* Space out content a bit */

body {
  padding-top: 20px;
  padding-bottom: 20px;
}


/* Everything but the jumbotron gets side spacing for mobile first views */

.header,
.marketing,
.footer {
  padding-left: 15px;
  padding-right: 15px;
}


/* Custom page header */

.header {
  border-bottom: 1px solid #e5e5e5;
}


/* Make the masthead heading the same height as the navigation */

.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
  padding-bottom: 19px;
}


/* Custom page footer */

.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}


/* Customize container */

@media (min-width: 1024px) {
  .container {
    max-width: 900px;
  }
}

.container-narrow > hr {
  margin: 30px 0;
}


/* Supporting marketing content */

.marketing {
  margin: 40px 0;
}

.marketing p + h4 {
  margin-top: 28px;
}


/* Responsive: Portrait tablets and up */

@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-left: 0;
    padding-right: 0;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 30px;
  }
}

.controls {
  padding: 30px 0 15px;
  text-align: center;
}

.controls .btn {
  margin-bottom: 15px;
}

@media screen and (min-width: 990px) {
  .controls .mark-controls {
    display: inline;
  }
}

.lead {
  text-align: center;
  padding:...

JavaScript

'use strict';

// Create an instance
var wavesurfer = Object.create(WaveSurfer);

// Init & load audio file
document.addEventListener('DOMContentLoaded', function() {
      // Init
      wavesurfer.init({
        container: document.querySelector('#waveform'),
        waveColor: '#A8DBA8',
        progressColor: '#3B8686',
        backend: 'MediaElement'
      });

      // Load audio from URL
      wavesurfer.load('http://wavesurfer-js.org/example/media/demo.wav');

      document.querySelector(
        '[data-action="play"]'
      ).addEventListener('click', wavesurfer.playPause.bind(wavesurfer));