สร้างอินเทอร์เน็ตวิทยุด้วย ESP32-S3 พร้อมหน้าตา Winamp สุดคลาสสิก

สร้างอินเทอร์เน็ตวิทยุที่เล่นสตรีม audio จากอินเทอร์เน็ตได้ พร้อมหน้าตาแบบ Winamp สุดนิสตัลเจีย ใช้ ESP32-S3 และจอ LCD 1.54 นิ้ว ง่ายๆ ด้วย Arduino IDE

📅 10 เมษายน 2026⏱️ 20 นาที🎯 ปานกลาง

ภาพรวมโปรเจกต์

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)

MAX98357AESP32-S3
VIN5V or 3.3V
GNDGND
BCLKGPIO 15
LRCGPIO 16
DINGPIO 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

  1. เปิด Arduino IDE
  2. ไปที่ Sketch → Include Library → Manage Libraries
  3. ค้นหา "ESP8266Audio" และกด Install
  4. ค้นหา "TFT_eSPI" และกด Install
  5. ค้นหา "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();
}

💡 อธิบายโค้ด:

  • Audio object จะจัดการ audio stream ทั้งหมด
  • drawWinampUI() วาดหน้าตา Winamp แบบง่ายๆ
  • • Callback functions จะแสดงข้อมูลเพลงที่ได้จาก stream
  • audio.connecttohost() เชื่อมต่อกับ audio stream URL

การทดสอบ

ขั้นตอนการทดสอบ

  1. อัปโหลดโค้ด: ใช้ Arduino IDE อัปโหลดโค้ดไปยัง ESP32-S3
  2. เปิด Serial Monitor: ตั้ง baud rate ที่ 115200
  3. ดูการเชื่อมต่อ WiFi: รอจนกว่าจะแสดง "WiFi connected"
  4. รอเล่น audio: ควรได้ยินเสียงจากลำโพงภายใน 5-10 วินาที
  5. ตรวจสอบหน้าจอ: ควรเห็นหน้าตา 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

CynoIoT

แพลตฟอร์ม IoT ที่ช่วยให้คุณเชื่อมต่อและควบคุมอุปกรณ์ได้ง่ายๆ

ช่องทางติดต่อ

  • Email: support@cynoiot.com
  • Line: @cynoiot

© 2026 CynoIoT. All rights reserved.