Skip to main content

DAWstream

Version 1.0.0

แชร์เสียงจาก DAW ด้วยความละเอียดสูง(Hi-Res) ผ่าน Internet ให้ปลายทางเปิดฟังผ่านเว็บบราวเซอร์ 😉 แค่กดปุ่ม Copy URL ในปลั๊กอินแล้วแชร์!

ผมเรียกสิ่งนี้ว่า DAWstream System เพราะมันจะต้องทำงานประกอบกัน 2 ส่วน คือ

  1. Plugin ตัวปลั๊กอินที่จะต้อง Insert ใน DAW
  2. Server ตัวโปรแกรมที่จะต้องรันควบคู่ไปด้วย โดยตัวโปรแกรม Server นี้จะเป็นตัวกลางในการรับส่งข้อมูลระหว่างตัวปลั๊กอินและก็เว็บบราวเซอร์ของผู้ฟังปลายทาง ซึ่งแค่เพียงเปิดโปรแกรม Server นี้ไว้ เสียงก็จะถูกส่งออกไปยังเว็บบราวเซอร์ของผู้ฟังปลายทางผ่าน Internet โดยไม่ต้องตั้งค่าอะไรเพิ่มเติมให้วุ่นวาย

☝️ การใช้งาน​

  1. Insert ตัวปลั๊กอินใน DAW และก็เปิดโปรแกรม Server (ทำอันไหนก่อนหรือหลังก็ได้)
  2. จากนั้นเราแค่รอให้มันเชื่อมต่อกัน(มันทำกันเอง เราไม่ต้องทำอะไร)
  3. เมื่อมันเชื่อมต่อกันเรียบร้อย เราก็จะสามารถคลิ๊กปุ่ม Copy URL แล้วส่งให้ปลายทางเปิดฟังได้เลยทันที

DAWstream Plugin

DAWstream Browser

warning

Apple ค่อนข้างรัดกุมเกี่ยวกับการเล่นเสียงผ่านเว็บบราวเซอร์บน iOS ครับ ซึ่งตัวเครื่องเล่นของ DAWstream นั้นใช้ Web Audio API ซึ่ง iOS จะต้องไม่เป็น Silent Mode นะครับ(ต้องงัดขึ้น อย่าปิดเสียง) เสียงถึงจะออก

https://www.unlockboot.com/fix-iphone-ring-silent-button-not-working/

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

สำหรับบราวเซอร์บนคอมพิวเตอร์ไม่ว่าจะ Windows หรือ Mac จะไม่มีปัญหาเหล่านี้ครับ ส่วน Android ผมทดสอบแค่ไม่กี่เครื่อง ไม่พบปัญหานี้ครับ ถ้ามีปัญหาให้ลองรีสตาร์ทบราวเซอร์ดูนะครับ

โปรแกรม Server​

ตัวโปรแกรมจะทำงานในลักษณะ Menu Bar App ใน Mac และ Tray App ใน Windows ครับ คือหลังจากเปิดโปรแกรมจะไม่มีหน้าต่างอะไรทั้งนั้นครับ ซึ่งทั้ง Mac และ Windows ผมทำให้มีการแจ้งเตือนด้วย อย่างเช่น แจ้งเตือนสถานะการเชื่อมต่อ แจ้งเตือนตอนที่มีคนกดเข้ามาฟัง

Server Notification

Server บน Windows​

Server Windows

Server บน Mac​

Server Mac

Parameters บนปลั๊กอิน​

Knob​

  • Monitor Level มันคือ Volume ของเสียงที่จะออกมาจากตัวปลั๊กอิน ซึ่งไม่มีผลต่อเสียงที่จะถูกส่งออกไปยังผู้ฟังปลายทางนะครับ อันนี้เอาไว้ใช้งานเวลาที่เราเช็คมิกซ์ในอุปกรณ์อื่นๆ ต้องการจะปิดเสียงไม่ให้ออกมาจากเครื่องต้นทาง เราก็แค่หมุน Knob นี้ลง หรือเวลาที่เรากด Play ให้เพื่อนหรือลูกค้าฟังแล้วเรารู้สึกอึนๆเพราะอยู่กับเพลงนั้นมานาน ไม่อยากฟังแล้ว 😂 หยอกๆ

