この記事ではM5Stack社が開発したブロックを組み合わせてプログラミングする”UiFlow”という開発環境を使ってMP3音声を再生する手順を解説していきます。
使用する電子部品は”DFPlayer miniという安くて簡単にMP3を再生できるものを使っていきます。
今回はATOM Liteを使っていますが、UiFlowが使えるM5Stack社の製品ならどれでも同様に可能です。（動作確認してませんが、普通にUART使っているだけなので）
環境
私の開発環境です。既に環境が揃っている人はすっ飛ばしてください
構成（使用している電子部品やファームVerなど）
電子部品は中国から個人輸入が最も安く買えますが少量買うならAmazonやスイッチサイエンスがやっぱり便利ですね。
| PC | Mac macOS Big Sur ver11.5.1 |
|---|---|
| マイコン | M5stack ATOM Lite (switch-scienceで買うと送料かかりますが安いです) |
| DFPlayer mini オーディオモジュール | AmazonのDFPlayer miniの安いやつ（1個250円ぐらい） |
| スピーカー | Amazonの適当なスピーカー（１個60円ぐらい） |
| SDカード | 家にあった適当なmicroSDカード （使用可能な最大容量：32 GB、対応ファイルシステム：FAT16、FAT32） |
| 開発環境 | UiFlow（https://flow.m5stack.com/） |
| ファームウェア | UIFlow_Lite1.8.2 |
ポチップ
ポチップ
ポチップ
ファームウェアの書き込み
“M5Burner”というツールを使ってUiFlowで実行できるファームウェアを書き込みます。
“Download”→”Burn”の順にクリックすればOKです
配線
ここではATOM LiteとDFPlayer、スピーカーの配線について説明します。とは言っても下のブレッドボード図を見て貰った通りです。
VCCもGNDもATOM Liteからとっています。スピーカーは特に大容量の電流とか使わないので問題なしと判断。
ATOM LiteとDFPlayerの接続
以下にATOM LiteのGPIOとDFPlayerのピンとの対応位置と書きました。
ATOM LiteのGPIO番号はUARTが使える所ならどこでもOKです。変更する場合は下の書いてあるプログラムにGPIO番号も変更してください。
| ATOM Lite | DFPlayer |
 |  |
