Merge pull request #174 from yvesgurcan/example-play-next-song

Example plays next song + Add setLogger method
yvesgurcan · Feb 22, 2020 · 45388b7 · 45388b7
2 parents 7a7cec8 + 52056c7
commit 45388b7
Show file tree

Hide file tree

Showing 11 changed files with 421 additions and 129 deletions.
diff --git a/doc/index.html b/doc/index.html
@@ -4,7 +4,7 @@
     <head>
         <meta charset="utf-8" />
         <title>
-            web-midi-player 1.3.6 |
+            web-midi-player 1.3.7 |
             Documentation
         </title>
 
@@ -24,7 +24,7 @@ <h3 class="mb0 no-anchor project-name">
                                 <code>web-midi-player</code>
                             </h3>
                             <div class="mb1">
-                                <code>1.3.6</code>
+                                <code>1.3.7</code>
                                 |
                                 <a href="https://midi.yvesgurcan.com">README</a>
                             </div>
@@ -60,6 +60,10 @@ <h3 class="mb0 no-anchor project-name">
                                         <code>#stop</code>
                                     </a>
 
+                                    <a href="#midiplayersetlogger" class="button-indent regular block">
+                                        <code>#setLogger</code>
+                                    </a>
+
                                     <a href="#midiplayeremitevent" class="button-indent regular block">
                                         <code>#emitEvent</code>
                                     </a>
@@ -247,6 +251,10 @@ <h3 class="mb0 no-anchor project-name">
                                     <a href="#eventhandleremitevent" class="button-indent regular block">
                                         <code>#emitEvent</code>
                                     </a>
+
+                                    <a href="#eventhandlersetlogger" class="button-indent regular block">
+                                        <code>#setLogger</code>
+                                    </a>
 
                                 </div>
 
@@ -382,7 +390,7 @@ <h3 class='regular'>
         <tr>
             <td class='col-2 strong'>sampleRate</td>
             <td class='col-2 quiet'>
-                <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a>
+                <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>
 
             </td>
             <td class='col-8'>: The sample rate of the AudioContext.
@@ -536,10 +544,10 @@ <h4 class='caps quiet mb1 mt3'>Examples</h4>
     <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">import</span> MidiPlayer <span class="hljs-keyword">from</span> <span class="hljs-string">'web-midi-player'</span>;
 
 <span class="hljs-keyword">const</span> eventLogger = <span class="hljs-function">(<span class="hljs-params">payload</span>) =&gt;</span> {
-  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Received event:'</span>, payload.event)
+  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Received event:'</span>, payload.event);
 }
 
-<span class="hljs-keyword">const</span> midiPlayer = <span class="hljs-keyword">new</span> MidiPlayer({ eventLogger, <span class="hljs-attr">logging</span>: <span class="hljs-literal">true</span> });</code></pre>
+<span class="hljs-keyword">const</span> midiPlayer = <span class="hljs-keyword">new</span> MidiPlayer({ eventLogger });</code></pre>
 
 
 
@@ -944,6 +952,109 @@ <h4 class='caps quiet mb1 mt3'>Examples</h4>
 
 
 
