เลีอกโปรแกรมที่ข้องการดาวน์โหลด

📦 แคตตาล็อกดาวน์โหลดโปรแกรมและแอปพลิเคชัน

🔐 ใส่รหัสผ่านผู้ดูแลระบบ

ตำราปฏิบัติการ: การแปลงเว็บแอปพลิเคชัน ม้าเหล็กเรดิโอ เป็นไฟล์ .EXE

📚 ตำราปฏิบัติการฉบับสมบูรณ์: การสร้างโปรแกรมเดสก์ท็อป .EXE จากเว็บแอปม้าเหล็กเรดิโอ

ผู้บันทึก/ผู้พัฒนา: ลุงแจ่ม อารมณ์ดี
วัตถุประสงค์: ใช้เป็นคู่มือมาตรฐาน (Standard Operating Procedure) อ้างอิงขั้นตอนการทำโปรเจกต์ ถอดบทเรียนจากข้อผิดพลาด เพื่อใช้ทำงานในอนาคตโดยห้ามข้ามขั้นตอน

---

1. ภาพรวมสถาปัตยกรรมระบบ (Architecture)

• Frontend: ไฟล์ index.html ของเว็บแอป "ม้าเหล็กเรดิโอ" ซึ่งดึงไฟล์เสียงและรายชื่อเพลงแบบไดนามิก (Live/Dynamic Streaming) จาก Archive.org (Identifier: 005_20261024) ทำให้อัปเดตเพลงใหม่บนเว็บได้ทันทีโดยไม่ต้อง Build ตัวโปรแกรมใหม่
• Backend Framework: ใช้ Electron ควบคุมหน้าต่างแอปพลิเคชันเดสก์ท็อป
• Automation Builder: ใช้ GitHub Actions ในการคอมไพล์โค้ดบนคลาวด์ให้เป็นไฟล์ติดตั้ง `.EXE` สำหรับระบบปฏิบัติการ Windows

2. โครงสร้างไฟล์ทั้งหมดที่จำเป็นในโปรเจกต์

การเตรียมไฟล์ใน GitHub Repository (เช่น MalekRadio24Hrs) ต้องมีองค์ประกอบครบถ้วนดังนี้:

• index.html (หน้าตาแอปพลิเคชันและระบบเล่นเพลง)
• main.js (ไฟล์ควบคุมการเปิดหน้าต่างและวงจรชีวิตของแอป Electron)
• package.json (ไฟล์กำหนดค่าแพ็กเกจ ไลบรารี และเชื่อมโยงไอคอน)
• .github/workflows/build-exe.yml (ไฟล์คำสั่งรันระบบ GitHub Actions)
• icon.ico (ไฟล์ไอคอนรูปหูฟังประจำโปรแกรม)

3. รายละเอียดซอร์สโค้ดในแต่ละไฟล์

ก. ไฟล์ `main.js` (Main Process ควบคุมหน้าต่าง)

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    },
    autoHideMenuBar: true,
    title: "ม้าเหล็กเรดิโอ ออนไลน์ 24 ชั่วโมง"
  });

  win.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

// ⚠️ สำคัญ: ต้องใช้ app.quit() เท่านั้น ห้ามใช้ app.stop()
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

ข. ไฟล์ `package.json` (ตั้งค่าระบบและปิด Publish อัตโนมัติ)

{
  "name": "malek-radio-24hrs",
  "version": "1.0.0",
  "description": "Malek Radio 24Hrs Desktop App",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder --win --x64"
  },
  "build": {
    "productName": "Malek Radio 24Hrs",
    "win": {
      "icon": "icon.ico"
    },
    "publish": null
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.6.0"
  }
}

ค. ไฟล์ GitHub Actions Workflow (`.github/workflows/build-exe.yml`)

name: Build Desktop App (.exe)

on:
  push:
    branches: [ "main", "master" ]

