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.
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
parameter in your
<iframe> as follows:
<!-- Embed the iframe, setting the allowfullscreen attribute --> <iframe src="https://publishing.sibelius.com/viewer/xxxxxxxxx" allowfullscreen></iframe>
- 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
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
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!
<!-- Optional CSS reset -->
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