Overlay OBS โชว์ชื่อเพลงตอนไลฟ์

คู่มือติดตั้งทีละขั้น

ทำครั้งเดียว ใช้เวลาราว 5 นาที ทุกขั้นทำใน OBS Studio บนเครื่องที่ใช้ไลฟ์

0เตรียมของก่อนเริ่ม

• OBS Studio เวอร์ชัน 28 ขึ้นไป — ดูเวอร์ชันได้ที่ Help → About รุ่นนี้มี WebSocket มาในตัว ไม่ต้องลงปลั๊กอินเพิ่ม
• source ที่เล่นเพลงจากไฟล์ในเครื่อง อย่างใดอย่างหนึ่ง:
  • Media Playlist Source (ปลั๊กอินฟรีของ CodeYan) — แนะนำ เล่นทั้งโฟลเดอร์ต่อกัน และ overlay ได้ชื่อโฟลเดอร์มาทำป้ายแนวเพลงด้วย · ดาวน์โหลดที่ หน้าปลั๊กอินบนเว็บ OBS (กด Go to download เลือกไฟล์ตามระบบ เช่น Windows ใช้ตัวติดตั้ง .exe แล้วเปิด OBS ใหม่) · ซอร์สโค้ดบน GitHub · ติดตั้งแล้วจะมีตัวเลือก Media Playlist Source ในเมนู + ของช่อง Sources
    เลือกรุ่นปลั๊กอินตามเวอร์ชัน OBS ของคุณ (ดูที่ Help → About): OBS 31 ขึ้นไป ใช้รุ่นล่าสุด · OBS 30 รุ่นล่าสุดลงไม่ได้ แนะนำอัปเดต OBS (ปลั๊กอินรุ่นเก่า 0.0.5 ในหน้า Releases รองรับ OBS 30 แต่เรายังไม่ได้ทดสอบกับ overlay นี้) · OBS 28–29 ไม่มีรุ่นให้ลง ใช้ Media Source ด้านล่างแทน หรืออัปเดต OBS
    ไม่แน่ใจก็ไม่เป็นไร — ถ้า overlay หา source ไม่เจอและ OBS ต่ำกว่า 31 กล่องเตือนจะบอกเวอร์ชัน OBS ของคุณพร้อมทางแก้ให้
  • Media Source ที่มากับ OBS — ใช้ได้ แต่เล่นได้ทีละไฟล์
  • ⚠️ VLC Video Source ยังไม่รองรับ เพราะ OBS ไม่บอกว่ากำลังเล่นไฟล์ไหนในรายการ
• ใช้กับ Streamlabs Desktop และ TikTok LIVE Studio ไม่ได้ — สองโปรแกรมนี้ไม่มี obs-websocket

1ตั้งค่าและดาวน์โหลด

1. เลือกธีม ตั้งชื่อช่อง ใส่โลโก้ และข้อความวิ่งในฟอร์มด้านบน — พรีวิวเปลี่ยนตามทันที
2. ในหัวข้อ 🔌 การเชื่อมต่อ OBS พิมพ์ชื่อ source ที่เล่นเพลงให้ตรงกับในช่อง Sources ของ OBS (ค่าเริ่มต้นคือ Media Playlist Source ซึ่งเป็นชื่อที่ OBS ตั้งให้เองตอนเพิ่ม source ชนิดนี้)
3. ถ้า OBS ตั้งรหัสผ่าน WebSocket ไว้ ให้ใส่รหัสผ่านด้วย (ดูขั้นที่ 3)
4. กด ⬇️ ดาวน์โหลดชุด overlay (.zip)

2แตกไฟล์ไว้ในที่ถาวร

1. คลิกขวาที่ไฟล์ thaitoolbox-overlay.zip → Extract All… (Mac ดับเบิลคลิก)
2. ย้ายโฟลเดอร์ thaitoolbox-overlay ไปไว้ที่ที่จะไม่ถูกลบ เช่น D:\Live\thaitoolbox-overlay — อย่าใช้ไฟล์จากในโฟลเดอร์ Downloads หรือเปิดจากใน zip ตรง ๆ เพราะถ้าย้ายหรือลบทีหลัง overlay ใน OBS จะหายไปทันที
3. ในโฟลเดอร์จะมี overlay.html (ตัว overlay) · config.js (ค่าที่ตั้ง) · covers (ใส่ปกเพลง) · backgrounds (วิดีโอพื้นหลังที่แถม) · และคู่มือนี้ฉบับออฟไลน์

3เปิด WebSocket ใน OBS

