Published August 29, 2020

Make a virtual piano with a speaker

When you press a key displayed in HTML, the speaker will play the appropriate scale.

BeginnerFull instructions provided1 hour226

Things used in this project

Hardware components

Cambrian Robotics obniz

Adafruit speaker

Story

Make things

Make a virtual piano keyboard on browser. You can make tone sounds with a speaker if you tap keys.

Materials

How to make

Hardware connection

Referring to the parts library of speaker, connect it to the obniz Board.

Software

For each key, a frequency is set to sound when clicked by the event handler.

Program

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="./stylesheet.css" />
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script
      src="https://unpkg.com/obniz@3.x/obniz.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="obniz-debug"></div>
    <div id="main">
      <h1 id="title">Let's play piano!</h1>
      <div id="keyboard" ontouchstart="">
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
      </div>
    </div>
    <script>
      const obniz = new Obniz("OBNIZ_ID_HERE");
      let frequency = [
        523.251,
        554.365,
        587.33,
        622.254,
        659.255,
        698.456,
        739.989,
        783.991,
        830.609,
        880.0,
        932.328,
        987.767
      ];
      let key = document.getElementById("keyboard").firstElementChild;
      
      obniz.onconnect = async function() {
        let speaker = obniz.wired("Speaker", { signal: 0, gnd: 4 });
        for (let i = 0; i < frequency.length; i++) {
          key.dataset.freq = frequency[i];
          key.addEventListener(
            "click",
            async function() {
              speaker.play(Number(this.getAttribute("data-freq")));
              await obniz.wait(500);
              speaker.stop();
            },
            false
          );
          key = key.nextElementSibling;
        }
      };
    </script>
  </body>
</html>

What is obniz?

Before we get into the project, let's look into obniz.

Here → obniz for DIY electronics

obniz is a cloud-connected IoT development board. You can program on the web browser of any smartphone or computer and the command is sent to obniz through the internet via obniz cloud. By connecting the obniz to the cloud through wifi, users can remotely control devices that are physically connected to obniz.

Thanks to this cloud based approach, you can program with Python, Javascript, or other languages you prefer and control hardware directly. You don't need to integrate firmware into the device side. Recording and analyzing data is also easy with obniz cloud service.

Want to control hardware things with your current Python or Javascript skill? Want to start IoT project but don't know where to start? Want to learn programming with languages you prefer?

obniz will help you broaden your viewpoint and develop both your SW and HW skills.

For more information, please visit our official website → Official Website

Where to get obniz board? → Amazon / Official Store

Untitled file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="./stylesheet.css" />
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script
      src="https://unpkg.com/obniz@3.x/obniz.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="obniz-debug"></div>
    <div id="main">
      <h1 id="title">Let's play piano!</h1>
      <div id="keyboard" ontouchstart="">
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
      </div>
    </div>
    <script>
      const obniz = new Obniz("OBNIZ_ID_HERE");
      let frequency = [
        523.251,
        554.365,
        587.33,
        622.254,
        659.255,
        698.456,
        739.989,
        783.991,
        830.609,
        880.0,
        932.328,
        987.767
      ];
      let key = document.getElementById("keyboard").firstElementChild;
      
      obniz.onconnect = async function() {
        let speaker = obniz.wired("Speaker", { signal: 0, gnd: 4 });
        for (let i = 0; i < frequency.length; i++) {
          key.dataset.freq = frequency[i];
          key.addEventListener(
            "click",
            async function() {
              speaker.play(Number(this.getAttribute("data-freq")));
              await obniz.wait(500);
              speaker.stop();
            },
            false
          );
          key = key.nextElementSibling;
        }
      };
    </script>
  </body>
</html>