added Waveform

package-lock.json

@@ -5309,6 +5309,14 @@
         "scheduler": "^0.13.5"
       }
     },
+    "react-audio-player": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/react-audio-player/-/react-audio-player-0.11.0.tgz",
+      "integrity": "sha512-SSQEvgUXYCdf11mjC75st1VFW8/3IKXKjbse41AiUON2KrNu9w7VvlejfUwoE3W96zXRw/J/9QbsIpKAv5O0/A==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-audio-waveform": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/react-audio-waveform/-/react-audio-waveform-0.0.5.tgz",

package.json

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

src/components/waveform/index.js

@@ -1,19 +1,69 @@
-import React from 'react'
+// 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
+
+import React, { Component } from 'react'
 import Waveform from 'react-audio-waveform'
+const config = require('./audio/loneDigger.json')
+import ReactAudioPlayer from 'react-audio-player'
 
+class App extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      pos: 0
+    }
+    this.handleClick = this.handleClick.bind(this)
+  }
 
-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']]}
-    />
-  )}
+  handleClick (secs) {
+    this.setState({
+      pos: secs
+    })
+  }
 
-export default Audio
+  render() {
+    return (
+      <div className="container App">
+        <header className="App-header">
+          <h1 className="App-title">Player</h1>
+        </header>
+        <Waveform
+          peaks={config.data}
+          height={200}
+          pos={this.state.pos}
+          duration={3*60+49}
+          onClick={this.handleClick}
+          color="#676767"
+          progressGradientColors={[[0, '#33cccc'], [1, '#aaa']]}
+        />
+        <ReactAudioPlayer
+          src="/01. Lone Digger.mp3"
+          autoPlay
+          controls
+          listenInterval={100}
+          ref={(element) => { this.rap = element }}
+          onListen={()=>this.setState({pos:this.rap.audioEl.currentTime})}
+        />
+      </div>
+    )
+  }
+}
+
+export default App