Added message if no audio support.

Author: looshi2

css/index.scss

@@ -21,6 +21,10 @@ body {
   height: calc(100% - 80px);
 }
 
+.text-center {
+  text-align: center;
+}
+
 header {
   height: 48px;
   width: 996px;

src/App.js

@@ -18,9 +18,13 @@ import EventEmitter from 'event-emitter'
 
 import WaveTableData from './data/WaveTableData.json'
 
-const audioContext = new AudioContext()
+let audioContext
 const eventEmitter = new EventEmitter()
 
+if (window.AudioContext) {
+  audioContext = new AudioContext()
+}
+
 class App extends React.Component {
   constructor (props) {
     super(props)
@@ -31,9 +35,27 @@ class App extends React.Component {
   }
 
   render () {
+    // Shows a message if no audio support in the browser.
+    if (!window.AudioContext) {
+      return (
+        <div>
+          <h1 style={{textAlign: 'center'}}>Bummer, this browser doesn't support audio.</h1>
+          <h1 style={{textAlign: 'center'}}>Try this synth in Chrome.</h1>
+        </div>
+      )
+    }
+    // Shows a message if not Chrome.
+    const isChrome = !!window.chrome && !!window.chrome.webstore
     return (
       <div>
         <div className='scroll-container'>
+          {!isChrome &&
+            <div>
+              <h1 className='text-center'>
+                Try this synth in Chrome for better audio quality and MIDI support.
+              </h1>
+            </div>
+          }
           <header>
             <div>
               <h1>Dog Synth</h1>
@@ -81,7 +103,7 @@ class App extends React.Component {
                 })
               }
             </div>
-            <div className='scroll-footer'>&nbsp;</div>
+            <div className='scroll-footer' />
           </div>
 
           <footer>

src/data/PresetData.js

@@ -10,11 +10,18 @@ import Actions from '../../data/Actions.js'
 class MidiInput extends React.Component {
   constructor (props) {
     super(props)
-    this.state = {
-      options: [{ label: 'Select MIDI device', value: -1, disabled: true }],
-      selectedInput: -1
+    if (navigator.requestMIDIAccess) {
+      navigator.requestMIDIAccess().then(this.onMidiInit.bind(this), this.onMidiError)
+      this.state = {
+        options: [{ label: 'Select MIDI device', value: -1, disabled: true }],
+        selectedInput: -1
+      }
+    } else {
+      this.state = {
+        options: [{ label: 'MIDI not supported, try Chrome', value: -1, disabled: true }],
+        selectedInput: -1
+      }
     }
-    navigator.requestMIDIAccess().then(this.onMidiInit.bind(this), this.onMidiError)
     this.notesOn = []
   }