Difference between revisions of "External controls api"

From MMS Wiki
Jump to: navigation, search
(Displaying an embed)
(Displaying an embed)
Line 1: Line 1:
== Displaying an embed ==
== Displaying an embed ==
For web auto-resize to work, the page should have the following HTML tags:
For web auto-resize to work, the page should load JQuery and the following HTML tags:
  <\!-- JQuery, such as: -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="<SERVER URL>/scripts/embedder.js"></script>     
   <script src="<SERVER URL>/scripts/embedder.js"></script>     
   <iframe src="<YOUR LTI LAUNCH>" onload="mms_resizer(this,null)"></iframe>
   <iframe src="<YOUR LTI LAUNCH>" onload="mms_resizer(this,null)"></iframe>

Revision as of 15:00, 7 June 2018

Displaying an embed

For web auto-resize to work, the page should load JQuery and the following HTML tags:

 <script src="<SERVER URL>/scripts/embedder.js"></script>     
 <iframe src="<YOUR LTI LAUNCH>" onload="mms_resizer(this,null)"></iframe>

If the iframe is inside a scrollable container, a css selector for it needs to be passed as a third argument to mms_resizer as a string (ex: '#container' or '.ifc') If the embed needs to fit within a fixed size and auto-resize is not needed, embedder.js and mms_resizer are not needed.

For iOS and Android, just open the LTI launch inside a WebView.

API Usage:

On iOS and Android webViews, there is direct access to window object. As such, everything works via "window.mms_embed_controls" object as outlined in the next two sections.

For cross-origin uses in HTML5 with iframes, the message passing api (postMessage) needs to be used instead.

Commands can be called as:

 iframe.contentWindow.postMessage({ id: 'matchmysound-embed-controls-command',
                      fname: '<command name>', args: [<arguments>], uid: <uid string> },'*');

with the events being fired directly on the window object so they can be read via

 window.addEventListener('message', function(evt) {
    if (evt.data.id != 'matchmysound-embed-controls-message') return;
    if (evt.data.ename == '<event name>') { /* do stuff. Callback argument is evt.data.evalue */ } 

If command returns a value, it is fired as a message similar to the events with the structure:

   id: 'matchmysound-embed-controls-result',
   fname: <name of function called>,  args: <arguments called with>, uid: <uid echoed back>,
   result: <result that was returned>

If the command does not exist, a message with id: 'matchmysound-embed-controls-result-error' is fired


NB! All setters also function as getters when called without parameters, i.e. calling setXXX functions return current setting when called with ()

 window.mms_embed_controls = {
       toBeginning, // Scroll cursor to beginning. Optionally takes an argument ‘section’/’part’. 
                    // By default chooses which based on current cursor pos
       hasRecording: // returns true when ‘matched’ is an option
       setPlayTrack: // either ‘etalon’, ‘matched’, 'backing' or 'metronome'
       startStopPlay: // Start/stop playback
       tunerModal: // open/close a modal with the tuner. 
                   // Takes an optional parameter (bool) and toggles if it is not given
       infoModal: // Display exercise information
       partModal: // Display part choice modal
       getPartInfo: // Returns info object { name: <string>, instrument: <string>, can_record: <bool>,
                    // default_bpm: <int>, beats_per_bar: <int>, has_backing: <bool>, has_full: <bool>,
                    // multiple: <bool>, non_pitched: <bool> }
       listParts: // Returns a list of part names
       setPart: // Sets the current part. Takes the name of the part as argument. NB! Needs time to load again
       setViewType: // Choices are 'page'/'scroll'/'wf'
       tempoModal: // Display tempo change modal
       setTempo: // Sets tempo. Values allowed are from 0.3 (30%) to 3 (300%)
       sectionMarked: // Return whether a section is selected
       markSection: // Start marking a section from cursor position
       resetSection: // Reset currently selected section
       setSection: // Takes two arguments: beg and end of section in seconds, or a dict with { beg: , end: }
                   // Returns {name: <string>, beg: 


You can also register a listener callback to certain events via an "on" function. Currently three events are available: mms_embed_controls.on(‘<evt name>’, callbackFunction); Callback function can sometimes have a parameter passed to it.

  • ‘external_controls_ready' - commands are ready to be called and events will fire, although loading is still going on.
  • ‘partially_loaded' - exercise information is loaded up. Waiting only for visuals, audio and etalon. Safe to start calling commands (except play/record)
  • ‘fully_loaded' - all required assets loaded. Fired both initially and whenever part changes
  • 'initial_loading_progress' - callback is passed an integer value in the range [0-100] indicating the progress of loading initial metadata
  • 'loading_progress' - callback is passed an integer value in the range [0-100] indicating the progress of full loading (audio, all systems, recording etalon)
  • 'track_loaded' - callback is passed the name of the track loaded ('etalon'/'backing'/'metronome'/'full')
  • 'etalon_loaded' - the ready event for recording button
  • ‘view_type_changed' - fired whenever view_type is either first set or changed
  • 'changed_part' - user has chosen a different part in a multi-part exercise
  • 'feedback_available' - feedback is avaliable, i.e. an attempt was just finished. Fired whenever recording stops.
  • ‘play_start' - audio playback started, either by pressing <space> or from ui
  • ‘play_end' - audio playback stopped, either automatically or from ui
  • ‘changed_active_track' - switched between ‘etalon’ and ‘matched’. Query setPlayTrack() to see current
  • ‘modals_showing' - a new modal open. Parameter true if it is a loading modal.
  • ‘modals_cleared' - all modals closed
  • ‘mic_volume' - microphone volume for VU meter. Parameter is the value in range [0,1]
  • ‘alert' - alert information in parameter in json form, { 'type':<info/success/warning/error>, 'msg':<message>, 'msg_id':<id of message for translation> }