Skip to content

Commit

Permalink
Merge pull request #175 from yvesgurcan/example-play-next-song
Browse files Browse the repository at this point in the history
Example play next song
  • Loading branch information
yvesgurcan authored Feb 22, 2020
2 parents 45388b7 + 95daa01 commit a504734
Show file tree
Hide file tree
Showing 9 changed files with 71 additions and 64 deletions.
82 changes: 41 additions & 41 deletions doc/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<head>
<meta charset="utf-8" />
<title>
web-midi-player 1.3.7 |
web-midi-player 1.3.8 |
Documentation
</title>

Expand All @@ -24,7 +24,7 @@ <h3 class="mb0 no-anchor project-name">
<code>web-midi-player</code>
</h3>
<div class="mb1">
<code>1.3.7</code>
<code>1.3.8</code>
|
<a href="https://midi.yvesgurcan.com">README</a>
</div>
Expand Down Expand Up @@ -60,13 +60,13 @@ <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>

<a href="#midiplayersetlogger" class="button-indent regular block">
<code>#setLogger</code>
</a>

</div>

Expand Down Expand Up @@ -954,22 +954,22 @@ <h4 class='caps quiet mb1 mt3'>Examples</h4>

</section>

<section id='midiplayersetlogger' class='mt2 mb2 px3 py1 keyline-top'>
<section id='midiplayeremitevent' class='mt2 mb2 px3 py1 keyline-top'>

<div class='right py2'>


</div>

<h3 class='regular'>
<a class='black' href='#midiplayersetlogger'>
<a class='black' href='#midiplayeremitevent'>
<code>
setLogger<span class='gray'>(configuration?)</span>
emitEvent<span class='gray'>(payload)</span>
</code>
</a>
</h3>

<p>Updates the configuration of the logger.</p>
<p>Send custom payloads to the event logger.</p>



Expand All @@ -989,38 +989,34 @@ <h3 class='regular'>
</thead>

<tr>
<td class='col-3 strong'><code>configuration</code></td>
<td class='col-3 strong'><code>payload</code></td>
<td class='col-3 quiet'>
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>?
<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 strong'>payload.event</td>
<td class="col-2 quiet">
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a>

(default <code>undefined</code>)
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?

</td>
<td class='col-8'>The function that receives event payloads.
<td class='col-8'>The name of the event.
</td>
</tr>



<tr>
<td class='col-2 strong'>configuration.logging</td>
<td class='col-2 strong'>payload.message</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>)
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?

</td>
<td class='col-8'>Turns ON or OFF logging to the console.
<td class='col-8'>A message that described the event.
</td>
</tr>

Expand All @@ -1041,10 +1037,9 @@ <h3 class='regular'>
<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>
<pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> event = <span class="hljs-string">'MIDI_CUSTOM_EVENT'</span>;
<span class="hljs-keyword">const</span> message = <span class="hljs-string">'Something happened.'</span>;
midiPlayer.emitEvent({ event, message });</code></pre>



Expand All @@ -1057,22 +1052,22 @@ <h4 class='caps quiet mb1 mt3'>Examples</h4>

</section>

<section id='midiplayeremitevent' class='mt2 mb2 px3 py1 keyline-top'>
<section id='midiplayersetlogger' class='mt2 mb2 px3 py1 keyline-top'>

<div class='right py2'>


</div>

<h3 class='regular'>
<a class='black' href='#midiplayeremitevent'>
<a class='black' href='#midiplayersetlogger'>
<code>
emitEvent<span class='gray'>(payload)</span>
setLogger<span class='gray'>(configuration?)</span>
</code>
</a>
</h3>

<p>Send custom payloads to the event logger.</p>
<p>Updates the configuration of the logger.</p>



Expand All @@ -1092,34 +1087,38 @@ <h3 class='regular'>
</thead>

<tr>
<td class='col-3 strong'><code>payload</code></td>
<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>
<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'>payload.event</td>
<td class='col-2 strong'>configuration.eventLogger</td>
<td class="col-2 quiet">
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a>

(default <code>undefined</code>)

</td>
<td class='col-8'>The name of the event.
<td class='col-8'>The function that receives event payloads.
</td>
</tr>