Button​

  • Generate New ID สำหรับสร้าง ID ของห้องใหม่
  • Copy URL สำหรับคัดลอก URL ของห้อง กดปุ๊บคัดลอกปั๊บ เอาไปวางส่งให้เพื่อนหรือลูกค้าในแชทได้ทันที
Room ID

เมื่อ Server เริ่มทำงาน มันจะสร้าง URL หลักขึ้นมา 1 URL

ปลั๊กอิน 1 ตัวมันจะสร้างห้องย่อยสำหรับฟังขึ้นมาได้ 1 ห้องครับ โดยการ Insert ปลั๊กอินนั้นสามารถ Insert ได้ไม่จำกัด โดยปลั๊กอินแต่ละตัวจะทำการสร้าง Room ID ของตัวเองที่ไม่ซ้ำกันขึ้นมา

การย่อขยายขนาดหน้าต่างปลั๊กอิน​

เลื่อนเมาส์ไปชี้ที่มุมล่างขวา จะเห็นเป็น Button โผล่ขึ้นมา สามารถคลิ๊กย่อขยายขนาดได้ทันที และในกรณีที่ต้องการรีเซ็ตกลับค่าเริ่มต้น ให้ดับเบิลคลิ๊ก

การติดตั้ง​

สำหรับตัวปลั๊กอิน ติดตั้งผ่าน Installer เหมือนออดิโอปลั๊กอินทั่วๆไปครับ แต่สำหรับ Server ผมจะแยกอธิบายเป็น Windows กับ MacOS นะครับ

Server บน Windows​

หลังจากดาวน์โหลดไฟล์ Zip มาแล้ว ให้แตก Zip จากนั้นให้ลากโฟลเดอร์ไปไว้ที่ไหนสักที่ก็ได้ครับในเครื่อง จากนั้นก็รัน DAWstreamServer.exe ก็ใช้ได้เลยครับ

ในหลายๆเครื่องมักจะมีหน้าต่างเด้งขึ้นมาถามการอนุญาต ให้กดอนุญาตให้หมดครับ

ถ้าเครื่องไหนมองว่าเป็นไวรัส ก็ให้ไปจัดการบอกโปรแกรม Antivirus ให้ยกเว้นการตรวจสอบครับ (อันนี้ทุกคนต้องหาข้อมูลเอาเองนะครับ เพราะแต่ละคนใช้โปรแกรม Antivirus ไม่เหมือนกัน)

warning

ถึงโปรแกรม Antivirus จะฟ้องว่ามันเป็นไวรัส แต่ก็ไม่ได้หมายความว่ามันคือไวรัสนะครับ มันเป็นเพราะผมไม่ได้จ่ายเงินให้ Microsoft ต่างหาก 😆 และผมก็ไม่คิดจะจ่ายด้วย

สิ่งนี้ไม่ได้มีปัญหาแค่กับผม แต่มีปัญหากับซอฟต์แวร์ทุกเจ้าที่ไม่ยอมจ่ายตังค์ ส่วนใหญ่จะเป็นฟรีแวร์และก็ Open Source

Server บน MacOS​

ระบบความปลอดภัยของ Mac ค่อนข้างจะรัดกุม มันจะสะดวกกว่านี้ถ้าผมจ่ายตังค์ให้ Apple 😆 แน่นอนว่าผมไม่จ่ายอยู่แล้ว ผมและผู้พัฒนาซอฟต์แวร์อีกหลายๆคนที่เป็นฟรีแวร์และก็ Open Source ส่วนใหญ่ ก็เลยต้องเจอปัญหาเกี่ยวกับการอนุญาต(Permission)

