Integration Guide

A popular way to run CloudPiano is as an embedded feature alongside related content. For example, perhaps you run a website working with MIDI and are looking to allow your users to see and play along to your MIDI files visually, or maybe you are just looking to integrate fun musical game content. Then we have written a guide to help you get CloudPiano running on your website.

  • Embed MIDI Playback

    If you have MIDI files that consist primarily of piano content, you can use CloudPiano to playback that content visually in a "Guitar Hero" style way. Users can even play along to the falling notes using their own MIDI device.

    This feature is also referred to as the "Learn Tool" within the broader context of the application.

    Attributes
    • src - string

      This url structure is as follows:

      https://cloudpiano.io/room/room_id/layout?midi=midi&hideMenu=true

      • room_id - This is the name of the room you are linking to. We recommend using "play-alone" as this will avoid anyone else joining when you are trying to playback a MIDI file.
      • layout - This defines the visual layout of the room you are in - for midi playback this will need to be "learn".
      • midi (optional) - This param defines the link to MIDI resource being played back. This can be any midi file publicly accessible on the internet. Ensure this string is url encoded.
      • hideMenu (optional) - When true, this param hides the menu and all links away from the room.
    • allow - string

      If you would like to allow users to use their MIDI devices to control the CloudPiano keyboard, you will need to specify "midi".

    Example
    <iframe
    src="https://cloudpiano.io/room/play-alone/learn?midi=https%3A%2F%2Fcloudpiano.io%2Fmidi%2Fgs1-notes.mid"
    allow="midi"
    width="900"
    height="550"
    border="0"
/>

  • Embed Piano Chat Room

    If you are looking to add a fun game-style piano chat room that allows users to chat and play the piano with others in the room (using their MIDI devices), then the following approach is how to do it.

    • src - string

      This url structure is as follows:

      https://cloudpiano.io/room/room_id/layout

      • room_id - This is the name of the room you are linking to. We suggest using one of: "pop", "jazz", or "rock". These are publicly available room and so others may already be present.
      • layout - This defines the visual layout of the room you are in - for chat rooms this will need to be "share".
      • hideMenu (optional) - When true, this param hides the menu and all links away from the room.
    • allow - string

      If you would like to allow users to use their MIDI devices to control the CloudPiano keyboard, you will need to specify "midi".

    Example
    <iframe
    src="https://cloudpiano.io/room/pop/share"
    allow="midi"
    width="960"
    height="700"
    border="0"
/>

If you have any further questions about integration then don't hesitate to get in touch by email: tim@cloudpiano.io