📄🔉 Updated README for new audio features

Author: fa-sharp

README.md

@@ -1,37 +1,36 @@
 # The Virtual Keyboard
 
-A virtual piano keyboard app, written in Typescript and React. Suitable for teaching and learning!!
+A virtual piano keyboard app that runs in the browser, written using Typescript and React. Suitable for teaching and learning!!
+
+![Demo image of virtual keyboard](./demo.png)
 
 ### Features
 - Shows notes on the grand staff as you play them on the keyboard.
 - Responds to keyboard and mouse input
-- Responds to MIDI input in Chrome and Edge browsers
-- Many settings to customize the functionality and display
-    - Show/hide piano, staff, note names
+- Responds to MIDI keyboard input in Chrome and Edge browsers, using the Web MIDI API
+- Audio output (piano and synth sounds) via Tone.js
+- Many settings to customize the functionality and display:
+    - Show/hide piano, staff, note names, keyboard shortcuts
     - Change the piano range
     - Make the notes sticky/sustain
     - Re-size the keyboard for small and big screens.
 
-![Demo image of virtual keyboard](./demo.png)
-
-### Technologies used
-- To display the music staff: [abcjs library](https://paulrosen.github.io/abcjs/)
-- To connect to MIDI devices: [Web MIDI API](https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API) and [JZZ](https://github.com/jazz-soft/JZZ) library
-- For React magic: uses custom hooks and useReducer for state logic (see `src/state` folder)
-- For CSS magic: uses Sass, CSS variables, calc(), etc. (see `src/styles` folder)
+### Libraries and features used
+- To display the music staff: the amazing [abcjs library](https://paulrosen.github.io/abcjs/) by Paul Rosen
+- To connect to MIDI devices: the [JZZ](https://github.com/jazz-soft/JZZ) library, which is a wrapper over the [Web MIDI API](https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API)
+- [Tone.js](https://tonejs.github.io/) for playing audio via the Web Audio API
+- Piano samples from the ["Little Lizard" library](https://linuxmusicians.com/viewtopic.php?t=12046)
+- React bells and whistles: uses custom hooks and useReducer for state logic (see `src/state` folder)
+- CSS bells andwhistles: uses Sass, CSS variables, calc(), etc. (see `src/styles` folder)
 - Settings are saved using browser's Local Storage
 
 ### In development
-- Touch support and audio output!
-
-
-
+- Touch support
+- Offline mode (using service workers)
 
-## Acknowledgements
-- Paul Rosen's amazing [abcjs library](https://paulrosen.github.io/abcjs/) for the music staff display
-- The [JZZ library](https://jazz-soft.net/doc/JZZ/jzz.html) for connecting to MIDI devices
-- The React team and [Create React App](https://github.com/facebook/create-react-app).
+## Inspirations
 - [This video](https://www.youtube.com/watch?v=kMf1XWVY2cA) from [Suboptimal Engineer](https://github.com/SuboptimalEng) for the initial setup, code, and inspiration
+- Examples of cool little music apps from [Chrome Music Lab](https://musiclab.chromeexperiments.com/)
 
 ## Available Scripts
 

src/components/App.tsx

@@ -1,18 +1,18 @@
 import { Reducer, useReducer, useRef, useState } from 'react';
 
-import useKeyboardSettings from '../state/useKeyboardSettings';
+import { useKeyboardSettings } from '../state/useKeyboardSettings';
 import { PianoKeysAction, pianoKeysReducer } from '../state/PianoKeysReducer';
 import { useMouseListeners } from '../listeners/MouseListeners';
 import { useKeyboardListeners } from '../listeners/KeyboardListeners';
 import { useMIDIListeners } from '../listeners/MIDIListeners';
+import { usePlayer } from '../audio/usePlayer';
 
 import Sidebar from './sidebar/Sidebar';
 import Piano from './piano/Piano';
 import Staff from './staff/Staff';
 import '../styles/main.scss';
 
 import githubLogo from "../res/images/github-logo-default.png"
-import { usePlayer } from '../audio/usePlayer';
 
 function App() {
 

src/state/useKeyboardSettings.ts

@@ -27,10 +27,8 @@ const INITIAL_SETTINGS: KeyboardSettings =
 };
 
 
-const useKeyboardSettings = () => {
+export const useKeyboardSettings = () => {
     const { settings, updateSetting } = useLocalStorage("kbd-settings", INITIAL_SETTINGS);
 
     return { settings, updateSetting }
-}
-
-export default useKeyboardSettings
+}