サイトアイコン KOKENSHAの技術ブログ

ESP32で作るインタネットラジオ

カワシマ

みなさん、おはようございます！

早くも5月の最後になりましたね！

私は最近電子工作にハマって、ものを作る欲が爆発しています！笑

なぜかというと、電子工作は、電子回路の知識も必要で、最近だとマイクロコントローラーを使う場合も多く、そうすると必然的に、プログラミングのスキルも必要になります。その上、完成したものに格好いいケースに入れるために、3Dモデリングや、３Dプリンターで出力することも最近はやっていますね。（他の方法も当然たくさんありますが）

さらに、ロボットのような動く機構がある電子工作の内容だと、そういうパーツのデザインなどもあり、電子工作こそFullStackだと思うようになりました！笑

Webシステム開発のFullStackも結構ですが、電子工作のFullStackもなかなか楽しいなと最近思います。

それで、少し話が逸れますが、最近Prusa i3 MK3S+ というプリンターも買って、綺麗なものを出力出せるようになりました！

これから、電子工作やPrusaや3Dプリンターで綺麗なものを出力方法などについてもnoteを書こうかなと思います。引き続きよろしくお願いします！

あと、余談もう一つ！

私の２冊目の本が今鋭意編集中で！早ければ6月出版されるのかな？作業も少し残って、出版社の方も色々調整がありますので、最終確定ではないですが、決まりましたら、またご案内します！

１冊目はこちらです！よかったらお読みください！

https://amzn.to/3fu6O6R

 

では、早速今回のESP32で作ったインタネットラジオの話をしましょう！

お忙しい人は、まずこちらのYouTubeビデオをご覧ください！

二つのビデオがどれも私のチャンネルのトップ視聴率になっています！見る価値があります！笑

 

Part-2はグローバルも意識して、英語の音声をつけてみました！

そのせいか、めっちゃ時間がかかりました！

ビデオの編集とか慣れるともうちょっと速くなれるといいですね！よかったらチャンネル登録もよろしくお願いします！

ではまずPart-1から！

目次

Part-1

 

Part-2

説明

Part-1は見た通り、ブレッドボードの上に組んだだけです。特にそれ以上特別なことはやっていません。

でもこれだけでも、感動ですね。こんな小さいチップで、インタネットに繋がって、インタネットからとってきたデータを音声に変換して、我々の耳を通して、脳を楽しませてくれています！

 

デザインを考える

Part-2は色々工夫しました！

最初はこんなことを考えていました！

 

ダイヤルをつけて、インタネットラジオのラジオ局の選局に使おうかなと思いました！

また、TFT3.5インチのディスプレーがあったから、これも使おうかなと考えていました！できれば、選局するときに格好いいアニメーションの演出もあるといいなと考えていました。これについて、あとでもう少し話をします！

色々考えているうちに、デザインがだんだん固まりました。

 

上のツイートにあるような、黄金色のダイヤルを作りました！笑

ダイヤルが同時にその下にあるESP32モジュールのケースの蓋にもあります！一石二鳥です！

また、上のツイートにあるように、PCBも用意しましたが、結局これをやめて、Arduinoの拡張PCBを使いました！そっちの方が形がArduinoにあっていますし、脱着が楽です。

 

ダイヤルの配線とプログラミング

 

配線はPCBに半田づけをしましたので、結構時間がかかりました！

配線に誤りがないかと細心の注意を払ってやりました。集中しすぎて疲れました！笑

でも上のツイートのように、RGBのLEDが点灯して、まず万歳です！笑

他の部分、TFT液晶ディスプレーも配線を終えました。ここで事前に決めなければいけないのは、それぞれのパーツが使うGPIOのピンです。

共有はできないので、事前に配分を決めて、半田づけをしなければいけないです。はんだ付けしたあと、干渉がわかると、結構面倒くださいことになります！

ESP32のGPIOのピンが多いですが、制約もあります。特定の機能を使えないPピンもありますので、ESP32のデータシートなどを参照して、確認してください！

 

液晶ディスプレーの動作確認

その後、無事液晶ディスプレーも動作して、ラジオ局の局名を表示できるようになりました！もちろんこの段階ではまだ暫定なテストプログラムです。ダイヤルを回しても何も変化がありません。

 

ちなみに、開発環境はこれです！笑

 

選局機能の追加

フォントのサイズを調整して、ダイヤルを回すと、ラジオ局が切り替える部分のプログラムも追加しました！

アニメーションをつけるのは今回諦めました！

理論上実現することが可能ですが、今回YouTubeビデオも早く公開したいので、ダイヤルを回すときのアニメーションを Part-3でもやろうかなと思います。今回はお見送りです。

 

外部のアンプと繋ぐ

そうすると、外部のオーディオアンプと繋ぐと結構いい感じになりました！笑

改良1

ディスプレイの表示をちょっとよくしました！

それで数日も溶けましたから、週末になったから、一旦休憩を挟みます！

改良2

でも！

やっぱり休んでいられないので、改良の続きをやりました！この日は土曜日だったかな。フォントの色などを変えてみました！

まだ、プログラムの中で見えませんが、ダイヤルの部分（ロータリエンコーダー）のプログラムを別のライブラリに切り替えて、実装を変えました！

改良３

選んだ局と洗濯中の局（番号）を別々にしてみました！

少しだけわかりやすくなったかな、変えて分かり辛くなったという人もいますが、みなさんどう思いますか？

最終形は上のPart-2のビデオとなります！

詳細の作る過程が全部収録されていますので、よかったら見てください！

概要

ESP32を使ったインタネットラジオ！ その二 (PCM5102 + TFT 3.5 inch display + rotary encoder+ RGB LED)
このビデオは、インタネットラジオ製作の第二部です！

このプロジェクトで使っている重要ライブラリはこちらです！
1) https://github.com/schreibfaul1/ESP32-audioI2S
2) https://github.com/igorantolic/ai-esp32-rotary-encoder
3) https://github.com/FastLED/FastLED

ソースコード

ソースコードは今整理中で、そのうちGitHubに公開する予定です。しばらくしたらまた見にきてください。

第３部も作るかもしれませんので、チャンネル登録をよろしくお願いします！

Twitterも電子工作や3Dプリンターに呟くので、フォローよろしくお願いします！

Facbookグループ

Facebookもこんかグループをやっています。「【趣味】の電子工作、Electronics、RaspberryPi、Arduino系、ESP32系/M5Stack、3Dプリント、ロボット、AIなど」

よかったら、参加してみてください！公開グループです。

https://www.facebook.com/groups/247733226639836

 

 

ではまた！もしPart-3 を作ったらまた記事にしますね！

ご機嫌よう！

モバイルバージョンを終了