<tr>
<td class='col-2 strong'>payload.message</td>
<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/String">string</a>?
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>

(default <code>false</code>)

</td>
<td class='col-8'>A message that described the event.
<td class='col-8'>Turns ON or OFF logging to the console.
</td>
</tr>

Expand All @@ -1140,9 +1139,10 @@ <h3 class='regular'>
<h4 class='caps quiet mb1 mt3'>Examples</h4>


<pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> event = <span class="hljs-string">'MIDI_CUSTOM_EVENT'</span>;
<span class="hljs-keyword">const</span> message = <span class="hljs-string">'Something happened.'</span>;
midiPlayer.emitEvent({ event, message });</code></pre>
<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>



Expand Down
2 changes: 1 addition & 1 deletion example/react/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="main.8091036fae4a8b8f2152.js"></script></body>
<script type="text/javascript" src="main.ea8b4d4d69b6be94646b.js"></script></body>
</html>

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions example/react/src/components/LoggerDropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import styled from 'styled-components';

const CUSTOM = 'custom';
const CONSOLE = 'console';
const NONE = 'none';

export default ({ logger, setLogger }) => (
<Container>
Expand All @@ -14,6 +15,7 @@ export default ({ logger, setLogger }) => (
>
<option value={CUSTOM}>Custom function</option>
<option value={CONSOLE}>Console</option>
<option value={NONE}>None</option>
</select>
</label>
</Container>
Expand Down
5 changes: 5 additions & 0 deletions example/react/src/components/Player.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ const SONGS = [

const CUSTOM = 'custom';
const CONSOLE = 'console';
const NONE = 'none';

const getPlayPauseButton = (songState, songIndex, songList, player) => {
switch (songState) {
Expand Down Expand Up @@ -198,6 +199,10 @@ const Player = () => {
if (logger === CONSOLE) {
midiPlayer.setLogger({ eventLogger: null, logging: true });
}

if (logger === NONE) {
midiPlayer.setLogger({});
}
}
}, [songList, currentSongIndex, logger]);

Expand Down
2 changes: 1 addition & 1 deletion index.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "web-midi-player",
"version": "1.3.7",
"version": "1.3.8",
"description": "🎹 Event-driven JavaScript library to enable MIDI playback in the browser.",
"keywords": [
"midi",
Expand Down
34 changes: 17 additions & 17 deletions src/MidiPlayer.js
Original file line number Diff line number Diff line change
Expand Up @@ -461,23 +461,6 @@ export default class MidiPlayer {
}
}

/**
* Updates the configuration of the logger.
* @param {object} [configuration]
* @param {function} [configuration.eventLogger = undefined] The function that receives event payloads.
* @param {boolean} [configuration.logging = false] Turns ON or OFF logging to the console.
* @example
* const eventLogger = (payload) => {
* console.log('Received event:', payload.event);
* }
* midiPlayer.setLogger({ eventLogger });
*/
setLogger({ eventLogger = undefined, logging = false }) {
this.eventLogger = eventLogger;
this.logging = logging;
this.eventHandler.setLogger({ eventLogger, logging });
}

freeMemory() {
LibTiMidity._free(this.waveBuffer);
LibTiMidity._free(this.midiFileBuffer);
Expand All @@ -502,4 +485,21 @@ export default class MidiPlayer {
* midiPlayer.emitEvent({ event, message });
*/
emitEvent = payload => this.eventHandler.emitEvent(payload);

/**
* Updates the configuration of the logger.
* @param {object} [configuration]
* @param {function} [configuration.eventLogger = undefined] The function that receives event payloads.
* @param {boolean} [configuration.logging = false] Turns ON or OFF logging to the console.
* @example
* const eventLogger = (payload) => {
* console.log('Received event:', payload.event);
* }
* midiPlayer.setLogger({ eventLogger });
*/
setLogger({ eventLogger = undefined, logging = false }) {
this.eventLogger = eventLogger;
this.logging = logging;
this.eventHandler.setLogger({ eventLogger, logging });
}
}

0 comments on commit a504734

Please sign in to comment.