วิธีการสตรีมเสียงที่ถูกตัดทอนโดยใช้ MediaSource API
กับ MediaSource API, คุณสามารถ สร้างและกำหนดค่าสตรีมสื่อ ในเบราว์เซอร์ จะช่วยให้คุณ ดำเนินการที่หลากหลายเกี่ยวกับข้อมูลสื่อ ถือโดยแท็ก HTML ที่เกี่ยวข้องกับสื่อเช่น หรือ . ตัวอย่างเช่นคุณสามารถ ผสมกระแสที่แตกต่างกัน, สร้างสื่อที่ทับซ้อนกัน, สื่อโหลดขี้เกียจ, และ แก้ไขการวัดสื่อ เช่นเปลี่ยนระดับเสียงหรือความถี่.
ในโพสต์นี้เราจะดูวิธีการเฉพาะ สตรีมตัวอย่างเสียง (ไฟล์ MP3 ที่ถูกตัดทอน) พร้อมกับ MediaSource API ในเบราว์เซอร์เพื่อ แสดงดนตรีล่วงหน้า ถึงผู้ชมของคุณ เราจะอธิบายวิธีการ ตรวจสอบการสนับสนุนสำหรับ API, ทำอย่างไร เชื่อมต่อองค์ประกอบสื่อ HTML กับ API อย่างไร ดึงสื่อ ผ่าน Ajax และวิธีการในที่สุด สตรีมมัน.
หากคุณต้องการที่จะเห็นล่วงหน้าสิ่งที่เรากำลังทำอยู่ให้ดูที่ ซอร์สโค้ดบน Github, หรือตรวจสอบ หน้าตัวอย่าง.
ขั้นตอนที่ 1 สร้าง HTML
ในการสร้าง HTML ให้เพิ่ม แท็กด้วย การควบคุม คุณลักษณะ ในหน้าของคุณ สำหรับความเข้ากันได้ย้อนหลังยัง เพิ่มข้อผิดพลาดเริ่มต้น สำหรับผู้ใช้ที่เบราว์เซอร์ไม่สนับสนุนคุณสมบัติ เราจะใช้ JavaScript เพื่อเปิด / ปิดข้อความนี้.
ขั้นตอนที่ 2 ตรวจหาการสนับสนุนเบราว์เซอร์
ใน JavaScript ให้สร้าง ลอง ... จับ บล็อกที่จะ โยนข้อผิดพลาด ถ้า MediaSource API ไม่ได้รับการรองรับ โดยเบราว์เซอร์ของผู้ใช้หรือด้วยคำอื่น ๆ ถ้า MediaSource (กุญแจ) ไม่ได้อยู่ ใน หน้าต่าง วัตถุ.
ลอง ถ้า (! 'MediaSource' ในหน้าต่าง) โยน ReferenceError ใหม่ ('ไม่มีคุณสมบัติ MediaSource ในวัตถุหน้าต่าง') catch (e) console.log (e); ขั้นตอนที่ 3 ตรวจหาการสนับสนุน MIME
หลังจากการตรวจสอบการสนับสนุนยังตรวจสอบ สนับสนุนประเภท MIME. หากเบราว์เซอร์ไม่รองรับประเภท MIME ของสื่อที่คุณต้องการ, แจ้งเตือนผู้ใช้ และ โยนข้อผิดพลาด.
var mime = 'audio / mpeg'; if (! MediaSource.isTypeSupported (mime)) alert ('ไม่สามารถเล่นสื่อได้ Media of MIME type' + mime + 'ไม่รองรับ'); พ่น (ไม่รองรับ 'สื่อประเภท' + mime + ''); โปรดทราบว่าต้องมีข้อมูลโค้ดด้านบน วางไว้ภายใน ลอง กลุ่ม, ก่อนที่ จับ บล็อก (สำหรับการอ้างอิงให้ทำตามหมายเลขบรรทัดหรือตรวจสอบไฟล์ JS สุดท้ายบน Github).
ขั้นตอน 4. เชื่อมโยง
สร้างใหม่ MediaSource วัตถุและ กำหนดเป็นแหล่งที่มาของ แท็ก โดยใช้ URL.createObjectURL () วิธี.
var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource); ขั้นตอนที่ 5. เพิ่ม SourceBuffer วัตถุประสงค์ MediaSource
เมื่อองค์ประกอบสื่อ HTML เข้าถึงแหล่งสื่อ และพร้อมที่จะ สร้าง SourceBuffer วัตถุ, MediaSource API ไฟไหม้ sourceopen เหตุการณ์ .
SourceBuffer วัตถุ ถือสื่ออันมากมาย ที่ถอดรหัสในที่สุดประมวลผลและเล่น โสด MediaSource วัตถุสามารถ มีหลายอย่าง SourceBuffer วัตถุ.
ข้างใน ตัวจัดการเหตุการณ์ของ sourceopen เหตุการณ์, เพิ่ม SourceBuffer วัตถุประสงค์ MediaSource กับ addSourceBuffer () วิธี.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime);); ขั้นตอน 6. ดึงสื่อ
ตอนนี้คุณมี SourceBuffer วัตถุมันถึงเวลาที่จะ ดึงไฟล์ MP3. ในตัวอย่างของเราเราจะทำเช่นนั้นโดย ใช้คำขอ AJAX.
ใช้ arraybuffer เช่น responseType, ที่ หมายถึงข้อมูลไบนารี. เมื่อตอบสนองสำเร็จแล้ว, ผนวกเข้ากับ SourceBuffer กับ appendBuffer () วิธี.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = XMLHttpRequest ใหม่ xhr.open ('GET', 'sample.mp3'); ; xhr.onload = function () ลอง switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); break; case 404: การโยน 'File Not Found'; default: throw 'ล้มเหลวในการดึงข้อมูล ไฟล์ '; catch (e) console.error (e);; xhr.send ();); ขั้นตอนที่ 7 ระบุส่วนท้ายของสตรีม
เมื่อ API เสร็จสิ้นการผนวกข้อมูลกับ SourceBuffer เหตุการณ์ที่เรียกว่า updatend ถูกไล่ออก. ภายในตัวจัดการเหตุการณ์ให้โทร ในตอนท้ายของกระแส() วิธีการของ MediaSource ไปยัง ระบุว่ากระแสได้สิ้นสุดลงแล้ว.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = XMLHttpRequest ใหม่ xhr.open ('GET', 'sample.mp3'); ; xhr.onload = function () ลอง switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', ฟังก์ชัน (_) mediaSource.endOfStream (); ); break; case 404: throw 'File Not Found'; default: throw 'ไม่สามารถเรียกไฟล์'; catch (e) console.error (e);; xhr.send ();) ; ขั้นตอนที่ 8 ตัดไฟล์สื่อ
SourceBuffer วัตถุมี สองคุณสมบัติ เรียกว่า appendWindowStart และ appendWindowEnd เป็นตัวแทนของ เวลาเริ่มต้นและสิ้นสุดของข้อมูลสื่อ คุณต้องการกรอง รหัสที่ไฮไลต์ด้านล่าง กรองสี่วินาทีแรก ของ MP3.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0; ... ); การสาธิต
และนั่นคือทั้งหมดของเรา ตัวอย่างเสียงถูกสตรีม ได้จากหน้าเว็บ สำหรับทาง รหัสแหล่งที่มา, ดูที่ของเรา Github repo และสำหรับผลลัพธ์สุดท้ายให้ตรวจสอบ หน้าตัวอย่าง.
รองรับเบราว์เซอร์
ในการเขียนโพสต์นี้ MediaSource API ได้รับการสนับสนุนอย่างเป็นทางการในเบราว์เซอร์หลักทั้งหมด แต่จากการทดสอบแสดงให้เห็นว่า การติดตั้งใช้งานได้ใน Firefox, และเบราว์เซอร์ Webkit ยังคงมีปัญหากับ appendWindowStart คุณสมบัติ.
เช่นเดียวกับ MediaSource API ยังอยู่ในขั้นทดลอง, การเข้าถึงฟังก์ชั่นการแก้ไขที่สูงขึ้นอาจถูก จำกัด แต่ สตรีมพื้นฐาน คุณสมบัติเป็นสิ่งที่คุณสามารถทำได้ ใช้ประโยชน์ได้ทันที.
