waveform

package-lock.json

@@ -5309,6 +5309,11 @@
         "scheduler": "^0.13.5"
       }
     },
+    "react-audio-waveform": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/react-audio-waveform/-/react-audio-waveform-0.0.5.tgz",
+      "integrity": "sha512-4dJwhl+LQRuywzmmjuhWT5GueT3Ai2ZhB+loVxg0sRdhplyDp96xAu10/V/+J25Cl7YqNtl2DWSxvSoI/i6l6w=="
+    },
     "react-bootstrap": {
       "version": "1.0.0-beta.6",
       "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.6.tgz",

package.json

@@ -26,6 +26,7 @@
     "http-proxy-middleware": "^0.19.1",
     "morgan": "^1.9.1",
     "react": "^16.8.5",
+    "react-audio-waveform": "0.0.5",
     "react-bootstrap": "^1.0.0-beta.6",
     "react-dom": "^16.8.5",
     "react-redux": "^6.0.1",

src/components/waveform/index.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import Waveform from 'react-audio-waveform'
+
+
+const Audio = props => {
+  return (
+    <Waveform
+      barWidth={4}
+      peaks={props.peaks}
+      height={200}
+      pos={props.pos}
+      duration={210}
+      onClick={props.handleClick}
+      color="#676767"
+      progressGradientColors={[[0, '#888'], [1, '#aaa']]}
+    />
+  )}
+
+export default Audio

src/routes.js

@@ -3,6 +3,7 @@ import {withRouter, Route} from 'react-router-dom'
 import {connect} from 'react-redux'
 import {Episodes} from './components/episodes'
 import {Captions} from './components/captions'
+import Audio from './components/waveform'
 import Main from './components'
 class Routes extends Component {
   componentDidMount() {
@@ -13,6 +14,7 @@ class Routes extends Component {
         <Route exact path="/" component = {Main} />
         <Route path="/episodes" component={Episodes} />
         <Route path="/captions/:slug" component={Captions} />
+        <Route path="/audio" component={Audio} />
       </div>
     )
   }