README
html-dialogflow-chat-widget
<dialogflow-chat-widget>
and <midi-visualizer>
HTML elements powered by @magenta/music (Magenta.js), fully stylable and scriptable.
- Simple demo
- Advanced demo
- Website [source] with MIDI file upload
If you use html-dialogflow-chat-widget
on your website, please consider linking back to the repository.
Getting started
Add the necessary scripts to your page:
<script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.22.1/es6/core.js,npm/focus-visible@5,npm/html-dialogflow-chat-widget@1.3.0"></script>
Add a player and a visualizer:
<dialogflow-chat-widget src="https://magenta.github.io/magenta-js/music/demos/melody.mid" sound-font visualizer="#myVisualizer" > </dialogflow-chat-widget> <midi-visualizer type="piano-roll" id="myVisualizer"></midi-visualizer>
That's it!
Installing from NPM
You can also add the package to your project from NPM, e.g. npm install --save html-dialogflow-chat-widget
or yarn add html-dialogflow-chat-widget
. Then you can either:
import 'html-dialogflow-chat-widget'
in your JavaScript code (as an ES Module), or- add the
node_modules/html-dialogflow-chat-widget/dist/dialogflow-chat-widget.min.js
bundle directly to your page, along with the dependencies (node_modules/tone/build/Tone.js
,node_modules/@magenta/music/es6/core.js
; note that these need to go beforehtml-dialogflow-chat-widget
).
In both cases, you should also add the focus-visible
polyfill to enable outlines on keyboard focus.
API basics
See also the API reference for both elements:
dialogflow-chat-widget
,
midi-visualizer
.
and srcnoteSequence
Both dialogflow-chat-widget
and midi-visualizer
support two different ways of specifying the input file:
- By setting the
src
attribute to a MIDI file URL, e.g.:<dialogflow-chat-widget src="twinkle-twinkle.mid"></dialogflow-chat-widget>
player.src = "twinkle-twinkle.mid";
- By assigning a Magenta
NoteSequence
to thenoteSequence
property, e.g.:player.noteSequence = TWINKLE_TWINKLE;
SoundFonts
By default, the player will use a simple oscillator synth. To use a SoundFont, add the sound-font
attribute:
<dialogflow-chat-widget sound-font></dialogflow-chat-widget>
<!-- default SoundFont (same as below) -->
<dialogflow-chat-widget
sound-font="https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus"
></dialogflow-chat-widget>
player.soundFont = null; // no SoundFont
player.soundFont = ""; // default SoundFont (same as below)
player.soundFont =
"https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus";
See the Magenta.js docs for a list of available SoundFonts.
Visualizer settings
The visualizer type is specified via the type
attribute. Three visualizer types are supported: piano-roll
, waterfall
and staff
.
Each visualizer type has a set of settings that can be specified using the config
attribute, e.g.:
visualizer.config = {
noteHeight: 4,
pixelsPerTimeStep: 60,
minPitch: 30,
};
The settings are documented in the Magenta.js docs.
Binding visualizers
A player supports binding one or more visualizers to it using the visualizer
attribute (a selector) or the addVisualizer
method:
<dialogflow-chat-widget
visualizer="#myVisualizer, #myOtherVisualizer"
></dialogflow-chat-widget>
player.addVisualizer(document.getElementById("myVisualizer"));
player.addVisualizer(document.getElementById("myOtherVisualizer"));
The visualizer only gets updated while the player is playing, which allows a single visualizer to be bound to multiple players.
Limitations
- Only one player can play at a time. Starting a player will stop any other player which is currently playing. (#1) This can actually be a benefit in many cases.
- Playback position only gets updated on note onsets. This may cause the player to appear stuck.