+</section>
+
+    <section id='midiplayersetlogger' class='mt2 mb2 px3 py1 keyline-top'>
+
+    <div class='right py2'>
+
+
+    </div>
+
+    <h3 class='regular'>
+        <a class='black' href='#midiplayersetlogger'>
+            <code>
+				setLogger<span class='gray'>(configuration?)</span>
+			</code>
+        </a>
+    </h3>
+
+    <p>Updates the configuration of the logger.</p>
+
+
+
+
+
+
+
+
+
+
+
+    <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'>
+        <thead class='fill-light'>
+            <th class='col-3 small caps quiet'>parameter</th>
+            <th class='col-3 small caps quiet'>type</th>
+            <th class='col-6 small caps quiet'>description</th>
+        </thead>
+
+        <tr>
+            <td class='col-3 strong'><code>configuration</code></td>
+            <td class='col-3 quiet'>
+                <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>?
+
+            </td>
+            <td class='col-6'></td>
+        </tr>
+
+
+        <tr>
+  <td class='col-2 strong'>configuration.eventLogger</td>
+  <td class="col-2 quiet">
+    <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a>
+
+      (default <code>undefined</code>)
+
+  </td>
+  <td class='col-8'>The function that receives event payloads.
+</td>
+</tr>
+
+
+
+        <tr>
+  <td class='col-2 strong'>configuration.logging</td>
+  <td class="col-2 quiet">
+    <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>
+
+      (default <code>false</code>)
+
+  </td>
+  <td class='col-8'>Turns ON or OFF logging to the console.
+</td>
+</tr>
+
+
+
+
+
+    </table>
+
+
+
+
+
+
+
+
+
+    <h4 class='caps quiet mb1 mt3'>Examples</h4>
+
+
+    <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> eventLogger = <span class="hljs-function">(<span class="hljs-params">payload</span>) =&gt;</span> {
+  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Received event:'</span>, payload.event);
+}
+midiPlayer.setLogger({ eventLogger });</code></pre>
+
+
+
+
+
+
+
+
+
+
 </section>
 
     <section id='midiplayeremitevent' class='mt2 mb2 px3 py1 keyline-top'>
@@ -4285,6 +4396,100 @@ <h3 class='regular'>
 
 
 
+</section>
+
+    <section id='eventhandlersetlogger' class='mt2 mb2 px3 py1 keyline-top'>
+
+    <div class='right py2'>
+
+
+    </div>
+
+    <h3 class='regular'>
+        <a class='black' href='#eventhandlersetlogger'>
+            <code>
+				setLogger<span class='gray'>(configuration?)</span>
+			</code>
+        </a>
+    </h3>
+
+    <p>Updates the configuration of the logger.</p>
+
+
+
+
+
+
+
+
+
+
+
+    <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'>
+        <thead class='fill-light'>
+            <th class='col-3 small caps quiet'>parameter</th>
+            <th class='col-3 small caps quiet'>type</th>
+            <th class='col-6 small caps quiet'>description</th>
+        </thead>
+
+        <tr>
+            <td class='col-3 strong'><code>configuration</code></td>
+            <td class='col-3 quiet'>
+                <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>?
+
+            </td>
+            <td class='col-6'></td>
+        </tr>
+
+
+        <tr>
+  <td class='col-2 strong'>configuration.eventLogger</td>
+  <td class="col-2 quiet">
+    <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a>
+
+      (default <code>undefined</code>)
+
+  </td>
+  <td class='col-8'>The function that receives event payloads.
+</td>
+</tr>
+
+
+
+        <tr>
+  <td class='col-2 strong'>configuration.logging</td>
+  <td class="col-2 quiet">
+    <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>
+
+      (default <code>false</code>)
+
+  </td>
+  <td class='col-8'>Turns ON or OFF logging to the console.
+</td>
+</tr>
+
+
+
+
+
+    </table>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 </section>
 
 </div>

diff --git a/example/react/index.html b/example/react/index.html
@@ -5,5 +5,5 @@
     </head>
     <body>
         <div id="app"></div>
-    <script type="text/javascript" src="main.5e388a13b646a24a7007.js"></script></body>
+    <script type="text/javascript" src="main.8091036fae4a8b8f2152.js"></script></body>
 </html>
diff --git a/example/react/main.5e388a13b646a24a7007.js b/example/react/main.5e388a13b646a24a7007.js
diff --git a/example/react/main.8091036fae4a8b8f2152.js b/example/react/main.8091036fae4a8b8f2152.js
diff --git a/example/react/src/components/LoggerDropdown.js b/example/react/src/components/LoggerDropdown.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const CUSTOM = 'custom';
+const CONSOLE = 'console';
+
+export default ({ logger, setLogger }) => (
+    <Container>
+        <label>
+            Event logger:{' '}
+            <select
+                value={logger}
+                onChange={event => setLogger(event.target.value)}
+            >
+                <option value={CUSTOM}>Custom function</option>
+                <option value={CONSOLE}>Console</option>
+            </select>
+        </label>
+    </Container>
+);
+
+const Container = styled.div`
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+`;