Sheet music Embed URL parameters

When embedding sheet music in your website or blog, you can easily customize and control to appearance, the display and the features available for your visitors and users.

The easiest way is by adding different URL parameters of our iframe, you can find the different options available for you below.

Please note that all the options referenced here are not included in our free embed, some of them may require the usage of an API key or a paying plan (e.g. for custom branding). If you are not using the embed right now or need additional options not listed below, feel free to contact us, we will work with you to make it works for you!

Query Parameter Summary Values
appId Your application identifier (aka API key) Get yours
sharingKey The score sharing key when the privacy mode is privateLink  

Layout and Music notation Engraving parameters

These URL query strings control the engraving display of your music scores. You can get more details by clicking on the parameter name.

Query Parameter Summary Values
layout Display the score in responsive, page or track mode responsive, page or track (default = responsive)
zoom Default zoom value auto or 0.1 to 3 (default = auto)

Controls & Theme customization

If you want to customize the controls, including changing their main colors or hide some of them, you can add the following options in your URL.

The following features require an Embed API Key to be used.

Query Parameter Summary Values
theme* Change the embed theme Read more
branding Display or hide Flat logo true or false (default = true)
controlsDisplay Display or hide main controls true or false (default = true)
controlsPosition Controls position bottom or top (default = bottom)
controlsMetronome Display or hide the metronome true or false (default = true)
controlsPlay Display or hide the play/stop button true or false (default = true)
controlsFullscreen Display or hide the fullscreen button true or false (default = true)
controlsPanel Display or hide the extra controls button true or false (default = true)
controlsVolume Display or hide the volume controls true or false (default = true)
controlsZoom Display or hide the zoom control true or false (default = true)
controlsPrint Display or hide the print button true or false (default = true)

Audio & Video sources

On any score on hosted on Flat, you can link one or multiple audio/video sources. These ones can be hosted on YouTube, SoundCloud or Vimeo. You can easily synchronize them using our user interface or REST API.

Query Parameter Summary Values
audioSource Audio source to use when loading the embed playback, default (the track marked as default, or playback if none), or the unique identifier of the track to use (default value = playback)
videoPosition Display position of the video in the embed top, bottom, left, float, hidden (default = hidden)

Playback options

The following features require an Embed API Key to be used.

Query Parameter Summary Values
playbackMetronome Metronome mode count-in, inactive, active (default = inactive)
playbackVolumeMaster Master volume 0 to 1 (default = 1)

Parameters details and demos

Change the music engraving layout mode (layout)

We support three different engraving modes:

  • responsive

Layout Responsive mode

  • page

Layout Page mode

  • track (default)

Layout page mode

Change zoom scaling (zoom)

You can use different zoom values:

  • auto (default): If you use a page layout mode, the page will always fit the width of the embed, and be resize if you resize the embed. In track layout mode, this is equivalent to 1.
  • 0.1 to 3: A scaling value, where 1 is the regular size and 3 multiples the size by 3.

Example with zoom=3 (i.e. Zoom x3):

Embed zoom

Remove Flat branding (branding)

To remove the Flat logo from the controls, set the parameter branding to false.

No Flat branding

Display or hide the controls (controlsDisplay)

If you implements your own controls or don’t need them, you can disable the ones in the embed by setting the parameter controlsDisplay to false.

Embed controls

Change controls position (controlsPosition)

By default the controls are displayed at the bottom of the embed. You can choose the display them at the top by setting the parameter controlsPosition to top.

Embed controls at the top

Display or hide Metronome control (controlsMetronome)

This control is displayed by default, you can hide it by setting this parameter to false.

Metronome control

Display or hide Playback control (controlsPlay)

This control is displayed by default, you can hide it by setting this parameter to false.

Playback control

Display or hide Fullscreen control (controlsFullscreen)

This control is displayed by default, you can hide it by setting this parameter to false.

Fullscreen control

Display or hide the extra controls button (controlsPanel)

This control is displayed by default, you can hide it by setting this parameter to false.

Side Panel control

Display or hide Volume controls (controlsVolume)

The volume controls are displayed by default when the playback is used, you can disable it by setting this parameter to false.

Volume control

Display or hide Zoom controls (controlsZoom)

This side panel is enabled by default, you can disable it by setting this parameter to false.

Zoom control

Display or hide Print control (controlsPrint)

This control is displayed by default, you can hide it by setting this parameter to false.

Print control

Embed theme

You can completely change the embed theme by changing the different color options available:

Parameter Element Values
themeIconsPrimary Icons primary color (e.g. play button) color (hex, rgba() or hsla()
themeControlsBackground Controls bar background color (hex, rgba() or hsla()
themeControlsIcons Controls icons color (e.g. metronome) color (hex, rgba() or hsla()
themeSlider Playback slider color color (hex)
themeCursorV0 Cursor 1st Voice color color (hex)
themeCursorV1 Cursor 2nd Voice color color (hex)
themeSelection Selection color color (hex)

Please note that these parameters need to be encoded if needed (e.g. themeControlsBackground=%23B71C1C).

Demo: Let’s say that we want to hide the Flat branding, display the controls different reds (controls background and main voice cursor). We can use the following options as query strings:

  • branding=false
  • themeControlsBackground=#B71C1C
  • themeIconsPrimary=#E53935
  • themeCursorV0=#E53935

Embed themes demo

Video position (videoPosition)

When using an audio or video source, you can customize the position of the player: top, bottom, left, float, hidden.

top

Video on the top of the score

left

Video on the left of the score

float

Video floating of the score