M5Stackで物理さなボタン作るとこみてて

-
いつも元気もらってます。これからも頑張ってくださいね。


物理さなボタン

こういうのを作りました。ハッシュタグお邪魔しました。


このツイートのあとでアップデートして、もうちょっと色々できるようになりました。


動機

5月ごろに名取さなの動画を見つけてドハマりしました。すこすこのすこ。Twitterのスクリーンネームに🍆つけたい。


で、名取さなの配信動画から音だけを抜き出した「さなボタン」というのがあるんですけど、自分用に物理ボタンにしたなって思ったんですね。

「そういえばLCDついてて、ボタンもついてて、音もなるマイコンあったなー」と思って、M5Stackならサクッとできるかなと思った次第です。


作り方

モノづくりが好きな方に向けて書き残します。やることは2つです。
  1. LCDに画像を表示する
  2. ボタンを押すと音声が鳴る

 いるもの
  • M5Stack
  • MicroSDカード（容量は小さくていい）

開発環境の構築

環境構築はこちらの記事が良い感じです。「1. Arduino IDE 開発の場合」に沿って進めます。M5Cloudだと、画像を表示しながら音を再生するとめっちゃ乱れますので、Arduino推奨です。あと、ボーレート115200が大事。

ハローワールドまで出来たら、つぎつぎつーぎ。


画像を表示する

LCDに表示するための画像（320x240 JPG）を準備します。
  • 良い感じの名取さなをキャプチャして
  • 320x240のJPG画像で保存して
  • MicroSDカードに突っ込んで
  • MicroSDをM5Stackに刺す

普通にJPG作ると表示されないことがあるらしく、僕もダメでした。もしダメだったら、一度ビットマップで画像を作ってから、変換サイトでJPGに変換するといいです。

画像の表示プログラムはすっごい簡単。
#include <M5stack.h>

void setup(){
  M5.begin();

  // LCD display
  M5.Lcd.clear();
  M5.Lcd.drawJpgFile(SD, "/画像名.jpg");
}

void loop() {
  M5.update();
}

お気に入りの画像が出たら、つぎつぎつーぎ。


ボタン押すと音を鳴らす

M5StackはMP3とWAVEが再生できます。ここでは、Aボタンを押すと「あれくさ～」って言ってくれるようにします。



音源はMicroSDカードに入れます。

プログラムはちょっと複雑です。公式リポジトリにwavファイルを鳴らすサンプルがありますので、これを真似しながら作ります。個人的には「ESP8266Audio と ESP8266_Spiram のライブラリを追加しないといけない」というのに気づくのに時間がかかった。

あと、上記どっちかのライブラリに問題があって、WAVEデータの再生が完了しても無音再生が続いちゃうようです。AudioGeneratorWAV.cppを修正する必要があります。詳しくはこちら。

というわけでプログラムは以下。
#include <M5Stack.h>
#include "AudioFileSourceSD.h"
#include "AudioGeneratorWAV.h"
#include "AudioOutputI2S.h"

AudioGeneratorWAV *wav;
AudioFileSourceSD *file;
AudioOutputI2S *out;

void setup(){
  M5.begin();

  // LCD display
  M5.Lcd.clear();
  M5.Lcd.drawJpgFile(SD, "/画像ファイル.jpg");

  out = new AudioOutputI2S(0, 1);
  out->SetOutputModeMono(true);
  out->SetGain(2.0);     // 音量大きかったら小さい値にして
  wav = new AudioGeneratorWAV();
}

void loop() {
  M5.update();
  if(M5.BtnA.wasPressed()){
    file = new AudioFileSourceSD("/音声ファイル.wav");
    wav->begin(file, out);
    while(wav->isRunning()) {
      if(!wav->loop()) wav->stop();    
    }
  }
}

ちなみに、MP3再生の公式サンプルもちゃんとあります。MP3はライブラリの修正もいらないので、もっとお手軽ですね。

あとは音声ファイルを増やしたり、ボタンを押すごとにランダムに変えたりすれば、楽しくなりそうですね！


おわりに

最終的に以下のようになりました。

  • 起動すると、「おはようございナース！」の音声を再生する（MP3再生）
  • 起動時に表示される画像は5種類からランダム
  • Aボタンを押すとAlexa呼び出しの音声を再生する（WAV再生）
  • Bボタンを押すとランダムに音声を再生する（MP3再生）
  • Cボタンを押すと表示される画像がランダムで変わる

ファイル名を全部数字にしちゃえば乱数でおｋなので、MicroSDカードに画像や音声をガンガン詰め込んで、ランダム再生で楽しんでくださいね。あとはよろしくお願いしますね。


利用規約は事前に確認しましたが、規約違反していたり不適切と判断されたら消します。

それでは、おつかれさな～🍆

追記：GitHubに置きました。

コメント

コメントを投稿