feat: Create Waveform component

see: #3

src/App.js

@@ -20,7 +20,7 @@ const AsyncNoMatch = importedComponent(() =>
 })
 
 const Upload = importedComponent(() =>
-  import(/* webpackChunkName:'NoMatch' */ "./pages/Upload"), {
+  import(/* webpackChunkName:'NoMatch' */ "./pages/UploadPage"), {
   LoadingComponent: Loading
 })
 

src/components/Waveform.js

@@ -0,0 +1,43 @@
+import React from "react"
+import Wavesurfer from "react-wavesurfer"
+
+class Waveform extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      playing: false,
+      pos: 0
+    }
+    this.handleTogglePlay = this.handleTogglePlay.bind(this)
+    this.handlePosChange = this.handlePosChange.bind(this)
+  }
+
+  handleTogglePlay() {
+    this.setState({
+      playing: !this.state.playing
+    })
+  }
+
+  handlePosChange(e) {
+    this.setState({
+      pos: e.originalArgs[0],
+      playing: true
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <Wavesurfer
+          audioFile={ "https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3" }
+          pos={ this.state.pos }
+          onPosChange={ this.handlePosChange }
+          playing={ this.state.playing }
+        />
+      </div>
+    )
+  }
+}
+
+export default Waveform

src/pages/UploadPage.js

@@ -1,5 +1,4 @@
 import React from "react"
-import { Link } from "react-router-dom"
 import Layout from "../components/Layout"
 import AudioFileDropZone from "../components/AudioFileDropZone"
 import Waveform from '../components/Waveform'