📑 เนื้อหาในบทความ
ภาพรวมโปรเจกต์
Internet Radio หรือ วิทยุออนไลน์ คือเครื่องเล่นเสียงที่สามารถรับสัญญาณ audio stream ผ่านอินเทอร์เน็ตได้ ในยุคที่ WiFi แพร่หลาย การทำ Internet Radio ด้วย ESP32-S3 จึงเป็นโปรเจกต์ที่น่าสนใจมาก โดยเฉพาะเมื่อเราตกแต่งหน้าตาให้เป็นแบบ Winamp สุดคลาสสิก
🎯 จุดเด่นของโปรเจกต์:
- ใช้ ESP32-S3 ที่มีประสิทธิภาพสูงและราคาประหยัด
- หน้าตา Winamp สุดคลาสสิกน่าใช้
- รองรับ Audio stream หลากหลายรูปแบบ (MP3, AAC)
- ประหยัดไฟด้วย Deep Sleep Mode
- เชื่อมต่อ CynoIoT Platform สำหรับ Remote Control
⚠️ ความรู้พื้นฐานที่ต้องมี:
- พื้นฐานการใช้งาน Arduino IDE
- ความเข้าใจเรื่อง WiFi และ Internet Protocol
- พื้นฐานการใช้งาน ESP32
อุปกรณ์ที่ต้องใช้
Hardware Components
- •ESP32-S3 Development Board: แนะนำ Waveshare ESP32-S3-LCD-1.54 หรือบอร์ดที่มีจอ LCD ในตัวราคา ~฿350-500
- •Speaker / Amplifier: MAX98357A I2S Amplifier หรือ ลำโพงพร้อมแอมป์ราคา ~฿80-150
- •MicroSD Card (Optional): สำหรับเก็บ Playlist และ Configราคา ~฿50-100
- •3.3V Power Supply: หรือใช้ USB Powerราคา ~฿50-80
- •Push Buttons (Optional): สำหรับควบคุมเพลงราคา ~฿10-20
💡 เคล็ดลับการเลือกอุปกรณ์:
- • เลือกบอร์ด ESP32-S3 ที่มี PSRAM อย่างน้อย 8MB เพื่อประมวลผล audio
- • I2S Amplifier เหมาะสำหรับเล่น audio คุณภาพสูง
- • จอ LCD 1.54 นิ้ว 240x240 พิกเซลเพียงพอสำหรับแสดง UI
การต่อสาย
หากใช้ Waveshare ESP32-S3-LCD-1.54 จอ LCD จะต่อมาในตัวบอร์ดอยู่แล้ว เหลือแค่ต่อ I2S Amplifier เข้ากับ ESP32-S3
I2S Amplifier Wiring (MAX98357A)
| MAX98357A | ESP32-S3 |
|---|---|
| VIN | 5V or 3.3V |
| GND | GND |
| BCLK | GPIO 15 |
| LRC | GPIO 16 |
| DIN | GPIO 17 |
⚠️ ข้อควรระวัง:
- • ตรวจสอบแรงดันไฟฟ้าก่อนต่อ I2S Amplifier
- • GPIO pins สำหรับ I2S อาจต่างกันในแต่ละบอร์ด
- • ใช้ลำโพง 4-8 โอห์มกับ MAX98357A
การเขียนโปรแกรม
เราจะใช้ Arduino IDE ในการเขียนโปรแกรม โดยต้องติดตั้ง Library ที่จำเป็นก่อน
Libraries ที่ต้องติดตั้ง
- ✓ESP8266Audio: สำหรับ decode audio stream (MP3, AAC)
- ✓WiFiClientSecure: สำหรับ HTTPS connections (built-in)
- ✓TFT_eSPI: สำหรับควบคุมจอ LCD
- ✓ArduinoJson: สำหรับ parse playlist config
วิธีติดตั้ง Library
- เปิด Arduino IDE
- ไปที่
Sketch → Include Library → Manage Libraries - ค้นหา "ESP8266Audio" และกด Install
- ค้นหา "TFT_eSPI" และกด Install
- ค้นหา "ArduinoJson" และกด Install เวอร์ชันล่าสุด
โค้ดตัวอย่าง
นี่คือโค้ดพื้นฐานสำหรับ Internet Radio พร้อมหน้าตา Winamp แบบง่าย
/*
* ESP32-S3 Internet Radio with Winamp-style UI
* ตัวอย่างพื้นฐานสำหรับเล่น audio stream
*
* Hardware: ESP32-S3 + LCD 1.54" + I2S Amplifier
* Author: CynoIoT
* Date: April 2026
*/
#include <WiFi.h>
#include <Audio.h>
#include <TFT_eSPI.h>
#include <SPI.h>
// WiFi Credentials
const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";
// Audio Stream URL (ตัวอย่าง: วิทยุออนไลน์ไทย)
const char* streamURL = "http://stream.radio.co/s8...;stream.mp3";
// I2S Pin Configuration (สำหรับ Waveshare ESP32-S3-LCD-1.54)
#define I2S_BCLK 15
#define I2S_LRC 16
#define I2S_DIN 17
// Audio Object
Audio audio;
// Display Object
TFT_eSPI tft = TFT_eSPI();
// Winamp UI Variables
String currentStation = "Radio Thailand";
String currentTrack = "Loading...";
int volume = 128; // 0-255
boolean isPlaying = false;
// ฟังก์ชันแสดงหน้าตา Winamp
void drawWinampUI() {
tft.fillScreen(TFT_BLACK);
// หัวต่าง Winamp
tft.fillRect(0, 0, 240, 30, TFT_NAVY);
tft.setTextColor(TFT_WHITE, TFT_NAVY);
tft.setTextSize(2);
tft.setCursor(5, 5);
tft.println("Winamp ESP32");
// แสดงชื่อสถานี
tft.setTextColor(TFT_GREEN, TFT_BLACK);
tft.setTextSize(1);
tft.setCursor(5, 40);
tft.println("Station:");
tft.setCursor(5, 55);
tft.println(currentStation);
// แสดงชื่อเพลง
tft.setTextColor(TFT_YELLOW, TFT_BLACK);
tft.setCursor(5, 80);
tft.println("Now Playing:");
tft.setCursor(5, 95);
tft.println(currentTrack);
// Volume bar
tft.setTextColor(TFT_WHITE, TFT_BLACK);
tft.setCursor(5, 130);
tft.println("Volume:");
tft.fillRect(5, 145, volume, 10, TFT_BLUE);
// Status
if (isPlaying) {
tft.setTextColor(TFT_GREEN, TFT_BLACK);
tft.setCursor(5, 170);
tft.println("♪ PLAYING ♪");
} else {
tft.setTextColor(TFT_RED, TFT_BLACK);
tft.setCursor(5, 170);
tft.println("■ STOPPED ■");
}
}
// ฟังก์ชัน setup
void setup() {
Serial.begin(115200);
// เริ่มต้นจอ LCD
tft.begin();
tft.setRotation(1);
tft.fillScreen(TFT_BLACK);
// แสดงหน้าเริ่มต้น
tft.setTextColor(TFT_WHITE, TFT_BLACK);
tft.setTextSize(2);
tft.setCursor(20, 100);
tft.println("ESP32-S3 Radio");
tft.setTextSize(1);
tft.setCursor(30, 130);
tft.println("Connecting to WiFi...");
// เชื่อมต่อ WiFi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
// ตั้งค่า Audio
audio.setPinout(I2S_BCLK, I2S_LRC, I2S_DIN);
audio.setVolume(volume); // 0...21
// แสดงหน้าตา Winamp
drawWinampUI();
// เริ่มเล่น audio stream
audio.connecttohost(streamURL);
isPlaying = true;
drawWinampUI();
}
// ฟังก์ชัน loop
void loop() {
audio.loop();
// ตรวจสอบสถานะ audio
if (audio.isRunning()) {
// แสดงข้อมูล audio
currentTrack = "Stream: " + String(audio.getAudioFileCurrentTime());
drawWinampUI();
}
}
// ฟังก์ชัน callback สำหรับ audio events
void audio_info(const char *info) {
Serial.print("info ");
Serial.println(info);
}
void audio_id3data(const char *info) {
Serial.print("id3data ");
Serial.println(info);
currentTrack = info;
drawWinampUI();
}
void audio_eof_mp3(const char *info) {
Serial.print("eof_mp3 ");
Serial.println(info);
}
void audio_showstation(const char *info) {
Serial.print("station ");
Serial.println(info);
currentStation = info;
drawWinampUI();
}
void audio_showstreamtitle(const char *info) {
Serial.print("streamtitle ");
Serial.println(info);
currentTrack = info;
drawWinampUI();
}💡 อธิบายโค้ด:
- •
Audioobject จะจัดการ audio stream ทั้งหมด - •
drawWinampUI()วาดหน้าตา Winamp แบบง่ายๆ - • Callback functions จะแสดงข้อมูลเพลงที่ได้จาก stream
- •
audio.connecttohost()เชื่อมต่อกับ audio stream URL
การทดสอบ
ขั้นตอนการทดสอบ
- อัปโหลดโค้ด: ใช้ Arduino IDE อัปโหลดโค้ดไปยัง ESP32-S3
- เปิด Serial Monitor: ตั้ง baud rate ที่ 115200
- ดูการเชื่อมต่อ WiFi: รอจนกว่าจะแสดง "WiFi connected"
- รอเล่น audio: ควรได้ยินเสียงจากลำโพงภายใน 5-10 วินาที
- ตรวจสอบหน้าจอ: ควรเห็นหน้าตา Winamp และข้อมูลเพลง
✅ สัญญาณว่าโปรเจกต์ทำงานได้:
- • ได้ยินเสียงเพลงชัดเจนจากลำโพง
- • หน้าจอแสดงชื่อสถานีและเพลงถูกต้อง
- • Serial Monitor ไม่แสดง error
- • audio stream ไม่กระตุกหรือหยุดเล่น
ปัญหาที่พบบ่อยและวิธีแก้ไข
ปัญหา: ESP32 เชื่อมต่อ WiFi ไม่ได้
อาการ: Serial Monitor แสดง "WiFi not connected" หรือค้างที่ "Connecting..."
สาเหตุ: ชื่อ WiFi หรือรหัสผ่านผิด, สัญญาณอ่อน, หรือ ESP32 อยู่ไกลเกินไป
วิธีแก้ไข:
- ตรวจสอบชื่อ WiFi และรหัสผ่าน
- ย้าย ESP32 ให้ใกล้ Router มากขึ้น
- ลองใช้ WiFi ความถี่ 2.4GHz (ESP32 ไม่รองรับ 5GHz)
ปัญหา: เล่น audio แล้วกระตุกหรือหยุดเล่น
อาการ: เสียงกระตุก, หยุดเล่น, หรือ audio buffer ไม่เพียงพอ
สาเหตุ: อินเทอร์เน็ตช้า, Audio buffer เล็กเกินไป, หรือ CPU ไม่เพียงพอ
วิธีแก้ไข:
- เพิ่มขนาด audio buffer ใน code
- ใช้ audio stream ที่มี bitrate ต่ำกว่า (128kbps แทน 320kbps)
- เพิ่ม PSRAM หากบอร์ดรองรับ
ปัญหา: หน้าจอไม่แสดงผล
อาการ: จอ LCD ดำมืดหรือแสดงผลผิดปกติ
สาเหตุ: Library TFT_eSPI ไม่ได้ config ให้กับจอรุ่นนี้
วิธีแก้ไข:
- แก้ไขไฟล์ User_Setup.h ใน TFT_eSPI library
- ตั้งค่าจอให้ตรงกับรุ่นที่ใช้ (ST7789 หรือ ILI9341)
- ตรวจสอบการต่อสาย SPI
ขั้นตอนถัดไป
🚀 ไอเดียต่อยอดโปรเจกต์
- 🎛️เพิ่มปุ่มควบคุม: เพิ่มปุ่ม Play/Pause, Next, Previous และ Volume
- 📱เชื่อมต่อ CynoIoT: Remote control ผ่าน CynoIoT Platform
- 💾บันทึก Playlist: เก็บรายชื่อสถานีวิทยุใน MicroSD Card
- 🔊เพิ่ม Visualizer: แสดงคลื่นเสียงแบบ Winamp
- ⏰Alarm Clock: ตั้งเวลาปลุกด้วยวิทยุออนไลน์
สรุป
ในบทความนี้เราได้เรียนรู้วิธีสร้าง Internet Radio ด้วย ESP32-S3 และจอ LCD 1.54 นิ้ว พร้อมหน้าตา Winamp สุดคลาสสิก โปรเจกต์นี้เหมาะสำหรับผู้ที่ต้องการเรียนรู้เรื่อง:
- Audio streaming บน ESP32
- การใช้งาน I2S Protocol
- การสร้าง UI แบบ Winamp บบจอ LCD เล็กๆ
- การเชื่อมต่อ WiFi และเล่น audio stream
หวังว่าบทความนี้จะเป็นประโยชน์และช่วยให้คุณสร้าง Internet Radio สุดเท่ได้ด้วยตัวเอง! หากมีคำถามหรือต้องการคำแนะนำเพิ่มเติม สามารถติดต่อเราได้ที่ CynoIoT