ดังนั้นเราก็เลยจะต้องทำอะไรเพิ่มเติมนิดหน่อย มันถึงจะใช้งานได้ปกติครับ

  1. ไฟล์ตัว Server ของ MacOS จะเป็นไฟล์ DMG ให้เปิดไฟล์ DMG นี้ขึ้นมาครับ

  1. มันจะเป็น Drive โผล่ขึ้นมา ให้เปิดเข้าไป จากนั้นจะพบกับ Folder ของ DAWstreamServer

  1. ให้ลากโฟลเดอร์ไปไว้ที่ไหนสักที่ก็ได้ครับในเครื่อง อย่างในรูปผมลากลงไว้ Desktop เลย

  1. เปิดเข้าไปในโฟลเดอร์ที่เราเพิ่งลากลงไปครับ จะพบกับไฟล์ DAWstreamServer.app, Fix_Permission.command, Player.html และโฟลเดอร์ static

  1. จากนั้นเปิดไฟล์ Fix_Permission.command โดยการคลิ๊กขวาแล้วกดเปิดครับ ย้ำนะครับว่าให้คลิ๊กขวาแล้วเปิด!!! เพราะถ้าเรา Double Click เราจะต้องวุ่นวายไปกดอนุญาตใน Setting ครับ แต่ถ้าเราคลิ๊กขวาแล้วเปิดแบบนี้ มันจะเด้งขึ้นมาถามแบบในขั้นตอนต่อไป

  1. มันจะเด้งมาถามว่า "เห้ย! นี่คือแอพที่มาจากใครก็ไม่รู้เป็นคนทำนะ! แน่ใจที่จะเปิดใช้งานจริงๆเหรอ?" เราก็กดเปิดเลยครับ

  1. ปุ๊ง! มันจะเด้งขึ้นเจ้งแบบนี้ว่าจัดการ Permission สำเร็จแล้วนะ รันแอพ DAWstreamServer ได้ปกติแล้วหลังจากนี้

  1. จากนั้นคลิ๊กขวาเปิด DAWstreamServer ครับ ผมไม่แนะนำให้เปิดแบบ Double Click ในครั้งแรกนะ เผื่อบางเครื่องมันจะเด้งถามยืนยันอีกรอบ เราจะได้กดเปิดได้เลยโดยไม่ต้องไปอนุญาตมันใน Setting แต่สำหรับในครั้งถัดๆไป เราสามารถ Double Click เปิดได้เลยครับ เพราะ Mac ของเรามันเชื่อใจไฟล์นี้แล้ว

  1. เรียบร้อยครับ DAWstreamServer ทำงานแล้ว

tip

ในบางเครื่องมันจะเด้งถามอะไรก็ไม่รู้เต็มไปหมด เพราะ OS แต่ละเวอร์ชั่นมันจะมีการจัดการ Permission ต่างกันครับ เราก็แค่ Yes Yes Yes Allow Allow Allow ให้หมดครับ ไม่ต้องกังวลถึงความไม่ปลอดภัย เพราะซอฟต์แวร์ทุกตัวที่ผมทำ ผมไม่เคยเขียนให้มันไปยุ่งวุ่นวายกับส่วนอื่นๆที่ไม่เกี่ยวข้องอยู่แล้วครับ

ขอให้ทุกคนจงไว้ใจและศรัทธาในตัวผม 😂

ดาวน์โหลด​

รองรับ VST3, AU, CLAP, AAX(Native) ทั้ง MacOS และ Windows ครับ

  • Windows แนะนำเป็น 10, 11 นะครับ
  • MacOS แนะนำขั้นต่ำเป็น Catalina(10.15) ครับ รองรับทั้ง Intel และ ARM

Plugin​

ดาวน์โหลด Plugin สำหรับ Windows

ดาวน์โหลด Plugin สำหรับ MacOS (ใช้ร่วมกันทั้ง Intel และ ARM)

Server​

ดาวน์โหลด Server สำหรับ Windows

ดาวน์โหลด Server สำหรับ MacOS(ARM)

ดาวน์โหลด Server สำหรับ MacOS(Intel)

warning

สำหรับผู้ใช้งาน MacOS ดาวน์โหลดไฟล์ Server ให้ตรงกับ Architecture ของเครื่องนะครับ เช่น Intel ให้ใช้ Intel และ ARM ให้ใช้ ARM(M1, M2, M3, M4, ...) เพราะถ้าเอาไฟล์ของ Intel ไปรันบน ARM ตัวโปรแกรม Server มันจะมีปัญหาทันทีครับ แต่สำหรับตัว Plugin ไม่ต้องสนใจเรื่อง Architecture ครับ ใช้ตัวเดียวกันได้เลย

