ตัวแปลงไฟล์เสียงเป็น Base64

การเล่นเสียง Base64 ในหน้าเว็บ

data URI ที่มีชนิด MIME ของเสียงใช้ได้ทุกตำแหน่งที่เบราว์เซอร์ต้องการ URL ของไฟล์เสียง

<audio controls src="data:audio/mpeg;base64,..."></audio>

// JavaScript: เล่นเสียงสั้น ๆ เมื่อคลิกปุ่ม
const click = new Audio('data:audio/wav;base64,...');
button.addEventListener('click', () => click.play());

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

กรณีที่เหมาะกับการใช้เสียงแบบ Base64

• เสียงสั้น ๆ ของอินเทอร์เฟซ เสียงคลิก เสียงแจ้งเตือน และเสียงบี๊ปเมื่อเกิดข้อผิดพลาดที่มีขนาดเพียงไม่กี่กิโลไบต์ สามารถเก็บไว้ใน JavaScript bundle ได้ จึงเล่นได้ทันทีโดยไม่ต้องส่งคำขอเพิ่ม
• แอปออฟไลน์และแอปไฟล์เดียว เกม ตู้คีออสก์ แพ็กเกจอีเลิร์นนิง และรายงาน HTML ที่ต้องทำงานจากไฟล์เดียวโดยไม่มีเซิร์ฟเวอร์ สามารถฝังเสียงไว้ในตัวได้
• API แปลงเสียงพูดเป็นข้อความ บริการรู้จำเสียงพูดบนคลาวด์หลายแห่งรับไฟล์บันทึกเสียงสั้น ๆ เป็นฟิลด์ Base64 ในคำขอ JSON ซึ่งมักมีชื่อว่า content หรือ audio บริการเหล่านี้มักต้องการรูปแบบไฟล์ อัตราสุ่มตัวอย่าง และจำนวนช่องสัญญาณที่เฉพาะเจาะจง เครื่องมือนี้เข้ารหัสไฟล์ตามที่เป็นอยู่ทุกประการ โดยไม่แปลงรูปแบบหรือเปลี่ยนอัตราสุ่มตัวอย่าง
• ข้อมูลสำหรับการทดสอบ การทดสอบโค้ดประมวลผลเสียงสามารถเก็บตัวอย่างเสียงขนาดจิ๋วไว้เป็นค่าคงที่แบบสตริงได้

เมื่อใดที่ไม่ควรใช้ Base64 กับไฟล์เสียง

Base64 เพิ่มขนาดประมาณหนึ่งในสาม และเบราว์เซอร์ต้องได้รับสตริงทั้งหมดก่อนจึงจะเริ่มเล่นได้ ไม่มีการสตรีม ไม่มีการแคชแยก และไม่มีคำขอแบบช่วงไบต์ (range request) สำหรับการเลื่อนตำแหน่งเล่น ไฟล์ MP3 ความยาว 5 นาทีที่ 128 kbps มีขนาดประมาณ 4.8 MB ซึ่งจะกลายเป็นข้อความประมาณ 6.4 MB ภายใน HTML หรือ JavaScript ของคุณ และต้องดาวน์โหลดใหม่ทุกครั้งที่ไฟล์นั้นเปลี่ยนแปลง สำหรับเพลง พอดแคสต์ และไฟล์บันทึกเสียงยาว ๆ ควรใช้ไฟล์เสียงตามปกติ หลักง่าย ๆ คือฝังแบบอินไลน์เฉพาะเสียงที่ยาวไม่กี่วินาที

รูปแบบไฟล์เสียงและชนิด MIME

ขึ้นอยู่กับระบบปฏิบัติการ ไฟล์อาจถูกรายงานด้วยชนิดแบบอื่น เช่น audio/x-wav หรือ audio/x-m4a โดยทั่วไปเบราว์เซอร์ก็เล่นชนิดเหล่านี้ได้เช่นกัน และคุณสามารถแก้ไขส่วนนำหน้าได้หากแพลตฟอร์มต้องการชนิดที่เฉพาะเจาะจง