more info in API, UX reminder, examples, to fix #9 and #12

hchiam · Oct 28, 2019 · d46664f · d46664f
1 parent cf6e15d
commit d46664f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -44,15 +44,16 @@ Here's an example of 2 notes playing simultaneously: [`example-two-notes.html`](
 
 ### `_2DNote.audioContext`:
 
-* This is the [AudioContext](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext) used by the `_2DNote` instance.
+* This is the [AudioContext](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext) used by the `_2DNote` instance to do the work of actually creating the note.
 
 ### `_2DNote.note`:
 
-* This is the note that the `_2DNote` instance can play.
+* This holds the information about the note (oscillator, volumeSetup) that the `_2DNote` instance can play.
 
 ### `_2DNote.play(e)`:
 
 * This plays a note based on the position of the element or mouse click event, which it figures out for you. (`e` is for event ***or*** element.)
+* **UX reminder:** You should let users know when the cursor moves outside the window by stopping the note from playing when that happens. This avoids having users click something outside the window without realizing it. To do that, try something like `<body onmouseleave="_2DNote.stop();">` on the `body` tag or the enclosing HTML element. See [`example-include.html`](https://github.com/hchiam/_2DNote/blob/master/example-include.html) or [`example-two-notes.html`](https://github.com/hchiam/_2DNote/blob/master/example-two-notes.html) for examples.
 
 ### `_2DNote.update(e)` or `_2DNote.update(e, callback)`:
 

diff --git a/example-include.html b/example-include.html
@@ -42,7 +42,9 @@
   </style>
 </head>
 <!-- USE _2DNote! -->
-<body onclick="playOrStop(event)" onmousemove="instructToClickToStop();_2DNote.update(event,colourSoundIcon);">
+<body onclick="playOrStop(event)" 
+      onmousemove="instructToClickToStop();_2DNote.update(event,colourSoundIcon);" 
+      onmouseleave="exitedView();">
   <div id="main" role="main">
     <h1 id="audio-reminder" aria-hidden="true">Make sure audio is on</h1>
     <p id="instruction" aria-live="polite"></p>
@@ -74,6 +76,12 @@ <h1 id="audio-reminder" aria-hidden="true">Make sure audio is on</h1>
       toggleSoundIcon();
     }
 
+    function exitedView() {
+      on = false;
+      _2DNote.stop();
+      instructToClickToStart();
+    }
+
     function instructToMoveMouse() {
       document.getElementById('instruction').innerHTML = 'Move mouse to play with volume and pitch';
     }

diff --git a/example-two-notes.html b/example-two-notes.html
@@ -52,7 +52,9 @@
   </style>
 </head>
 <!-- USE _2DNote! -->
-<body onclick="playOrStop(event)" onmousemove="instructToClickToStop();_2DNote.update(event,colourSoundIcon);">
+<body onclick="playOrStop(event)" 
+      onmousemove="instructToClickToStop();_2DNote.update(event,colourSoundIcon);" 
+      onmouseleave="exitedView();">
   <button id="other-note">Other note</button>
   <div id="main" role="main">
     <h1 id="audio-reminder" aria-hidden="true">Make sure audio is on</h1>
@@ -98,6 +100,13 @@ <h1 id="audio-reminder" aria-hidden="true">Make sure audio is on</h1>
       toggleSoundIcon();
     }
 
+    function exitedView() {
+      on = false;
+      _2DNote.stop();
+      other_2DNote.stop();
+      instructToClickToStart();
+    }
+
     function instructToMoveMouse() {
       document.getElementById('instruction').innerHTML = 'Move mouse to play with volume and pitch';
     }