Web Content Display

How to embed a score box on a web page

scorio provides a share functionality which allows to embed a score box into a web page. This article describes how to create and use a score box.

 

What is a score box?

The score box displays a score written and published on scorio. Users can turn pages and play back the score. A score box could for example be used in an article about a music topic or to show a new composition to visitors. The score box can be used in any place where JavaScript is allowed.

Here is an example of a live score box with one page:

 

The functionality is pretty straight-forward:

  • In the center, a page of music is displayed.
  • The displayed page is linked to the corresponding piece on scorio.com.
  • On top left and right, there are buttons for page navigation.
  • Below the page display, a player control allows to play back the piece. The appearance of the player depends on the browser plugin in charge of playing MIDI files.

 

Set up a score box on your web page in 10 steps

Setting up a score box on your web page requires basically to copy the embed code from the Share dialog to an HTML page. Here is the step by step instruction:

  • Login on scorio.com
  • Open the score you want to share in scorio editor. Make sure to save it, if you have made changes after opening it.
  • Open the share dialog: Menu > File > Share.
  • Wait until the dialog displays a preview of the score. This step is taking some time, because the images for the share box are being created in the background.
  • Optional: Choose the clipping of the score using the position buttons on the top right of the dialog. You can also adjust the clipping manually later (see "Adjusting the clipping manually" below).
  • Copy the embed code from the dialog. If you forget this step, you can reopen the dialog later to copy the code. Except for the clipping layout, the embed code for each score never changes.
  • Click "Activate" to activate the score box. In this step the images are saved for usage from outside scorio.com.
  • Open your web page in a text editor. It is important to use a text editor which displays the HTML source code (such as <head>, <body>) in this step instead of an HTML editor that replaces characters automatically.
  • Insert the embed code copied from the dialog at the position where the score should be displayed.
  • Save the file and test your page in a web browser.

 

Optional: Adjusting the clipping manually

For a one-page score, it can be suitable to display only a certain area of the score, for example a certain musical phrase. This can be achieved by clipping the displayed area using the Share dialog or manually changing the code.

Here is the source code of the score box example above:

 

<script type="text/javascript"

charset="utf-8"

src="http://www.scorio.com/sharing/embed.js">

</script>

<script type="text/javascript">

shareConfiguration.set(

"/scorio/scores/scorgle/example+-+will+not+win/fb617decea7581bba34496d269ba7381",

"http://www.scorio.com",

"scorio-storage-prod",

1,

7, 7, 350, 200);

</script>

<noscript>

<a href="http://www.scorio.com/scorio/scores/scorgle/

example+-+will+not+win/fb617decea7581bba34496d269ba7381">

www.scorio.com

</a>

</noscript>

 

To change the clipping manually, open the file containing your embed code and find the last four arguments of the set function. They are displayed in orange in the sample code. These numbers define the top, left, width and height of the page images, respectively.

To increase the height of the sample score box, one could for instance replace 200 by 400. You can change the position arguments almost as you like: Images for the score box are saved with their complete size and cropping is only done by CSS. Width and height must be greater than 0, top and left can be any integer.

 

Optional: Styling the score box

If you know your way round CSS, you can use the classes defined in the score box to adjust the appearance of the score box to the style of your web page. For example, to get blue page navigation buttons, one would add a rule

.<class of some top level element on your page> .sc-button { background: #70A8ED; color: #FFFFFF; }

which overwrites the given rule.

Feel free to adapt the styling as you need it. However, the HTML structure of the score box must remain unchanged to ensure correct functionality.

 

Several scores on one page

It is possible to embed several scores on the same web page. In this case, you can remove the script tag loading embed.js from scorio for all score boxes except the first one:

<script type="text/javascript" charset="utf-8" src="http://scorio-stage/sharing/embed.js"> </script>

This will reduce the traffic generated by your site.

 

What are the limitations to embedding a score box?

  • The score box needs JavaScript to run. For this reason it cannot be used in forums that prevent users from posting JavaScript. You can instead use the link from the bottom of the share dialog, if linking is permitted.
  • The player needs a plugin which is able to play MIDI. In most cases, Quicktime or Windows Media Player will handle playback. If no suitable plugin is available, the browser will prompt the user to install one.
  • In Safari on iOS (for example on iPad), no MIDI capable browser plugin is available. That's why we have hidden the player for iOS.