Using the Noteflight API

Using JavaScript with Hype
1

Hi All -
I need some help using the Noteflight API with Hype.

I’m starting with something very simple. I’d like to have a hype button play a Noteflight score that is embedded in an HTML object.

My guess is that there is some problem with how the API needs to access the Element ID.

Here are the Noteflight API docs:
https://www.noteflight.com/info/api/client_doc_v2#config

Here is a Noteflight provided example page:
https://www.noteflight.com/clientapi/2.0.0/example.html

I’ve attached my Hype doc.

Thank you!noteflightTest.hype.zip (25.6 KB)

2

Here is how the Noteflight API is trying to access the score in the iFrame:

 var frame = document.getElementById('score1');   // find the DOM element for our iframe
var score1 = new NFClient.ScoreView(frame);      // construct a ScoreView object
score1.addEventListener('editorReady', handleEditorReady);   // wait for ready event

s.playFromMeasure(1);

I know Hype only can access elements via: hypeDocument.getElementById

Is there some way around this?

3

You were nearly there. The API docs give you the answer though.

There is an option to have the score embed dynamically. see ‘Using the Client API for dynamic embedding’ section in the docs.

So what I have done here is give a Rectangle the id score1 then in the NFClient.init(function(info) function

Placed the NFClient.ScoreView function with some options and made the resulting score a global.

 NFClient.init(function(info) {
   // alert("Noteflight API is ready, version " + info.version);
   
   var options = {
    width: 572 ,
    height: 298,
    viewParams: {
      scale: 1.5,
     app: 'html5'
    }
  };
  window.scoreView = new NFClient.ScoreView('score1', 'c79be75c793c3b185365c241a04045e7df05d238', options)
  });

We can then call the API’s on it to play, stop and so on.

noteflightTest_MHv1.hype.zip (19.0 KB)

1 Like
4

Thank you @MarkHunte !!!

I’ll be sure to share with you all the project I’m working on when it is complete.

1 Like
5

Hi -
Here is a quick follow up question: I’m unable to reposition the resulting Noteflight score. Regardless of where I position the the Rectangle with the ID ‘score1’ the score is always positioned in the upper left corner.
How would I reposition it?

Thank you
Matt

6

Update: As soon as I entered:

hypeDocument.getElementProperty(score1, 'left');
hypeDocument.setElementProperty(score1, 'left', 200);

It worked.
Is this the correct way to do it?

1 Like
7

Huh,

That did not make sense to me until I tried to mover the Rectangle over to the Right and half of scene.
It does not move and the Score stays in the scene as though no change has happened.
The score1 div is being controlled by css from the noteflight API. So your work around works as you tell it to go left after it has displayed.

If I get a chance I will look at this further to see if there is any other way to control it

1 Like
8

So another way to control the position is the select the Score1 Rectangle and place it in a Group.
The Rectangle will reference it’s origins in relation to the Group so you can the visually place the Group in Hype which in turn will place the Score1 rectangle

1 Like
9

Hi Mark -
Might you know why I can’t interact with the Noteflight score in your example? According to the API the user should be able to manipulate the score…especially if the parameter ‘role’ is set to 'template" which I have done.

I wonder if this maybe something related to Hype?

In the Noteflight provided example here the score is able to be manipulated.

Thank you so very much for all of your help!

Matt

10

I will have a look.
I swear when I first did this it was interactive??

11

Ok got it.

For some reason the noteflight disables the pointer events for the score1 element.

To fix this run this as the last on scene load action. ( must run after the score has been created and not in the same function as the init one, so create another one and add that to the actions )

hypeDocument.getElementById('score1').style.pointerEvents ="auto"

1 Like
12

That did it! Thank you so much!

1 Like