jobs:
  build:
    runs-on: windows-latest

    steps:
    - name: Checkout Code
      uses: actions/checkout@v4

    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: 18

    - name: Install Dependencies
      run: npm install

    - name: Build Electron App
      run: npx electron-builder --win --x64

    - name: Upload Artifacts
      uses: actions/upload-artifact@v4
      with:
        name: Windows-EXE-App
        path: dist/*.exe

---

4. บันทึกข้อผิดพลาดและแนวทางแก้ไข (Troubleshooting & Lessons Learned)

❌ ข้อผิดพลาดที่ 1: ข้อจำกัดด้านขนาดความละเอียดไฟล์ไอคอน (Exit Code 1)

อาการที่พบ: ระบบ GitHub Actions แจ้งเตือนสถานะ Build ล้มเหลวในขั้นตอน Build Electron App พร้อมข้อความแสดงความผิดพลาด:

✖ image ...\icon.ico must be at least 256x256
Error: Process completed with exit code 1.

สาเหตุ: ไฟล์ภาพไอคอน `.ico` ที่อัปโหลดขึ้นไปมีความละเอียดพิกเซลต่ำกว่ามาตรฐาน 256x256 พิกเซล ซึ่งเป็นข้อกำหนดบังคับของไลบรารี electron-builder

วิธีแก้: จัดเตรียมไฟล์รูปภาพไอคอนที่มีขนาดความละเอียดสูง (256x256 หรือ 512x512 พิกเซลขึ้นไป), ตรวจสอบชื่อไฟล์ให้สะกดเป็นพิมพ์เล็กทั้งหมดว่า icon.ico ให้ตรงกับที่ระบุใน package.json แล้วอัปโหลดขึ้น GitHub ใหม่

❌ ข้อผิดพลาดที่ 2: ปัญหาตั้งชื่อไฟล์ไอคอนไม่ตรงกับ Configuration

อาการที่พบ: ระบบหาไฟล์ไอคอนไม่พบเนื่องจากตั้งชื่อไฟล์ในเครื่องหรือตอนอัปโหลดเป็นชื่ออื่น (เช่น favicon (1).ico)

วิธีแก้: บังคับตั้งชื่อไฟล์ไอคอนให้เป็น icon.ico เสมอทุกครั้งก่อนนำเข้าโปรเจกต์ เพื่อป้องกันการMismatch ของตัวแปรใน package.json

---

5. ขั้นตอนการตรวจสอบผลลัพธ์และการดาวน์โหลดโปรแกรม

1. เมื่อแก้ไขไฟล์ครบถ้วนและ Commit ขึ้น GitHub สำเร็จ ให้ไปที่แท็บ Actions บนหน้าเว็บไซต์ GitHub
2. รอจนกระทั่งกระบวนการทำงานเปลี่ยนสถานเป็นเครื่องหมายถูกสีเขียว (✅)
3. คลิกเข้าไปที่ชื่องานล่าสุด เลื่อนลงมาด้านล่างสุดในหัวข้อ Artifacts
4. คลิกดาวน์โหลดไฟล์ชื่อ Windows-EXE-App (ซึ่งเป็นไฟล์บีบอัด `.zip` บรรจุดโปรแกรมติดตั้ง `.EXE` เอาไว้)
5. แตกไฟล์ออกมา จะได้โปรแกรมเดสก์ท็อปพร้อมไอคอนหูฟังสีแดงสวยงาม พร้อมใช้งานและเผยแพร่

💡 บทสรุปสำหรับยึดถือปฏิบัติ: การแยกส่วนฐานข้อมูลเพลงให้อยู่บน Archive.org และใช้หน้าเว็บเป็นตัวกลางดึงข้อมูลสด ช่วยให้ไม่ต้องทำการ Build ไฟล์ `.EXE` ใหม่ทุกครั้งที่มีการเพิ่มเพลง ช่วยประหยัดเวลาและทำให้ระบบมีความคล่องตัวสูงสุด

คู่มือฉบับสมบูรณ์: การสร้างโปรแกรมเดสก์ท็อป .EXE จาก Electron และ GitHub Actions

📚 คู่มือและบันทึกขั้นตอนการพัฒนาโปรแกรม Electron App เป็นไฟล์ .EXE ผ่าน GitHub Actions

ผู้บันทึก/ผู้พัฒนา: ลุงแจ่ม อารมณ์ดี
วัตถุประสงค์: ใช้เป็นคู่มือมาตรฐาน (Standard Operating Procedure) สำหรับสร้างและแก้ไขปัญหาการคอมไพล์โปรแกรมเดสก์ท็อปจากศูนย์ (Clean Slate)

---

1. โครงสร้างพื้นฐานของโปรเจกต์ (Project Structure)

โปรเจกต์ประกอบด้วยไฟล์สำคัญหลักๆ ดังนี้:

• index.html: หน้าตาอินเทอร์เฟซและการทำงานของแอปพลิเคชัน (Frontend)
• main.js: ไฟล์ควบคุมกระบวนการหลักของระบบ Electron (Backend / Main Process)
• package.json: ไฟล์กำหนดค่า ติดตั้งไลบรารี และสคริปต์คำสั่งการทำงาน
• .github/workflows/build-exe.yml: ไฟล์ระบบอัตโนมัติ (GitHub Actions) สำหรับ Build ไฟล์ `.exe` บนคลาวด์

2. รายละเอียดโค้ดในแต่ละไฟล์หลัก

ก. ไฟล์ `main.js` (เวอร์ชันที่ถูกต้องสมบูรณ์)

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 450,
    height: 850,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    },
    autoHideMenuBar: true,
    title: "TEXAS INTECH Audio Rack"
  });

  win.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

// ⚠️ สำคัญ: ต้องใช้ app.quit() เท่านั้น ห้ามใช้ app.stop()
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

ข. ไฟล์ `package.json` (ตั้งค่าระบบและปิด Publish อัตโนมัติ)

{
  "name": "texas-intech-audio-rack",
  "version": "1.0.0",
  "description": "Pro 7-Layer Audio Rack Desktop App",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder --win --x64"
  },
  "build": {
    "win": {
      "icon": "icon.ico"
    },
    "publish": null
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.6.0"
  }
}

ค. ไฟล์ GitHub Actions Workflow (`.github/workflows/build-exe.yml`)

name: Build Desktop App (.exe)

on:
  push:
    branches: [ "main", "master" ]

jobs:
  build:
    runs-on: windows-latest

    steps:
    - name: Checkout Code
      uses: actions/checkout@v4

    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: 18

    - name: Install Dependencies
      run: npm install

    - name: Build Electron App
      run: npx electron-builder --win --x64

    - name: Upload Artifacts
      uses: actions/upload-artifact@v4
      with:
        name: Windows-EXE-App
        path: dist/*.exe

---

3. บันทึกปัญหาที่พบทั้งหมดและแนวทางแก้ไข (Troubleshooting Log)

❌ ปัญหาที่ 1: JavaScript Error ใน Main Process (คำสั่ง `app.stop()`)

อาการ: เมื่อติดตั้งโปรแกรมลงในเครื่อง และกดปิดโปรแกรม จะมีหน้าต่าง Error เด้งขึ้นมาแจ้งว่า TypeError: app.stop is not a function[cite: 4]

สาเหตุ: ในไลบรารีของ Electron ไม่มีฟังก์ชันคำสั่งชื่อ app.stop()

วิธีแก้: เข้าไปแก้ไขในไฟล์ main.js เปลี่ยนจากคำสั่ง app.stop(); เป็น app.quit(); ให้ถูกต้อง

❌ ปัญหาที่ 2: GitHub Actions Build Fail ด้วย Exit Code 1 (Missing GitHub Token)

อาการ: ไปตรวจสอบในแท็บ Actions บน GitHub แล้วพบสถานะ Failure ขัดข้องที่ขั้นตอนการ Build พร้อมฟ้องว่า GitHub Personal Access Token is not set, neither programmatically, nor using env "GH_TOKEN"[cite: 2, 7]

สาเหตุ: electron-builder พยายามอัปโหลดไฟล์ขึ้น GitHub Releases โดยอัตโนมัติ แต่ไม่มีสิทธิ์ Token ยืนยันตัวตน

วิธีแก้: เพิ่มค่าการตั้งค่า "publish": null ไว้ภายในบล็อก "build" ของไฟล์ package.json เพื่อปิดการเผยแพร่อัตโนมัติและเก็บไฟล์ติดตั้งไว้ใน Local Artifacts ของ Actions แทน

❌ ปัญหาที่ 3: ติดตั้งทับไม่ได้ ฟ้องว่าโปรแกรมไม่สามารถปิดได้ (Cannot be closed)

อาการ: ตอนรันตัวติดตั้ง `.exe` ตัวใหม่ทับลงเครื่อง มีหน้าต่างแจ้งเตือนว่าโปรแกรมกำลังทำงานอยู่และไม่สามารถปิดได้อัตโนมัติ[cite: 6]

สาเหตุ: มีกระบวนการ (Process) ของแอปพลิเคชันเวอร์ชันเก่าค้างรันอยู่เบื้องหลังใน Windows

วิธีแก้: 1. กดปุ่ม Ctrl + Shift + Esc เพื่อเปิด Task Manager
2. กดขยายหน้าต่างด้วยปุ่ม More details
3. ค้นหาชื่อโปรแกรมหรือ Electron แล้วคลิกขวาเลือก End task เพื่อบังคับปิดให้สนิท
4. ดับเบิลคลิกไฟล์ติดตั้งใหม่อีกครั้ง

---

4. วิธีการใส่ไอคอนรูปเฉพาะตัวให้กับแอปพลิเคชัน (.ICO)

1. เตรียมไฟล์รูปภาพแปลงเป็นนามสกุล .ico ขนาดแนะนำ 256x256 พิกเซล และตั้งชื่อไฟล์ว่า icon.ico
2. อัปโหลดไฟล์ icon.ico ขึ้นไปไว้ที่หน้าหลักของโปรเจกต์บน GitHub (ผ่านปุ่ม Add file -> Upload files)
3. กำหนดค่าเชื่อมโยงไอคอนในไฟล์ package.json ภายใต้หมวด "build" ดังนี้:

   "build": {
     "win": {
       "icon": "icon.ico"
     },
     "publish": null
   }

4. ทำการ Commit บันทึกไฟล์ และรอ GitHub Actions ทำการคอมไพล์โปรแกรมใหม่ เพียงเท่านี้ไฟล์ติดตั้ง `.exe` และไอคอนแอปพลิเคชันก็จะเปลี่ยนเป็นรูปที่คุณต้องการทันที

💡 ข้อสังเกต: หากไม่มีการเปลี่ยนแปลงไฟล์รูปภาพ icon.ico ในโปรเจกต์ ระบบจะดึงไอคอนเดิมมาใช้งานอย่างสม่ำเสมอทุกครั้งที่มีการ Build ใหม่ครับ

วิธีเปลี่ยนไอคอนแอปพลิเคชัน Electron เป็นรูปของคุณเอง

การเปลี่ยนรูปไอคอนแอปพลิเคชัน Electron ให้เป็นรูปของเราเอง

การปรับแต่งไอคอนของโปรแกรมเดสก์ท็อปให้เป็นเอกลักษณ์เฉพาะตัว สามารถทำตามขั้นตอนง่ายๆ ทีละขั้นตอนได้เลยครับ:

1. เตรียมไฟล์ไอคอน:
   • เตรียมรูปภาพที่ต้องการ (แนะนำให้แปลงเป็นไฟล์นามสกุล .ico ขนาด 256x256 พิกเซล) แล้วตั้งชื่อไฟล์ว่า icon.ico
2. อัปโหลดไฟล์ไอคอนขึ้น GitHub:
   • ไปที่หน้าโปรเจกต์ของคุณบน GitHub กดปุ่ม Add file -> Upload files แล้วลากไฟล์ icon.ico ของคุณไปวาง จากนั้นกดปุ่ม Commit changes เพื่อบันทึก
3. แก้ไขไฟล์ package.json:
   • คลิกเข้าไปที่ไฟล์ package.json บน GitHub แล้วกดปุ่มรูปดินสอ (Edit this file) เพื่อแก้ไข
   • เพิ่มคำสั่งระบุไฟล์ไอคอนเข้าไปในส่วนของ "build" ให้มีโครงสร้างตามตัวอย่างด้านล่างนี้ครับ:

ตัวอย่างคำสั่งการตั้งค่าในไฟล์ package.json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Desktop App",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder --win --x64"
  },
  "build": {
    "win": {
      "icon": "icon.ico"
    },
    "publish": null
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.6.0"
  }
}

เมื่อแก้ไขเสร็จเรียบร้อยแล้ว ให้กด Commit changes และรอ GitHub Actions ทำการ Build ไฟล์ .exe ใหม่ เพียงเท่านี้แอปพลิเคชันของคุณก็จะแสดงไอคอนใหม่ตามต้องการแล้วครับ!

📻 ม้าเหล็กเรดิโอ 24 ชั่วโมง (Malek Radio 24 Hrs)

📻 ม้าเหล็กเรดิโอ 24 ชั่วโมง (Malek Radio 24 Hrs)

สถานีเพลงและวิทยุออนไลน์สตรีมสดตลอด 24 ชั่วโมง ฟังเพลินต่อเนื่องด้วยระบบเล่นเพลงอัตโนมัติ (Auto-Next) และระบบซิงค์เพลงจากคลังออนไลน์ พัฒนาโดย ลุงแจ่ม อารมณ์ดี (สวนราชินี กำแพงเพชร) อนุญาตให้ทุกท่านใช้งานและรับฟังเป็นฟรีแวร์ตลอดไป!

▶ คลิกฟังม้าเหล็กเรดิโอออนไลน์

ลจ

ลุงแจ่ม อารมณ์ดี

สวนราชินี กำแพงเพชร

Live Global Radio

ม้าเหล็กเรดิโอ 24 ชั่วโมง

สตรีมสดสถานีวิทยุยอดนิยมจากทั่วทุกมุมโลก ฟังเพลินตลอดวัน

ร้านค้าออนไลน์

Shopee ลุงแจ่ม

เยี่ยมชมผลงาน

เว็บบล็อกของเรา

พูดคุยทักทาย

Facebook ลุงแจ่ม

Live

กำลังโหลดสถานีวิทยุ...

เชื่อมต่อฐานข้อมูลสตรีมมิ่งสากล

00:00 00:00

เลือกสถานี / หมวดหมู่:

สถานีเพลงทั่วโลก สวนราชินี โดยลุงแจ่ม อารมณ์ดี 24 ชั่วโมง © 2026

โปรแกรมฟังเพลงสไตล์ Winamp ยุค 90s สุดเก๋า

ปล่อยไฟล์เพลงตรงนี้เพื่อเล่นทันที!

(Drop MP3/WAV files here to play)

DROIDAMP MOBILE

320 kbps 44.1 kHz

เวลาเพลง (Track Time)

00:00 [ผ่านไป]

แตะเพื่อเปลี่ยน

ยินดีต้อนรับสู่ Droidamp - เพิ่มเพลงจากเครื่องของคุณเพื่อเริ่มฟังเพลงได้เลย!

STEREO 44.1kHz

SHUFFLE | REPEAT

0:00 0:00

🔊 ความดัง (VOL) 80%

🎧 สมดุล (BAL) CENTER

กดตรงนี้เพื่อเลือกเพลง หรือ ลากไฟล์เพลงมาวางที่นี่

0 เพลง

🎚️ อีคิวปรับแต่งเสียง 10 แบนด์

เลือกโหมดเสียงสำเร็จรูป (Presets):

+12dB 0dB -12dB

วิชวลไลเซอร์กราฟิก แท่งสเปกตรัม (Classic Bars) คลื่นเสียง (Oscilloscope Wave) นีออนซินธ์เวฟ (Neon Synthwave) เปลวไฟ (Flame Spectrum)

แตะหน้าจอเพื่อเปลี่ยนโหมด

สกิน: 🟢 Classic Winamp 🟣 Cyberpunk Neon 🟠 Retro CRT Amber 🟡 Gold Luxury

Droidamp v2.7 Touch EQ

ค้นหาเพลง YouTube

พิมพ์ชื่อเพลงเพื่อค้นหาบน YouTube โดยตรง:

💡 ระบบจะเปิดหน้าค้นหา YouTube ในแท็บใหม่ทันที