รายละเอียดทางเทคนิค​

Hi-res​

Bit Depth ของ DAW แทบจะทุกตัวในปัจจุบันส่วนใหญ่คือ 64 Bit Floating Point และขั้นต่ำคือ 32 Bit Floating Point แต่ DAWstream จะรับส่งกันอยู่ที่ 32 Bit Floating Point ครับ เหตุผลคือ Web Audio API บนเว็บบราวเซอร์สมัยใหม่ประมวลผลเสียงเป็น 32 Bit Floating Point เป็นค่าโรงงาน

ซึ่งการลด Bit Depth จาก 64 Bit Floating Point ลงมาเหลือ 32 Bit Floating Point นั้นไม่มีผลต่อการได้ยินอย่างแน่นอนครับ ยกเว้นว่าระดับเสียงที่ส่งผ่าน DAWstream จะอยู่ในระดับที่ต่ำมากๆระดับ Quantization Error Noise ซึ่งเป็นไปไม่ได้ ไม่มีใครทำงานที่ Level ต่ำขนาดนั้นอยู่แล้วครับ

ส่วน Sample Rate นั้น จะขึ้นอยู่กับ Sample Rate ของโปรเจคที่เรียกใช้ปลั๊กอินเลยครับ ซึ่ง DAWstream จะไม่มีจำกัดค่า Sample Rate ว่าจะต้องเท่าไหร่ และจะไม่มีการแปลง Sample Rate ในกระบวนการรับส่งแต่อย่างใด แต่ว่าในส่วนของปลายทางอาจมีการแปลง Sample Rate ได้ถ้าตั้งค่าอุปกรณ์ไม่ตรงกับ Sample Rate ของต้นทาง

อย่างเช่นในโทรศัพท์มือถือ โดยปกติ Audio Engine ของมันจะแปลงเสียงจากทุกๆแหล่งให้ตรงกับค่าของระบบโดยอัตโนมัติ ถ้าตัวอุปกรณ์หรือการจัดการเสียงของ OS ของมือถือไม่รองรับ มันก็จะแปลงเป็น Sample Rate ที่รองรับแทน

การแปลง Sample Rate นั้นสามารถทำให้ข้อมูลเสียงเพี้ยนไปจากเดิมได้ ซึ่งอาจจะอยู่ในระดับที่หูเราสามารถได้ยินและฟังออกได้ โดยเฉพาะการแปลงลงไปที่ 44.1kHz สาเหตุเกิดจากกลไกและ Filter ในกระบวนการแปลง ดังนั้นควรตั้งค่าอุปกรณ์ปลายทางให้ตรงกับ Sample Rate ต้นทาง แต่ถ้า Sample Rate ต้นทางสูง และอุปกรณ์ปลายทาง 48kHz ขึ้นไป ก็ไม่ต้องกังวลก็ได้ครับ เพราะปัญหาเหล่านั้นโดยปกติจะอยู่เหนือการได้ยินของหูมนุษย์อยู่แล้ว

Latency(ความหน่วง)​

DAWstream System ไม่ได้ถูกออกแบบมาเพื่อให้มัน Low Latency แต่ว่าถูกออกแบบมาให้สตรีมเสียงเพื่อเช็คงานในอุปกรณ์อื่นๆ ส่งให้เพื่อนหรือลูกค้าพรีวิวงาน โดยมีเป้าหมายคือเสียงจะต้องเหมือนต้นฉบับที่สุดและมีความเสถียรมากที่สุดเท่าที่จะเป็นไปได้

โดยปกติการสตรีมเสียงจะใช้โปรโตคอล UDP กันครับ แต่ DAWstream System ใช้โปรโตคอล TCP ครับ ซึ่ง TCP จะมีการตรวจสอบความถูกต้องของข้อมูลที่ส่งออกไป ทำให้ได้ข้อมูลที่ครบถ้วนสมบูรณ์ไม่ต่างจากต้นทาง แต่ก็ต้องแลกกับ Latency ที่ไม่ได้ต่ำเหมือน UDP ซึ่งก็ไม่ได้เป็นปัญหา เพราะ DAWstream System ถูกออกแบบมาเพื่อพรีวิวงาน เช็คมิกซ์ ไม่จำเป็นต้อง Latency ต่ำขนาดนั้น