| 5V | VCC |
| GND | GND |
| G23（TX） | RX |
| G33（RX） | TX |
DFPlayerとスピーカーの接続
こちらは完全に以下を見たまんまです。
| DFPlayer | スピーカー |
|  |
| SPK_1 | 赤線 |
| SPL_2 | 黒線 |
画像を持ってきたので出典記載：
- スイッチサイエンス(https://www.switch-science.com/catalog/6262/)
- dfrobot(https://wiki.dfrobot.com/DFPlayer_Mini_SKU_DFR0299)
プログラム
UiFlowでは残念ながら便利なライブラリがないので、データシートに沿ってUARTで通信してMP3再生をしていきます。
本当は色々できることがあるみたいですが、必須の初期化 ＋ よく使うであろう４機能のみ紹介です。
- 初期化
- 再生（順番）
- 指定したMP3を再生
- 再生を停止
- 音量の調整
DFPlayerのデータシートはスイッチサイエンスのDFPlayer製品のものを参照
DFPlayerで再生中はLEDが点灯（もちろんスピーカーに繋がってなくても）
初期化
まずはUARTで接続するための初期化を設定します。UARTはTX、RXの２つの線を使って通信するので、Setupで送信ピン（TX）/受信ピン（RX）を決めます。
私の場合はGPIO23番を送信ピン、33番を受信ピンに設定しています。UARTの使えるGPIOをお好きに接続して使いましょう。
- ボーレートは”9600″固定です別の数値にはしないでください。
- RX＝受信、TX＝送信なのでマイコン側のRXとDFPlayer側のTXを接続し、マイコン側のTXとDFPlayer側のRXを接続してください。
再生（順番に次を再生）
MP3が再生されていなければ再生が開始されます。既に開始されていれば次のMP3の再生が始まります。データシートで”NEXT”と記載されている項目です。
以下のサンプルではボタンAを押したら曲が再生され、またボタンAを押すと次の曲が再生されます。
下のブロックでは以下２つの要素で構成
- ボタンAを押すと関数”DFPlayer_next”関数を呼び出す
- ”DFPlayer_next”関数で”7E FF 06 01 00 00 00 EF”をUARTで送信する
指定したMP3を再生
次は再生するMP3を指定して再生してみましょう。データシートで”Specify folder to playback”と書かれている項目です。
前準備（SDカードにMP3を格納）
ファイルを指定して再生するためにはSDカード内のフォルダ名とファイル名はルールを守って格納する必要があります
そのルールとは以下のようにフォルダ名は２桁の数値、ファイル名の先頭に３桁の数値を入れることです。ファイル名は先頭に数値があればOKのようです
フォルダ名は最大99(0x63)、ファイル名の最大は255(0xFF)
Macの場合は、MP3をコピーしてSDカードに格納時に隠しファイルが作成されるので再生順が変になったり、削除しても消えなかったりと変な動作になることがあります。
「dot_cleam」というコマンドを使って削除しておくことをオススメします
再生
以下のサンプルはボタンを押した時に”DFPlayer_SpecifyFile”関数にフォルダ名とファイル名（それぞれ数字）を指定して再生します。
具体的にはATOM LiteのAボタンを押した時に”02”というフォルダにある001_Sample.mp3を再生します。そして、Aボタンを長押しした時に”02”というフォルダにある002_Sample.mp3を再生します。
下のブロックでは３つの要素で構成
- ボタンAを押すと関数”DFPlayer_SpecifyFile”関数を呼び出す
- 呼び出し時にフォルダ名（数字）とファイル名（数字）を指定する
- ”DFPlayer_SpecifyFile”関数で”7E FF 06 0F 00 フォルダ名 ファイル名 EF”をUARTで送信する
再生を停止
ここまでで再生ができるようになりましたが、いつまでも再生されているのも困るので停止させます。データシートで”Pause”と記載されている項目です。
以下のサンプルではボタンAを連続押したらMP3の再生が停止されます。
下のブロックでは以下２つの要素で構成
- ボタンAを押すと関数”DFPlayer_stop”関数を呼び出す
- ”DFPlayer_next”関数で”7E FF 06 0E 00 00 00 EF”をUARTで送信する
音量調整
MP3再生時の音量調整について、データシートで”Specify Volume”と記載されている項目です。
以下のサンプルではSetup時に音量20に固定しています。（0~30まで数字が大きいほど音量が大きくなります）
下のブロックでは以下２つの要素で構成
- 起動時に”DFPlayer_SetVolume”関数を呼び出す
- 呼び出し時に音量（20）を指定
- ”DFPlayer_SetVolume”関数で”7E FF 06 06 00 00 Volume EF”をUARTで送信する
基本的な操作は以上となります。
Arduino IDEという開発環境もあるですが、そっちの方法は他にも書いている人が多くいらっしゃるしライブラリも充実しているので調べてみてください。
ちなみにUiFlowは内部的にはMicroPythonという言語をブロックで表現しているようで簡単にMicroPythonとブロックの表示を切り替え可能です。
最後に
今回は”UiFlow”と”DFPlayer”を使ってMP3を再生してみました！
UiFlowもDFPlayerも初めてなので、少し間違っている箇所があるかもですがとりあえず動かす程度であればここに書いてある内容で実現できました。
実は今まで”Arduino IDE”しか使ったことが無かったのですが”Arduino IDE”が原因不明のエラーが出て治らないので使ってみたのですが、直感的で分かりやすくブロックを組み合わせて作れるのはなかなか良いですね。
UiFlowはM5stack社の販売しているUnitを使う分には子供でも簡単な一方で、電子部品を個別に買ってくる場合はライブラリが使えないのがデメリットになりますね。（データシートの内容を理解できれば何でもできますけど、そこまでして使う意味あるのか迷う）
この記事を最後まで見てくださってありがとうございました！
