dialogflow-chat-widget

A web chat widget web component that interacts with a dialogflow interactions api to detect intents

Usage no npm install needed!

<script type="module">
  import dialogflowChatWidget from 'https://cdn.skypack.dev/dialogflow-chat-widget';
</script>

README

html-dialogflow-chat-widget

npm package Published on webcomponents.org jsDelivr

<dialogflow-chat-widget> and <midi-visualizer> HTML elements powered by @magenta/music (Magenta.js), fully stylable and scriptable.

If you use html-dialogflow-chat-widget on your website, please consider linking back to the repository.

Getting started

  1. 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>
    
  2. 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 before html-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.

src and noteSequence

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 the noteSequence 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.