How to Insert a Musical Score in a Blog or Webpage easily (Step by Step)
Your a teacher, a musician, chorus master … and of course you want to share music with friends, with a class, or even with the whole world… That is why sharing music in a blog is important. The best way to do it is to share a score. But it is not always easy to embed a score in a blog post or a website in general. It might be a bit technical.
To share and embed a score in a blog or website, there are two ways: you create your score on platforms like Noteflight.com or flat.io and extract the code. Your audience can download the score or even listen to it before at their own will. Alternatively, you can share a PDF file through your Blog with a plugin.
A real interesting and quite new way of sharing a score is through the two main online platforms: Noteflight.com and Flat.io. Because not only can you share the score as sheet music and can be downloaded. But the score is shared as music as well: your audience can push a play button and hear the score with a cursor that gives the indication of what is currently played. That is an incredible feat, and everything embedded in a browser without the need for additional software or plugin. On all platforms. On Macs, PCs on Windows, or Linux. On mobile, whether Android or iOS. So this is really the 2.0 way of sharing a score.
Alternatively, you still can embed a musical score in a PDF format on your blog or website. It is more directed to desktop usage, though. But we will see how to do that as well.
Share your score with Noteflight
Embed your score in your blog using Noteflight
Just sign up to Noteflight.com with a free account, it will be enough to write and share a score.
When your score is perfect and ready to be shared, click on the top-right icon labeled “score details” to trigger the right panel, and then, at the bottom, the bright red “share score” icon.
Now, configure the options you want for your score:
- if you want everybody to see it, or special groups or individuals,
- if you want people to be able to edit the score, yes, edit! I usually choose to view only,
- if you allow the score to be copied.
Then, the next dialog lets you specify the legal information concerning the score. It is important to precise if your work is original or not, for copyright infringement reasons.
Now that the “share” dialog is configured, let’s select the “share” icon in the bottom right of the panel.
Then you can specify the dimensions of the score, the type of view (ribbon, page etc.) and copy the embedded code :
Now open your post or page in WordPress and in your favorite page editor add an HTML block (do not chose “embed”), then just copy and paste the code you just got from Noteflight:
It should take the whole width of the page but it doesn’t: it is not really responsive. That is why I ad the tag :<p align:center> and </p> before and after because it centers the score on the page.
Then, when someone goes to your page, he can see the score, play it or download it by clicking on the square button to open it in a new window, and there it is possible to download it as a PDF by clicking on the “export” icon.
Share with a link to the score in Noteflight
Alternatively, you can share a link to your score by selecting a “copy link to score” from the “share menu” in the “Score details” on the right panel. You can check my great score here!
If you want to learn more about Noteflight, read on the comprehensive review for which I have spent hours testing this great platform.
With flat.io
Share your musical score with flat.io
It is even simpler. A free account is enough again. You can sign in with flat.io and get started right away, no credit card required.
Go to “my Library” and select the score you want to share.
Then on the top right of the window, you can toggle a menu where you can choose if:
- you want to share the link of your score (it won’t be displayed or embedded in your page but your user will be able to open the score in another browser tab where he or she can read it, play it or download it);
- Share it in the flat.io platform (for users who browse on the platform)
- or embed for the web. You can embed the code in any blog, WordPress, Joomla, Blogger, or raw HTML page.
Then, if you choose the last option, “embed for the web”, you are presented the following window where you can copy the code:
You have the option to select an advanced dialog where the options you can choose from are almost limitless. You can customize everything, included the color of the interface to match the theme of your website!
Then, as we did with Noteflight and WordPress, we select a custom HTML block in WordPress and paste the code to embed your score in your blog. This is the final result:
Share a link to your score with flat.io
Alternatively, again, you can choose to only share the link. Your score will be opened in another tab or window where your user will be able to view the score, play it and download it. Here is my new masterpiece.
All in all, I find flat.io easier, quicker, more intuitive, and more beautiful to use the Noteflight. But this is personal preference, I let you be the judge.
With Musescore
Share your musical score with Musescore
Create a free account on the Musescore.com website. Once you have created a score or imported one, you can go to “My scores” and select the one you want to share. This is really simple because, in the next menu, you can choose whether you want to share your score:
- on all the main social media;
- get a link;
- get the code to embed.
So, again, you can refer to the paragraph on how to embed your score with Noteflight to see how to insert the embedded code in WordPress. Here is the result :
Blues in G by ViolinTrend.comShare a link to your score with Musescore
ON the previous dialog, if you have clicked on the “copy” icon, you have the link to your score in the clipboard of your computer. Just paste the link on your blog as you would do for any other link.
Here is my masterpiece on Musescore.
Embed your score in WordPress
Without a plugin
If you drag and drop your pdf on your WordPress blog, your page builder will propose to upload the file and create a download link :
You can change the displayed name of the file and the text on the button, as above. But you do not need to display the button of the link. You can do what I have done here: I have created a jpeg thumbnail of the score, copied the link from above, and pasted the link as an option to the score. Now, you just can download the score by clicking on the image. It isn’t an embedded PDF per se but can be quite handy if you do not want to install an additional plugin. Especially if you do not have to do this a lot in your blog.
Using Embed PDF Plugin
The last thing you can do is to embed the PDF using a plugin such as the Embed PDF Viewer Plugin. I won’t detail all the processes here, but in a nutshell, once the plugin is installed, you will have another block called “PDF” for your page that will give you the ability to upload your file. The result will be that your PDF is displayed in an iFrame inside a reader on your page. The reader will be able to browse through pages, print, and download the file. Of course, there won’t be any musical interaction such as in the dedicated platforms above (Noteflight, Flat, Musescore).
