Putting Your Score on the Web

This tutorial will cover the process of saving your Sibelius scores in a format that can be placed on the web. You should have already completed your score before beginning this tutorial. It is also assumed that you have a web page created and loaded onto the server, so that your score will become part of this existing site.

Sibelius uses a technology called Scorch to embed scores into web pages. Scorch uses a browser plug-in (similar to Flash, Quicktime or RealPlayer) to extends the capabilities of your web browser to make special content accessible. The Scorch plug-in can be downloaded for free for Windows or Mac and works with a variety of browsers. You do not need to install this in the lab (we've already done this), but if you want to view your score online from home you will need to visit their web site.

Start by opening your score in Sibelius. Before you can save the file as a web page, you should make sure that information saved in your file is complete and up-to-date. This is not anything that shows up on the written page, but it is important information stored about the file that could be considered metadata. Sibelius uses this information to set up your web page and it therefore must be setup properly.

Once your score is open, go to the File menu and choose Score Info (it is the very last option). This will cause the following window to open:

The information in this window is likely blank and you should fill in as much relevant information as possible. When you are finished, press OK.

Return to the File menu and choose Save As. Don't confuse this with the other options that also begin with the words "Save As". You need to choose the option right after Save. This will allow you to begin the process of turning your score into a web page.

A window will open with options on how to save you score. Toward the bottom is an option called Format next to a drop down menu. Click on the menu and choose the option called "Scorch Web Page".

Next, select the location on the local disks where your web page is stored in the folder browsing window. The files that this process produces are ready for the web, so it's best to put them directly in your web page folder.

You should notice that the file name at the top of this window has an "htm" extension. It is a good idea to remove any spaces from the name before you save it. This can help you avoid potential problems when you upload the files to the web.

Press the Save button. A second window will appear that looks like this:

The list on the left allows you to pick from several available templates that affect the look of your score on the web. Unfortunately, there is no way to preview these so if you want to try some of these out, you will have to save the score and then open it in a browser to see if you like it. I would recommend sticking with the "Classic" option.

On the right side are options that affect the size of your score in the web page. It is best to leave these alone, but feel free to experiment. The last option on this side determines whether visitors to your web page can save and print the score for their own use. If you want to prevent users from doing these things, leave this option unchecked. If you want to allow users to do these things, check this option.

When you are done, click OK. If you return to your web page folder in the Finder, you will see two new files: an "htm" file and an "sib" file.

Although the "sib" file is a Sibelius file and the program will open it, it is important that you not confuse it with your original score file. This is especially true if you disallowed printing and saving, because even you will not be able to do these things.

If you want to preview how your score will look online, simply click and drag the "htm" file to the web browser icon in the dock. It should open in a new browser window, just like any other "htm" or "html" file.

In order to add a link to your score, you will need to open you web page in Dreamweaver again. Add some text that describes the score and highlight the portion that you would like to act as a link. Once you've done this, go to the properties palette to create a link (and if the properties palette is missing, make sure the the Properties option in the Window menu is checked.)

Rather than entering the URL, we can link to the file by using the file browser. In the properties palette after the link description, there is a small folder icon like this:

If you click here, Dreamweaver will open another window to let you search for the file on your hard drive. Find your web page folder and simply select the "htm" file that Sibelius produced.

You can double check to see if the file you are linking to is truly in your web page folder by looking at the URL information just below the file browser. Dreamweaver will dynamically choose between relative and absolute addresses and use the best one for given circumstances. If you see a rather lengthy address starting with the text "file:///", then you are probably in an area of the local disks that is remote in relation to your web page file and an absolute address is being used. If the text you see contains only the name of the file, then you are in the same folder as your web page and a relative address is being used. The relative address is the option you want in this case, since absolute addresses that point to the local hard drive will not work once the page is online.

Once you have selected the correct file, click Choose. This will create a link to this secondary page on your main page. You will see that the text you selected originally now exhibits familiar link formatting.

Save the changes you have made to you web page in Dreamweaver. Finally, you must return to Fugu and upload your new and changed files to the server. Remember to copy both the "sib" and "htm" files because both must be present in order for your score to viewable online. Also remember that in order to see the link you added to the main page, the new version must be uploaded as well.

Once you have completed all these steps, you should return to your web page in a browser to check that everything is working. Go to the main page and check to make sure that your new link is working. You should see your score embedded in the new page. If you do not have the Scorch plug-in properly installed, a message directing you to the web site from which it can be downloaded should appear instead of the score.

This score should look exactly as it did in Sibelius, including any markings or comments. At the top of the page, you will see the title of your piece and your name. Just below this is a control bar that looks like this:

This first two buttons allow you to tab through the pages in the score. The next six buttons contain familiar icons that you should recognize. They provide simple playback controls so that visitors to your web page can hear your score in addition to seeing it.

The last five will vary somewhat. This first of these lets you transpose the score. This can be very handy for songs, where "comfortable" keys depend on the individual singer's vocal range. Visitors can try out different keys right in the web browser, without having to own Sibelius.

The save button lets users copy the score to their hard drive, where it can be edited using Sibelius. The page setup and print buttons work within the browser, allowing users to print your score even if they don't own Sibelius. This feature can be very useful for a composer try to get performers their parts or a teacher try to distribute music exercises. These buttons will obviously not work if you decided to disable the print and save features earlier.

The last button simply takes you to the Scorch web site for more information about the plug-in.

Congratulations, your score is now on the web! I hope you appreciate this very powerful feature that the developers integrated into Sibelius. Being able to simply share music notation over the Internet provides users with a wealth of possibilities.