M5Stackで音付きアニメーションを試す(一部ソース付き)
M5Stackで遊んでみました。
裏メイカー祭。M5STACKでやってみた。画像転送で音声バッファが間に合わないw pic.twitter.com/doRZPN5TOv
— ぼうきち (@boukichi_numloc) 2018年12月7日
元ネタはこれです。
ポンチャック風 呼び込み君テーマソングです。裏メイカー祭(冬)ではこのフルバージョンで皆さんをお迎えします。 pic.twitter.com/Kl1e6hpxf1
— TOKYO FLIP-FLOP@裏メイカー祭 (@tokyo_ff) 2018年11月30日
続いてコードを…。
#include <M5Stack.h> #include <WiFi.h> #include "AudioFileSourceSD.h" #include "AudioFileSourceID3.h" #include "AudioGeneratorMP3.h" #include "AudioOutputI2S.h" extern const unsigned char p1[]; extern const unsigned char p2[]; AudioGeneratorMP3 *mp3; AudioFileSourceSD *file; AudioOutputI2S *out; AudioFileSourceID3 *id3; void setup() { M5.begin(); WiFi.mode(WIFI_OFF); M5.Lcd.printf("M5STACK BOOT...\n"); file = new AudioFileSourceSD("/song.mp3"); id3 = new AudioFileSourceID3(file); out = new AudioOutputI2S(0, 1); // Output to builtInDAC out->SetOutputModeMono(true); out->SetGain(0.10); mp3 = new AudioGeneratorMP3(); mp3->begin(id3, out); M5.Lcd.printf("GO\n"); } bool Play = false; bool Graph = false; bool Page = false; bool Anime = false; unsigned long NextFrame = 0; void DoAnime() { if (!Page) { M5.Lcd.drawBitmap(0, 0, 320, 240, (uint16_t *)p1); } else { M5.Lcd.drawBitmap(0, 0, 320, 240, (uint16_t *)p2); } Page = !Page; } void loop() { if (Play) { if (mp3->isRunning()) { if (!mp3->loop()) mp3->stop(); } } if (Anime) { unsigned long ms = millis(); if (NextFrame < ms) { DoAnime(); NextFrame = ms + 500; } } if(M5.BtnA.wasPressed()){ Play = true; } if (M5.BtnB.wasPressed()) { Anime=true; } if (M5.BtnC.wasPressed()) { Play=true; Anime=true; } M5.update(); }
画像はコンバートしたものを使用していて、別ソースなので省略です。
- MP3はhttp://forum.m5stack.com/topic/143/lesson-6-1-speaker-mp3-playerを参考にしました。
- 音量は爆音がなります。ハードウェア的なボリュームが欲しいです。ゲインでごまかしています。
- 最初はSDカードから画像を読み出していましたが、時間が掛かったのでオンメモリにしました。
- 画像はhttps://github.com/m5stack/M5Stack/issues/28のもので変換しました。
ここにあるようにフォーマット的には16bit RGB565なのですが、リトルエンディアンでした。
エクスポート後に手動でstaticの削除、配列名の変更、ファイル末尾の構造体(だったかな?)の削除をしました。
- 完全なバックグラウンド再生ではないようで、mp3->isRunning()を呼ばないと音が更新されなくなりました。
- M5.update()を呼ばないとキー入力が更新されなくなりました。
M5Stackはいろいろ組み合わせて気軽に作れるのが良いかもしれません。