TCP เสียงก็จะเกิด Jitter หรือความคลาดเคลื่อนของจังหวะเสียงห่างกันไปเรื่อยๆใช่ไหม?

ตามกลไกเป็นแบบนั้นครับ แต่ DAWstream System ผมทำให้มีกลไกในการจัดการเรื่องนี้ 😉 ผมทำให้มีการ Re-Sync ข้อมูลใหม่ทั้งระบบเมื่อเรากดหยุดและกดเล่นใน DAW ทุกครั้ง รวมถึงถ้าระยะเวลาความหน่วงมันสะสมห่างกันไปเรื่อยๆจนถึงขีดจำกัดที่ผมกำหนดไว้ มันจะ Re-Sync ข้อมูลใหม่ทั้งหมดเพื่อให้เสียงเป็นปัจจุบันที่สุด จะทำให้เสียงกระตุกชั่วขณะ ซึ่งโดยปกติจะเกิดขึ้นได้ในกรณีที่สัญญาณ Internet แย่มากๆเท่านั้นครับ

เทคโนโลยีที่ใช้​

  • WebSocket ธรรมด๊าธรรมดา ที่ผมเพิ่มกลไกบางอย่างเข้าไป
  • Cloudflare Tunnel สำหรับการเชื่อมต่อ ทำให้โปรแกรมตัว Server สามารถเชื่อมต่อผ่านโลก Internet ทำให้ผู้ใช้ปลายทางสามารถเชื่อมต่อเข้ามาฟังเสียงผ่านเว็บบราวเซอร์ได้
Cloudflare Tunnel

DAWstream System เป็นแค่โปรเจคเล็กๆหรือจะเรียกว่าโปรเจคส่วนตัวก็ได้ ที่ใช้สำหรับเอาไปรันบนเครื่องของตัวเองแบบเครื่องใครเครื่องมัน ซึ่งโดยปกติการสตรีมในลักษณะให้เพื่อนๆฟัง ให้ลูกค้าฟัง เราสตรีมไม่ถึง 20 คนอยู่แล้วครับ พยายามหลีกเลี่ยงการนำไปใช้กับการสตรีมที่มีผู้ฟังจำนวนมากๆนะครับ เพราะเสี่ยงต่อการละเมิดข้อกำหนดของ Cloudflare

Custom หน้าเว็บบราวเซอร์​

สำหรับใครที่ต้องการความเฟี้ยวฟ้าวหรือว่าไม่พอใจหน้าตาเว็บที่จะให้ลูกค้าเห็น หรืออยากจะแก้ให้เป็นชื่อ เป็นโลโก้ สตูโอของตัวเอง ☝️ ผมมองเห็นสิ่งนี้ครับ ผมเลยทำให้ทุกคนสามารถปรับแต่งมันได้ แต่จะต้องอาศัยความเข้าใจเกี่ยวกับการเขียนโปรแกรมเล็กน้อยครับ

ในโฟลเดอร์ DAWstream Server จะมีอยู่ 3 อย่างหลักๆ

  1. DAWstreamServer ที่เป็น Binary ถ้าบน Windows มันจะเป็นไฟล์ .exe
  2. player.html อันนี้แหละครับคือไฟล์หน้าเว็บที่ปลายทางจะเห็น
  3. โฟลเดอร์ static โฟลเดอร์นี้จะเก็บไฟล์ Static ที่หน้าเว็บจะเรียกใช้งาน สำหรับคนที่อยากจะ Custom JS, CSS จะต้องเอามาใส่ไว้ในโฟลเดอร์นี้และก็เขียนให้ HTML ชี้มาที่โฟลเดอร์นี้เท่านั้นครับ

อย่างเช่น เราอยากแก้ข้อความหน้าเว็บจาก DAWstream เป็น Humnoise Studio เราก็แค่ใช้โปรแกรม Text Editor เปิดไฟล์ player.html ขึ้นมาแล้วก็แก้ข้อความในส่วน