1. ใน OBS ไปที่ Tools → WebSocket Server Settings
2. ติ๊ก ☑ Enable WebSocket server · ช่อง Server Port ปล่อยเป็น 4455
3. Enable Authentication แนะนำให้เปิดไว้ แล้วกด Show Connect Info เพื่อคัดลอก Server Password มาใส่ในหน้านี้ก่อนดาวน์โหลด
4. กด Apply แล้ว OK — ต้องกด Apply ถ้ากดปิดหน้าต่างเฉย ๆ ค่าจะไม่ถูกบันทึก และ overlay จะต่อไม่ได้

4เพิ่ม overlay เป็น Browser Source

1. ในช่อง Sources กด + → Browser → ตั้งชื่อเช่น Overlay → OK
2. ติ๊ก ☑ Local file แล้วกด Browse เลือกไฟล์ overlay.html ในโฟลเดอร์ที่แตกไว้
3. ตั้ง Width 1920 และ Height 1080 — overlay ออกแบบบนขนาดนี้แล้วย่อขยายเองให้พอดี
4. ติ๊ก Use custom frame rate แล้วใส่ให้ตรงกับ FPS ของ OBS (ดูที่ Settings → Video) ไม่งั้นข้อความวิ่งจะกระตุก
5. ไม่ต้องติ๊ก Shutdown source when not visible — ถ้าติ๊ก แอนิเมชันจะเริ่มใหม่ทุกครั้งที่สลับ scene
6. กด OK แล้วลาก source Overlay ขึ้นไปบนสุดของรายการ Sources เพื่อให้อยู่ทับภาพอื่น

ถ้ายังไม่ได้ไลฟ์ แล้วเห็นกล่องสีแดงมุมขวาบน แปลว่าต่อ OBS ไม่ได้ — กล่องจะบอกสาเหตุ ดูตารางแก้ปัญหา · กล่องนี้ขึ้นเฉพาะตอนยังไม่ได้ไลฟ์ ผู้ชมจะไม่เห็น

5ใส่ปกเพลง (ไม่บังคับ)

วางรูปไว้ในโฟลเดอร์ covers ตั้งชื่อรูปให้ตรงกับชื่อไฟล์เพลง (ไม่รวมนามสกุล) ใช้ได้ทั้ง .jpg .png และ .webp เพลงที่ไม่มีปกจะแสดงแผ่นเสียงหมุนแทน

⚠️ ระวังเครื่องหมายที่หน้าตาคล้ายกันแต่เป็นคนละตัว เช่น ' กับ ’ หรือ - กับ – — วิธีที่ชัวร์ที่สุดคือคัดลอกชื่อไฟล์เพลงมาวางเป็นชื่อรูป

6ข้อความวิ่งที่แก้ระหว่างไลฟ์ได้ (ไม่บังคับ)

1. ในหัวข้อ 📜 ข้อความวิ่ง เลือก อ่านจาก Text ใน OBS แล้วดาวน์โหลดใหม่
2. ใน OBS กด + → Text (GDI+) ตั้งชื่อให้ตรงกับช่อง “ชื่อ Text source” (ค่าเริ่มต้น Ticker)
3. พิมพ์ข้อความ บรรทัดละ 1 ข้อความ ใส่ {song} แทนชื่อเพลงได้
4. กดรูปตาหน้า source Ticker เพื่อซ่อน — overlay อ่านข้อความได้แม้ซ่อนอยู่
5. อยากเปลี่ยนข้อความระหว่างไลฟ์ ดับเบิลคลิก Ticker แก้ข้อความ แถบวิ่งเปลี่ยนตามภายใน 1 วินาที

7วิดีโอพื้นหลัง และเล่น MV ต่อเนื่อง (ไม่บังคับ)

วิดีโอพื้นหลังวนซ้ำ — overlay พื้นโปร่งใส วางทับวิดีโอได้เลย ในชุดดาวน์โหลดเลือกแถมวิดีโอได้ 3 แบบ อยู่ในโฟลเดอร์ backgrounds: day.mp4 เมืองริมน้ำตอนกลางวัน · night.mp4 เมืองริมน้ำตอนกลางคืน (1280×720) · beach-cafe.mp4 คาเฟ่ริมทะเลยามค่ำ กาแฟควันกรุ่น (1920×1080 เข้าคู่กับธีม Lo-fi Café) ทุกไฟล์ยาว 10 วินาที ไม่มีเสียง เล่นวนได้ · จากช่อง Papa's Pick ใช้เป็นพื้นหลังไลฟ์ได้ฟรี

