今回は、obnizで音とメッセージを組み合わせます。obnizにはせっかくの見やすい液晶が付いていますから、これを利用しない手はありません。
ブラウザ画面上にボタンを用意し、そのボタンをクリックするとobnizで音がなり、obnizの画面に文字が表示されるようにします。
まず、ボタンを押したら音が鳴るというプログラムです。音はplay()メソッドで指定した周波数で、鳴らすことができます。play(440)であれば440Hz、つまり「ラ」の音がなります。（出力される音は正確ではありませんが、まあまあそれに近いという音がなります）
obnizはWeb技術がそのまま使えるので、ボタンクリックはclickイベントを捕捉すればよいことになります。addEventListener()でもいいですし、以下のプログラムのようにonclickにイベントハンドラを定義しても構いません。ここらへんは自分が使いやすい、分かりやすい方を使えばよいでしょう。
また、jQueryを使ってイベントを設定しても構いません。ここでは説明の都合上、jQueryではなく素のJavaScriptを使って書いています。
以下のプログラムを実行すると、ブラウザ画面上にボタンが4つ表示されます。ボタンを押すと指定した音がなります。停止ボタンを押すと音が鳴り止みます。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://obniz.io/js/jquery-3.2.1.min.js
"></script>
<script src="https://unpkg.com/obniz@1.4.4/obniz.js
"></script>
</head>
<body>
<div id="obniz-debug"></div>
<button id="mes1">朝ご飯だよ</button>
<button id="mes2">昼ご飯だよ</button>
<button id="mes3">晩ご飯だよ</button>
<button id="mesEnd">音停止</button>
<script>
var obniz = new Obniz("機器番号");
var speaker=null;
obniz.onconnect = async function () {
speaker=obniz.wired("Speaker", {signal:3 , gnd:0 });
document.getElementById("mes1").onclick=function(){
speaker.play(440);
}
document.getElementById("mes2").onclick=function(){
speaker.play(660);
}
document.getElementById("mes3").onclick=function(){
speaker.play(880);
}
document.getElementById("mesEnd").onclick=function(){
speaker.stop();
}
}
</script>
</body>
</html>
音停止ボタンをクリックして音を停止させるのではなく、一定時間鳴らしたら止めるようにすることもできます。この場合、obnizオブジェクトのwait()を使います。
ここで非同期処理が入りますが、async, awaitを付けるだけです。以前のようにPromiseオブジェクトを使って長々コードを書く必要はありません。（厳密にはPromiseオブジェクトでやりとりしていることにはなりますが）
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://obniz.io/js/jquery-3.2.1.min.js
"></script>
<script src="https://unpkg.com/obniz@1.4.4/obniz.js
"></script>
</head>
<body>
<div id="obniz-debug"></div>
<button id="mes1">朝ご飯だよ</button>
<button id="mes2">昼ご飯だよ</button>
<button id="mes3">晩ご飯だよ</button>
<script>
var obniz = new Obniz("機器番号");
var speaker=null;
obniz.onconnect = async function () {
speaker=obniz.wired("Speaker", {signal:3 , gnd:0 });
document.getElementById("mes1").onclick=async function(){
speaker.play(440);
await obniz.wait(2000);
speaker.stop();
}
document.getElementById("mes2").onclick=async function(){
speaker.play(660);
await obniz.wait(2000);
speaker.stop();
}
document.getElementById("mes3").onclick=async function(){
speaker.play(880);
await obniz.wait(2000);
speaker.stop();
}
}
</script>
</body>
</html>
それでは、ボタンをクリックしたら音を鳴らし、画面にメッセージを表示します。表示するメッセージは、ボタン内に表示されている文字にしています。もちろん、ボタンではなく任意のメッセージを表示することもできます。
その場合、message()関数に表示するメッセージを渡すように修正してください。thisとしている部分を変数名にして、それをobniz.display.print()のパラメーターとして指定すればOKです。
以下のプログラムを実行すると、クリックしたボタンに応じて音が鳴り、画面にメッセージが表示されます。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://obniz.io/js/jquery-3.2.1.min.js
"></script>
<script src="https://unpkg.com/obniz@1.4.4/obniz.js
"></script>
</head>
<body>
<div id="obniz-debug"></div>
<button id="mes1">朝ご飯だよ</button>
<button id="mes2">昼ご飯だよ</button>
<button id="mes3">晩ご飯だよ</button>
<script>
var obniz = new Obniz("機器番号");
var speaker=null;
obniz.onconnect = async function () {
speaker=obniz.wired("Speaker", {signal:3 , gnd:0 });
document.getElementById("mes1").onclick=function(){
message(this,440);
}
document.getElementById("mes2").onclick=function(){
message(this,660);
}
document.getElementById("mes3").onclick=function(){
message(this,880);
}
async function message(ele, freq){
obniz.display.clear();
obniz.display.print(ele.textContent);
speaker.play(freq);
await obniz.wait(2000);
speaker.stop();
}
}
</script>
</body>
</html>
音が2秒で止まってしまうと、相手が気づかないかもしれません。その場合は、obnizのスイッチを操作したら音が止まるように改良してみるとよいでしょう。
【古籏一浩】openspc@alpha.ocn.ne.jp
http://www.openspc2.org/
猛暑というか酷暑が終わりつつあって、ようやく昼間でも農作業ができるようになってきました。他のお爺さん達も草刈りとかやってます。
NHKなど見てると家庭にはエアコンがあるという前提になっていて、エアコンがない家のことなど眼中になさそう。同じく、学校は大学とか大学院を卒業しているような前提の報道が多く、半分近くの人は眼中になさそう。（29年度の短大を含めた進学率は54.8％）
http://eic.obunsha.co.jp/pdf/educational_info/2017/0904_1.pdf
すでに標準世帯も5％もないようで、こんなのを標準にしていたら、いろいろ失敗するようなあ、という感じがするのですが。
https://www.dir.co.jp/report/column/20180710_010074.html
・創って学ぼうプログラミング
https://news.mynavi.jp/series/makeprogram
・みんなのIchigoLatte入門 JavaScriptで楽しむゲーム作りと電子工作
https://www.amazon.co.jp/dp/4865940936
［正誤表］
http://www.openspc2.org/book/error/ichigoLatte/
・After Effects自動化サンプルプログラム 上巻、下巻
https://www.amazon.co.jp/dp/4844397591
https://www.amazon.co.jp/dp/4844397605
・IchigoLatteでIoT体験
https://www.amazon.co.jp/dp/B06X3X1CHP
http://digiconcart.com/dccartstore/cart/info/2561/218591
・みんなのIchigoJam入門 BASICで楽しむゲーム作りと電子工作
http://www.amazon.co.jp/dp/4865940332/
・Photoshop自動化基本編
http://www.amazon.co.jp/dp/B00W952JQW/
・Illustrator自動化基本編
http://www.amazon.co.jp/dp/B00R5MZ1PA/
・4K/ハイビジョン映像素材集
http://www.openspc2.org/HDTV/
・クリエイター手抜きプロジェクト
http://www.openspc2.org/projectX/