<h1>DAWstream Player</h1>

ให้กลายเป็น

<h1>Humnoise Studio</h1>

เซฟ!

ผลลัพธ์ที่ได้ก็จะได้หน้าเว็บแบบด้านล่างนี้ครับ

Custom HTML

หรือถ้าใครที่มีสกิล Web Application ระดับเซียน ก็ลองดูตัวอย่างใน player.html ดูนะครับ ข้อมูลทุกอย่างจะถูกส่งออกมาจาก dawstream-core.js ผ่าน Callback Function อย่างเช่น...

<script src="/static/dawstream-core.js"></script>

<script>
    // สร้าง Instance และก็กำหนด Callback Functions
    const playerEngine = new DAWStreamEngine({
        
        // สถานะของตัวเครื่องเล่น
        onStateChange: (state, message) => {
            // ตัวอย่างฟังก์ชันจัดการ UI สำหรับสถานะต่างๆ
            myStateHandler(state, message);
            // state คือสถานะ และ message คือข้อความรายละเอียด
        },

        // รับ Node เสียงมาเก็บไว้
        onAudioReady: (analyser) => {
            window.myAnalyserNode = analyser; // เก็บใส่ Variableเพื่อนำไปใช้ต่อ
            startVisualizer();
        },

        // อัปเดตจำนวนคนฟังเมื่อจำนวนคนฟังเปลี่ยน
        onListenerCount: (count) => {
            document.getElementById("count-label").innerText = count; // หรืออะไรสักอย่าง
        },

        // อัปเดต Sample Rate เมื่อ Sample Rate เปลี่ยน
        onSampleRateChange: (sr) => {
            document.getElementById("sr-label").innerText = sr + " Hz"; // หรืออะไรสักอย่าง
        }
    });

    // ส่ง Room ID ให้ตัวเครื่องเล่น
    playerEngine.init("MY_ROOM_ID"); // ที่ผมทำไว้คือผมรับ ID มาจาก URL ของบราวเซอร์

    // ---------------------------------------------------------
    // ส่วนอันนี้เป็นฟังก์ชั่นจัดการ State ในกรณีที่ต้องการจัดการ UI ด้วยตัวเอง
    // ---------------------------------------------------------
    function myStateHandler(currentState, messageText) {
        // อัปเดตข้อความสถานะบนหน้าจอ
        const statusElement = document.getElementById("status-text");
        if(statusElement) statusElement.innerText = messageText;

        // แยก Logic การทำงานตาม State ที่ได้รับมา
        switch(currentState) {
            case "DISCONNECTED":
                // ยังไม่เชื่อมต่อหรือหลุดการเชื่อมต่อ
                setButtonState("orange", "CONNECT", true);
                break;

            case "CONNECTING":
                // กำลังพยายามเชื่อมต่อ
                setButtonState("gray", "Connecting...", false);
                break;

            case "READY_TO_PLAY":
                // กดเพื่อเริ่มเล่น
                setButtonState("green", "START LISTENING", true);
                break;

            case "STREAMING":
                // กำลังเล่นเสียง
                setButtonState("red", "LIVE NOW", false);
                break;
                
            case "WAITING":
                // กรณีเน็ตช้า หรือข้อมูลมาไม่ทัน หรือปลั๊กอินหลุดการเชื่อมต่อ
                setButtonState("yellow", "SYNCING...", false);
                break;
        }
    }

    // ฟังก์ชั่นตัวอย่างจัดการปุ่ม
    function setButtonState(color, text, isEnabled) {
        // บลาๆๆๆ
    }
</script>

ถ้าอื่นๆ เช่น สั่งให้เริ่ม สั่งให้เชื่อมต่อ สั่งให้หยุด สั่งให้ Mute ก็สามารถเรียกใช้ได้จากตัวแปร playerEngine ได้

ทุกอย่างในไฟล์ player.html คือสิ่งที่ DAWstream Core ทำได้ทั้งหมด ไม่ได้มีอะไรมากกว่านั้น

เราสามารถที่จะ Custom ได้ทุกอย่าง เช่น หน้าเว็บ, ตัวเครื่องเล่น และ Visualizer ครับ

Custom Visualizer