1. กด + → Media Source → Browse เลือกไฟล์วิดีโอ (เช่น backgrounds\night.mp4) ติ๊ก ☑ Loop และ ☑ Use hardware decoding (ช่วยให้เครื่องไม่หนัก)
2. ใช้วิดีโอของตัวเอง ให้ปิดเสียงวิดีโอพื้นหลังที่แผง Audio Mixer (กดรูปลำโพง) ไม่งั้นเสียงจะตีกับเพลง — ไฟล์ที่แถมไม่มีเสียงอยู่แล้ว
3. วิดีโอ 1280×720 บนจอ 1920×1080: คลิกขวาที่ source → Transform → Stretch to screen
4. อยากสลับกลางวัน/กลางคืน ทำ 2 scene แยกกัน หรือใส่ทั้งสองไฟล์ใน scene เดียวแล้วกดรูปตาเปิด–ปิดสลับกัน
5. เรียงลำดับใน Sources จากบนลงล่าง: Overlay → source เพลง → วิดีโอพื้นหลัง
6. overlay ไม่สับสนกับวิดีโอพื้นหลัง เพราะอ่านชื่อจาก source เพลงที่ตั้งไว้ตัวเดียว

เล่น MV ต่อเนื่อง — วางไฟล์ MV (.mp4 .mov .mkv .webm) ไว้ในโฟลเดอร์เพลย์ลิสต์เดียวกับเพลงได้เลย Media Playlist Source เล่นวิดีโอต่อกันเหมือนเล่นเพลง overlay อ่านชื่อจากชื่อไฟล์ และหลบให้ภาพ MV เองตามตัวเลือก “เมื่อกำลังเล่น MV” ในหัวข้อ 🎵 การ์ดเพลง (ค่าเริ่มต้นคือย่อเป็นแถบล่าง) — เพลย์ลิสต์ที่ผสมไฟล์เสียงกับ MV ตอนเล่นไฟล์เสียงการ์ดใหญ่จะลอยบนวิดีโอพื้นหลัง พอถึง MV ก็ย่อหลบเองโดยไม่ต้องสลับ scene

ถ้าเพลย์ลิสต์มี MV ให้วาง source เพลงไว้เหนือวิดีโอพื้นหลัง และปรับขนาดให้เต็มจอ (คลิกขวา → Transform → Fit to screen) — ตอนเล่นไฟล์เสียง source นี้ไม่มีภาพ จึงควรเห็นวิดีโอพื้นหลังตามปกติ · ถ้าเห็นภาพสุดท้ายของ MV ค้างอยู่ระหว่างเล่นไฟล์เสียง ให้แยก MV ไปไว้อีกเพลย์ลิสต์หนึ่ง แล้วสลับ scene แทน

8แก้ค่าทีหลัง

• ทางที่ง่าย: เข้าหน้านี้ กด 📂 นำเข้า config.js เดิม เลือกไฟล์ config.js ในโฟลเดอร์ แก้แล้วดาวน์โหลดใหม่ เอาไฟล์ config.js (และ logo ถ้าเปลี่ยน) ไปทับของเดิม
• ทางลัด: คลิกขวา config.js → Open with → Notepad แก้ตามคำอธิบายหัวไฟล์ แล้ว Save
• แก้เสร็จแล้ว ใน OBS ดับเบิลคลิก source Overlay → กด Refresh (ปุ่มล่างสุดของหน้าต่าง)

แก้ปัญหาที่พบบ่อย

เรื่องความปลอดภัย

• config.js มีรหัสผ่าน WebSocket อยู่ข้างใน — อย่าส่งไฟล์นี้หรือทั้งโฟลเดอร์ให้คนอื่น คนที่มีรหัสนี้และอยู่ในเน็ตวงเดียวกันสั่งงาน OBS ของคุณได้
• อยากแชร์หน้าตา overlay ให้เพื่อน ให้ส่งลิงก์หน้านี้ไปแทน เพื่อนตั้งค่าและดาวน์โหลดชุดของตัวเองได้
• ถ้าเคยปิด Enable Authentication ไว้ทดสอบ อย่าลืมเปิดกลับ

ทำไมต้องดาวน์โหลด ไม่ใช้ลิงก์จากเว็บ

