Play the Piano and Other Instruments via the WordPress Block Editor

Tetsuaki Hamano released the Piano Block plugin for WordPress on Monday. It allows users to insert a piano-based interface into the editor for playing music. Mostly, it is just a lot of fun.

Hamano launched RichText Extension, his first submission to the WordPress plugin directory, in the spring of 2020. At the time, block-related plugins were still scarce, but he has continued contributing extensions since that initial release. Flexible Spacer Block is invaluable for responsive vertical spacing. Flexible Table does the same for table elements, and his Custom HTML Block Extension is handy for anyone writing code regularly from the editor.

While his previous outings covered several vital features for different user groups, his latest is a bit more on the lighter side of things. More than anything, it serves as a brief distraction, a way to break up the day for people who spend a lot of time in the WordPress content editor.

One thing that I love about blocks is that they do not have to serve a vital function in producing content for a site. Sometimes, their purpose is to simply bring a little joy into our lives. That is what Piano Block does.

Hamano noted in the plugin description:

This plugin does not add any useful features to WordPress, nor does it add any useful blocks to help you write posts. Let’s insert this block and enjoy the music if you are stuck in writing an article or just want a little distraction.

The plugin merely adds a web-based musical instrument to the block editor, offering a change of pace from building content. It does not appear on the front end of the site.

WordPress block editor open with a Piano Block inserted into the content canvas.  It has a few options for changing the volume, octave, instrument, and sustain pedal.  The keys are mapped to computer keys.
Piano Block in the editor.

The block offers a range of 14 instruments. The default is an acoustic piano, but users can switch between various keyboard, string, brass, and woodwind options. Plus, there is a xylophone.

Users can move up or down two octaves, change the volume, or toggle the sustain pedal on and off. Other than that, there are no other block-specific options.

The block’s keyboard mapping threw me off at first. I peeked under the hood and found the JavaScript code for assigning each key. I was tempted to clone the plugin’s GitHub repository, set up the build tools, and customize it. However, that seemed like a lot of work for a block meant to be a momentary distraction. It was not time for me to put on my developer hat.

So, I tickled the plastic keys of my laptop, trying to rewire my brain to a layout that did not match an actual piano. I just had fun with it, and that is kind of the point.

I rarely record videos, being much more comfortable tapping my laptop’s keys than doing anything on camera. Therefore, Tavern visitors are in for something of a treat today. I put together a short clip of me playing a song via the Piano Block:

That was tougher than it looked with the keys in odd places. Apologies if I missed any notes or lines. It has been a while since I have heard Twinkle, Twinkle, Little Star. I believe it goes a little something like that.

I am continually amazed at what some developers create on top of the block system. More than anything, I want to see some of the talented musicians in the WordPress community — I know some of you are out there — record themselves playing something with Piano Block. A little jazz, perhaps?

4 responses to “Play the Piano and Other Instruments via the WordPress Block Editor”

  1. I’ve struggled to find any use for the block editor, retrying it every few months, and had unfortunately found no use for it…until now. What a joy of a plugin. I’ll keep block editor active on a site just for the Piano Block.

  2. …also, nice job playing, Justin. It sounds good, thanks for the demo. Thanks for looking out for those fun types of plugins.

  3. Can’t think of any significant reason to implement this on a site other than just how cool it is. Maybe for some instrument lesson blogs, so that the learner could try something out immediately during the class?

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: