The viewer itself is a web application that is capable of displaying
Sibelius scores in any modern web browser. It provides functionality for
viewing, navigating, transposing, playing back and printing your scores.

For more information on the viewer and it’s features, see here.

Fullscreen support

The viewer includes a full screen button, allowing your user to view your score
in full screen. In order to enable it, you must specify the allowfullscreen
parameter in your <iframe> as follows:

<!-- Embed the iframe, setting the allowfullscreen attribute -->
<iframe src="https://publishing.sibelius.com/viewer/xxxxxxxxx" allowfullscreen></iframe>

Browser support

• Not all browsers yet support the Fullscreen API
• If the viewer detects that a browser cannot support the fullscreen API, then
  the fullscreen button will not be displayed.

For more information, consult this
Mozilla Developer Network article

Providing a good experience for mobile users

For mobile users, it’s best not to display the SCP viewer in an <iframe>,
since it will generally appear frustratingly small for your users. Instead,
we recommend displaying the score as a full screen element.

The SCP viewer itself is fully responsive and will display itself
appropriately given a wide range of display sizes.

Recommended embedding practices

It’s often the case that browsers will draw a border around an <iframe> by
default. It’s possible to remove or adjust this border using CSS. This is
highly recommended to give your users the impression that the viewer is part of
the same experience that you’re offering on your site.

Give the viewer plenty of space in your site to make it look as beautiful as
possible. The viewer is fully responsive, and should adapt well to a multitude
of viewport sizes (if it doesn’t, please let us know!).

We recommend specifying an <iframe height of 100vh, which will
display the viewer at the maximum height of the browser viewport. You’ll also
want to give the viewer a decent amount of width in your page too. In the
example below we show how you might show a 100vh, centered viewer - if nothing
else it’s good for a quick copy and paste to get you started!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!-- Optional CSS reset -->
<style>
.container {
  width: 1028px;
  margin: 0 auto;
}

iframe {
  border: none; // no borders for us
  width: 100%;
  height: 100vh; // make the viewer take up the entire height of the browser
}
</style>

<!-- Embed the iframe, setting the seamless attribute -->
<div class="container">
  <iframe src="https://publishing.sibelius.com/viewer/xxxxxxxxx"></iframe>
<div>

Generally speaking, when working with styling, it’s a good idea to start with
a CSS reset tool, or a library that includes one (like Bootstrap).

Responding to events in the viewer

See viewer features