overlay ต้องคุยกับ OBS ที่อยู่ในเครื่องคุณ แต่เบราว์เซอร์รุ่นใหม่ (เช่น Chrome) ไม่ยอมให้หน้าเว็บบนอินเทอร์เน็ตเชื่อมเข้าโปรแกรมในเครื่อง เพื่อกันเว็บอันตรายแอบสั่งงานอุปกรณ์ในบ้าน ไฟล์ที่เปิดจากเครื่องตัวเองไม่ติดข้อจำกัดนี้ ชุดที่ดาวน์โหลดจึงใช้ได้ยาวแม้ OBS จะอัปเดตรุ่นใหม่ ไม่ต้องพึ่งเว็บนี้ และยังอ่านปกเพลงจากโฟลเดอร์ในเครื่องได้ด้วย

ที่มาของเครื่องมือนี้

เครื่องมือนี้เริ่มต้นจากหน้าจอไลฟ์ของช่อง Papa's Pick Music ที่ไลฟ์เปิดเพลงของตัวเองผ่าน OBS ตอนแรก overlay เป็นไฟล์ HTML ที่ใช้คู่กับสคริปต์ Python และ path ที่ผูกกับเครื่องตัวเอง

พอจะแชร์ overlay ให้ Ratavia ได้ใช้บ้าง ก็พบว่าถ้าส่งไฟล์ไปตรง ๆ จะใช้ยาก — ต้องลง Python ตั้งค่าสคริปต์ใน OBS และแก้โค้ดเองเพื่อเปลี่ยนชื่อช่อง โลโก้ และลิงก์แชท จึงทำเป็นเครื่องมือนี้ขึ้นมา ให้ใครก็ตั้งค่าเองได้ในหน้าเดียว ดูพรีวิวก่อน แล้วดาวน์โหลดไปใช้ได้ทันทีโดยไม่ต้องแตะโค้ด พร้อมแถมวิดีโอพื้นหลังที่ช่องใช้จริงไปด้วย

🎁 Papa's Pick ทำแจกเพื่อน ๆ ใช้ฟรี — ใครชอบ ฝากกดติดตามช่องและแวะมาฟังไลฟ์กันได้ที่ YouTube @PapasPickMusic และเพจ Facebook Papa's Pick

ทดสอบกับ OBS Studio 32.2 และ Media Playlist Source ที่ใช้ไลฟ์จริง — ป้ายแนวเพลงมาจากชื่อโฟลเดอร์เพลย์ลิสต์ เช่นโฟลเดอร์ 02 City Pop - Disco 80s จะขึ้นป้าย City Pop - Disco 80s

คำถามที่พบบ่อย

overlay นี้รู้ได้ยังไงว่ากำลังเล่นเพลงอะไร

overlay ถาม OBS โดยตรงทุก 1 วินาทีผ่าน WebSocket ที่มีมาในตัว OBS ตั้งแต่เวอร์ชัน 28 แล้วอ่านชื่อไฟล์เพลงที่ source เล่นอยู่ จึงไม่ต้องลงสคริปต์หรือโปรแกรมเสริม แต่ใช้ได้เฉพาะเพลงที่ OBS เปิดเองจากไฟล์ในเครื่อง ไม่รู้จักเพลงที่เปิดจาก Spotify หรือ YouTube

ใช้กับ YouTube, Facebook และ TikTok ได้ไหม

ได้ทุกแพลตฟอร์มที่ไลฟ์ผ่าน OBS Studio เพราะ overlay เป็นส่วนหนึ่งของภาพที่ OBS ส่งออกไป แต่ใช้กับ Streamlabs Desktop หรือ TikTok LIVE Studio ไม่ได้ เพราะไม่มี obs-websocket

ชื่อเพลงไม่ขึ้น หรือขึ้นกล่องสีแดง ต้องแก้ยังไง

กล่องสีแดงบอกสาเหตุไว้แล้ว ที่พบบ่อยคือยังไม่ได้กด Apply ในหน้า WebSocket Server Settings, รหัสผ่านไม่ตรง หรือชื่อ source ไม่ตรงกับใน OBS ดูวิธีแก้ทีละอาการในตารางแก้ปัญหา

รหัสผ่าน WebSocket ที่กรอกถูกส่งขึ้นเว็บไหม

ไม่ถูกส่ง ทุกอย่างทำในเบราว์เซอร์ของคุณ รหัสผ่านถูกเขียนลงไฟล์ config.js ในชุดที่ดาวน์โหลดเท่านั้น และหน้านี้ไม่จำรหัสผ่านไว้

overlay ทำให้ไลฟ์กระตุกไหม

เบามาก overlay ถาม OBS วินาทีละครั้งภายในเครื่องตัวเอง ถ้าเครื่องสเปกไม่สูง เลือกธีม Minimal ซึ่งตัดแอนิเมชันแผ่นเสียงหมุนและเงาเรืองแสงออก