ドレミファソラシドのソフトウェアボタンを用意し、圧電ブザーで音階を表現します。
前回の講座はこちらです。
-
obnizでフルカラーLEDをグラデーション点灯しよう【obniz講座第5回】
今回はこの動画のようにフルカラーLEDをグラデーション点灯させてみます。 これまでの記事はこちらです。 記事 内容 obnizでIoT電子工作を始めよう!【obniz講座第1回】 obn ...
続きを見る
準備するもの
今回準備するものはこちらです。
準備するもの
- obniz本体 ×1個
- マイクロUSBケーブル(obniz付属品) ×１本
- 圧電ブザー(EB3105A) ×１個
圧電ブザーは5Vが入力できる「自励式」のブザーであれば何でも結構ですが、私はFDK㈱の「EB3105A-30C140-12V」を用意しました。
obnizと圧電ブザーの接続
obnizと圧電ブザーは上図のように接続します。
圧電ブザー「EB3105A」の赤い線を0番ポートに、黒い線を1番ポートに接続します。
この接続は「obniz.js」で用意されている関数で指定する事が可能です。
obniz.wired("Speaker", {signal:0 , gnd:1 });
signalやgndのの後の数字が、それぞれobnizのポート番号を指定しています。
今回使用する圧電ブザーの「EB3105A」は赤い線が信号線(signal)、黒い線がGND線のため、上記の指定では赤い線を0番、黒い線を1番としています。
圧電ブザーの仕組みと音階を変える方法
圧電ブザーについて
圧電ブザーは電圧をかけると振動する板と、その振動板に金属などが合わせて振動する事で音を鳴らします。
圧電ブザーは、発振回路を内蔵しており、一定の電圧をかけるだけで音が鳴ります。
今回は「obniz」の端子に直接接続して使用したいので、圧電ブザーを用意します。
用意したのはFDK㈱の「EB3105A-30C140-12V」です。
圧電ブザーで音階を変える仕組み
圧電ブザーは電圧をかけるだけで音が鳴りますが、一定の電圧をかけているだけでは「ピー」といった単一の音しかなりません。
そこで、周波数を変更して、ドレミファソラシドの音階を表現します。
周波数は１秒間に何回振動するかを表した値となります。
例えば、10Hzの場合、１秒間に10回振動するという意味です。
圧電ブザーの仕組みや、周波数の変更方法についてはこちらの記事もご覧ください。
-
圧電ブザー(圧電サウンダ)の原理／仕組みと使い方(マイコンで音を鳴らす)
サンダー今回はマイコンでちょっとした音を鳴らすのに便利な圧電ブザーについて説明します 圧電ブザーは一定の電圧をかけると事で音が鳴るので、マイコンの端子に直接接続して使用するときに重宝します。 その圧電 ...
続きを見る
「obniz.js」には周波数を指定するだけで、その周波数の音を鳴らしてくれる関数があるので、今回はそちらを使用します。
サンプルプログラム
サンプルプログラムはこちらです
onbiz.jsは常に最新にしてください
下記のoniz.jsを読み込む際のバージョンは常に最新バージョンへ書き換えてください
<script src="https://unpkg.com/obniz@【ここの部分】/obniz.js" crossorigin="anonymous"></script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script src="https://unpkg.com/obniz@2.0.1/obniz.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="obniz-debug"></div>
<button id="do">ド</button>
<button id="re">レ</button>
<button id="mi">ミ</button>
<button id="fa">ファ</button>
<button id="so">ソ</button>
<button id="ra">ラ</button>
<button id="shi">シ</button>
<button id="do_up">ド</button>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
var speaker = obniz.wired("Speaker", {signal:0 , gnd:1 });
async function obnizSpeaker(frq,str)
{
speaker.play(frq);
obniz.display.clear();
obniz.display.print(str);
await obniz.wait(300);
speaker.stop();
}
var frq = [261.626,293.665,329.628,349.228,391.995,440,493.883,523.251];
var str = ["ド","レ","ミ","ファ","ソ","ラ","シ","ド(C5)"];
$('#do').click(async function () {
obnizSpeaker(frq[0],str[0]);
});
$('#re').click(async function () {
obnizSpeaker(frq[1],str[1]);
});
$('#mi').click(async function () {
obnizSpeaker(frq[2],str[2]);
});
$('#fa').click(async function () {
obnizSpeaker(frq[3],str[3]);
});
$('#so').click(async function () {
obnizSpeaker(frq[4],str[4]);
});
$('#ra').click(async function () {
obnizSpeaker(frq[5],str[5]);
});
$('#shi').click(async function () {
obnizSpeaker(frq[6],str[6]);
});
$('#do_up').click(async function () {
obnizSpeaker(frq[7],str[7]);
});
}
</script>
</body>
</html>
既出部分の概略
これまでに説明した部分は該当記事を紹介するのみとし、新たな部分のみ説明致します。
| コード | 説明 | 参照講座 |
|---|---|---|
| <meta charset="utf-8"> | 文字コード(UTF-8)の設定 | obnizでLEDを光らせよう【第２回】 |
| <meta name ~(省略)> | 横幅を端末に合わせ、表示倍率を1倍に設定 | obnizでLEDを光らせよう【第２回】 |
| <script src="https://code.jquery.com~(省略)> | jQueryをCDNから読み込んで利用 | obnizのPWM制御でLEDを調光しよう【第4回】 |
| <script src="https://unpkg.com/obniz(省略)> | obnizを制御するための関数などを読み込んで利用 | obnizでIoT電子工作を始めよう【第1回】 |
| <div id="obniz-debug"></div> | obnizのデバッグ表示 | obnizでIoT電子工作を始めよう【第1回】 |
| <button ~(省略)> | HTMLでボタンを作成し、id名を設定 | ソフトウェアボタンでobnizのLEDをON/OFFしよう【第3回】 |
| var obniz = new Obniz("OBNIZ_ID_HERE"); | 設定したobnizのIDを「obniz」変数として宣言 | obnizでIoT電子工作を始めよう【第1回】 |
| obniz.display.clear();／obniz.display.print(""); | obnizのディスプレイクリア／文字を表示 | obnizでIoT電子工作を始めよう【第1回】 |
var speaker = obniz.wired("Speaker", {signal:0 , gnd:1 });はブザーやスピーカーから音を鳴らすために用意された関数
下記のコードについて説明します。
var speaker = obniz.wired("Speaker", {signal:0 , gnd:1 });
まず、「speaker」と変数を宣言しています。
そして、var speaker = obniz.wired("Speaker", {signal:0 , gnd:1 });はブザーやスピーカーの信号線とGND線を指定して制御するための関数で、「obniz.js」で定義されています。
最初に"Speaker”を代入し、ブザーやスピーカーの制御であることを示します。
"signal"はスピーカー(ブザー)の信号線、”gnd”はスピーカー(ブザー)のGND線を表し、それぞれの数字がobnizのポート番号を示しています。
async function obnizSpeaker(frq,str){ }は自作関数
下記のコードについて説明します。
async function obnizSpeaker(frq,str)
{
speaker.play(frq);
obniz.display.clear();
obniz.display.print(str);
await obniz.wait(300);
speaker.stop();
}
これは複数の命令をまとめた自作関数で、関数名を「obnizSpeaker」とし、第１引数として周波数の"frq"、第2引数としてobnizのディスプレイに表示させる文字の"str"を必要としています。
上の命令から順に概略を説明します。
| obnizSpeaker内の命令 | 説明 |
| speaker.play(frq); | 指定された周波数でスピーカーを鳴らす(obniz.jsで定義) |
| obniz.display.clear(); | obnizのディスプレイ表示をクリア(obniz.jsで定義) |
| obniz.display.print(str); | 指定された文字列をobnizのディスプレイに表示させる(obniz.jsで定義) |
| await obniz.wait(300); | 300ミリ秒(＝0.3秒)obnizを停止させます(obniz.jsで定義) |
| speaker.stop(); | スピーカーの音を止めます(obniz.jsで定義) |
配列で音階毎の周波数と文字列(ドやミ)を格納
こちらのコードについて説明します。
var frq = [261.626,293.665,329.628,349.228,391.995,440,493.883,523.251];
var str = ["ド","レ","ミ","ファ","ソ","ラ","シ","ド(C5)"];
音階毎の周波数を"frq"という配列に、音階の文字列を"str"という配列に格納しました。
ここで、音階には決まった周波数があります。例えばド(C4)ならば、261.626Hzです。
音階(ドレミファソラシド)毎の周波数
それぞれの音階と周波数の表は下記の通りとなります。
この周波数と音階名をそれぞれ"frq"と"str"の配列に格納しています。
| 音階名 | 周波数(Hz) |
|---|---|
| ド(C4) | 261.626 |
| レ(D4) | 293.665 |
| ミ(E4) | 329.628 |
| ファ(F) | 349.228 |
| ソ(G4) | 391.995 |
| ラ(A4) | 440.000 |
| シ(B4) | 493.883 |
| ド(C5) | 523.251 |
自作したobnizSpeaker関数へ、周波数と音階名を引数として渡す
最後にこちらのコードについて説明します。
$('#do').click(async function () {
obnizSpeaker(frq[0],str[0]);
});
これは低い方の「ド」のソフトウェアボタンをクリックしたときの処理となります。
最初の$(ドル)マークはjQueryの関数である事を示しています。
「ド」のソフトウェアボタンのid名は「do」としました。
id名の指定は先頭に#(シャープ)を付けます。
そして、「async function obnizSpeaker(frq,str){ }は自作関数」で説明した関数へそれぞれ周波数と、ディスプレイに表示させる文字を引数として渡しています。
frq[]
配列の添え字は0から始まるので、低いドは0、レが1、…高いドが7となります。
これらを音階のボタン毎に添え字を変えれば、配列に順次格納した値で音が鳴ります。
応用編(ピアノ)
今回のプログラムを応用して、このようなピアノなども作成が可能です。
是非チャレンジしてみてください。
【前回の講座】
-
obnizでフルカラーLEDをグラデーション点灯しよう【obniz講座第5回】
今回はこの動画のようにフルカラーLEDをグラデーション点灯させてみます。 これまでの記事はこちらです。 記事 内容 obnizでIoT電子工作を始めよう!【obniz講座第1回】 obn ...
続きを見る
【次回の講座】
-
obnizでミニ4駆をラジコン化しよう！【obniz講座第7回】
今回は下の動画のように、タミヤの4輪駆動車工作基本セット（以下、ミニ四駆と呼びます）をobnizでコントロールしてラジコンにする説明をします。 obnizを使った電子工作をYoutube ...
続きを見る
【講座のまとめ】
| 記事 | 内容 |
|---|---|
| obnizでIoT電子工作を始めよう！【obnizでIoT電子工作を始めよう！【obniz講座第1回】 | obnizのディスプレイに文字を表示させます |
| obnizでLEDを光らせよう！【obniz講座第2回】 | obnizにLEDと抵抗を接続してLEDを光らせます |
| ソフトウェアボタンでLEDをON/OFFしよう！【obniz講座第３回】 | HTMLで作成したボタンを押して、LEDをON/OFFさせます |
| obnizのPWM制御でLEDを調光しよう【obniz講座第４回】 | obnizのPWM機能を使ってLEDを調光させます |
| obnizでフルカラーLEDをグラデーション点灯しよう【obniz講座第5回】 | obnizでフルカラーLEDをグラデーション点灯させます |
| obnizで圧電ブザーを鳴らそう！【obniz講座第6回】 | obnizで圧電ブザーを鳴らします |
| obnizでミニ4駆をラジコン化しよう！【obniz講座第7回】 | obnizでタミヤのミニ四駆をコントロールします |
| obnizでサーボモータを動かそう！【obniz講座第8回】 | obnizでサーボモータを動かします |
