Merge pull request #1 from miukimiu/fixing-chrome-issue-audiocontext-…

…resume

Fixing chrome issue - audioContext must be resumed

package.json

@@ -3,12 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "p5": "^0.7.3",
     "popmotion": "^8.4.1",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
+    "react-p5-wrapper": "^0.0.4",
     "react-scripts": "2.0.4",
-    "styled-components": "^3.4.10",
-    "styled-normalize": "^8.0.2"
+    "styled-components": "^4.1.3",
+    "styled-normalize": "^8.0.6"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -28,8 +30,6 @@
   "devDependencies": {
     "inline-worker": "^1.1.0",
     "lodash": "^4.17.11",
-    "p5": "^0.7.2",
-    "react-p5-wrapper": "0.0.4",
     "snapsvg": "^0.5.1",
     "snapsvg-cjs": "0.0.6",
     "svg.js": "^2.6.6"

src/App.js

@@ -1,13 +1,13 @@
 import React, { Component } from "react";
 import CassetteTape from "./components/CassetteTape";
-import { injectGlobal } from "styled-components";
+import { createGlobalStyle } from "styled-components";
 import styledNormalize from "styled-normalize";
 
-injectGlobal`
+const GlobalStyles = createGlobalStyle`
 
 @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400');
 
-${styledNormalize}
+${styledNormalize};
 
 html {
   box-sizing: border-box;
@@ -27,6 +27,7 @@ class App extends Component {
   render() {
     return (
       <div className="App">
+        <GlobalStyles />
         <CassetteTape vizColor="#19ca90" />
       </div>
     );

src/components/CassetteTape.jsx

@@ -83,6 +83,9 @@ class CassetteTape extends React.Component {
     if (isRecording) {
       this.stopRecording();
     } else {
+      if (this.recorder.recorder.context.state === "suspended") {
+        this.recorder.recorder.context.resume();
+      }
       this.recorder.record();
     }
 
@@ -139,7 +142,7 @@ class CassetteTape extends React.Component {
         }}
       >
         <Wrapper
-          innerRef={this.casseteRef}
+          ref={this.casseteRef}
           className="cassette-wrapper"
           vizColor={vizColor}
         >

src/components/recorder/audio-recorder.js

@@ -8,6 +8,7 @@ class AudioRecorder {
     };
 
     let audioContext;
+
     try {
       // webkit shim
       window.AudioContext = window.AudioContext || window.webkitAudioContext;

src/components/visualization/sketch.js

@@ -58,4 +58,10 @@ export default function sketch(p) {
     p.vertex(0, p.windowHeight);
     p.endShape(p.CLOSE);
   };
+
+  p.touchStarted = function() {
+    if (mic.mediaStream.context.state !== "running") {
+      mic.mediaStream.context.resume();
+    }
+  };
 }