เกริ่นนำ
Media Source Extensions (MSE) มีการบัฟเฟอร์เพิ่มเติมและการควบคุมการเล่นสำหรับองค์ประกอบ HTML5 <audio> และ <video> แม้ว่าเดิมจะพัฒนาขึ้นเพื่ออำนวยความสะดวกแก่โปรแกรมเล่นวิดีโอที่ใช้การสตรีมที่ปรับเปลี่ยนได้แบบไดนามิกผ่าน HTTP (DASH) แต่ด้านล่างนี้เราจะมาดูวิธีการใช้โปรแกรมเล่นวิดีโอสำหรับเสียง โดยเฉพาะสำหรับการเล่นที่ไม่ขาดตอน
คุณน่าจะเคยฟังอัลบั้มเพลงที่เพลงต่างๆ ลื่นไหลในทุกแทร็ก หรือตอนนี้อาจฟังอัลบั้มนั้นอยู่ ศิลปินสร้างประสบการณ์การเล่นแบบไม่ขาดตอนเหล่านี้ทั้งในฐานะคอนเทนต์งานศิลปะ ตลอดจนการประดิษฐ์แผ่นเสียงและซีดีที่มีการเขียนเสียงเป็นสตรีมเดียวอย่างต่อเนื่อง เนื่องด้วยวิธีการทำงานของตัวแปลงรหัสเสียงสมัยใหม่อย่าง MP3 และ AAC ทำให้ประสบการณ์เสียงอันราบรื่นเช่นนี้มักสูญหายไปในปัจจุบัน
เราจะมาดูรายละเอียดของสาเหตุด้านล่างนี้กัน แต่ก่อนอื่นเราจะเริ่มจากการสาธิต ด้านล่างคือ 30 วินาทีแรกของ Sintel ที่ยอดเยี่ยม ซึ่งตัดออกเป็น MP3 ไฟล์ 5 ไฟล์และประกอบกันอีกครั้งโดยใช้ MSE เส้นสีแดงบ่งบอกถึงช่องว่างที่เกิดขึ้นระหว่างการสร้าง (การเข้ารหัส) ของ MP3 แต่ละ MP3 คุณจะได้ยินข้อบกพร่องที่จุดเหล่านี้
แย่จัง! นั่นไม่ใช่ประสบการณ์ที่ยอดเยี่ยม เราควรปรับปรุงให้ดีขึ้นได้ ด้วยการทำงานเพิ่มขึ้นอีกเล็กน้อย การใช้ไฟล์ MP3 ที่ตรงกันทุกประการกับในการสาธิตข้างต้น เราจึงสามารถใช้ MSE เพื่อกำจัดช่องว่างที่น่ารำคาญเหล่านั้นได้ เส้นสีเขียวในการสาธิตถัดไปจะระบุตำแหน่งที่รวมไฟล์อยู่และช่องว่างที่ถูกลบออก แต่ Chrome 38 ขึ้นไปจะเล่นได้อย่างราบรื่น
การสร้างเนื้อหาที่ไม่ขาดตอนมีหลายวิธี สำหรับการสาธิตนี้ เราจะเน้นเกี่ยวกับประเภทไฟล์ที่ผู้ใช้ปกติอาจมีอยู่ โดยที่แต่ละไฟล์ได้รับการเข้ารหัสแยกกันโดยไม่คำนึงถึงส่วนเสียงก่อนหรือหลัง
การตั้งค่าพื้นฐาน
ก่อนอื่น มาย้อนกลับไปดูการตั้งค่าพื้นฐานของอินสแตนซ์ MediaSource กัน ส่วนขยายแหล่งที่มาของสื่อเป็นเพียงส่วนขยายขององค์ประกอบของสื่อที่มีอยู่เท่านั้น เราได้กำหนด Object URL ที่เป็นตัวแทนของอินสแตนซ์ MediaSource ให้กับแอตทริบิวต์แหล่งที่มาขององค์ประกอบเสียง เช่นเดียวกับที่คุณตั้งค่า URL มาตรฐาน
var audio = document.createElement('audio');
var mediaSource = new MediaSource();
var SEGMENTS = 5;
mediaSource.addEventListener('sourceopen', function() {
var sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
function onAudioLoaded(data, index) {
// Append the ArrayBuffer data into our new SourceBuffer.
sourceBuffer.appendBuffer(data);
}
// Retrieve an audio segment via XHR. For simplicity, we're retrieving the
// entire segment at once, but we could also retrieve it in chunks and append
// each chunk separately. MSE will take care of assembling the pieces.
GET('sintel/sintel_0.mp3', function(data) { onAudioLoaded(data, 0); } );
});
audio.src = URL.createObjectURL(mediaSource);
เมื่อเชื่อมต่อออบเจ็กต์ MediaSource แล้ว ออบเจ็กต์จะดำเนินการเริ่มต้นบางอย่างและทำให้เหตุการณ์ sourceopen เริ่มทำงานในที่สุด จากนั้นเราจะสร้าง SourceBuffer ได้ ในตัวอย่างด้านบน เราจะสร้างกลุ่ม audio/mpeg ซึ่งสามารถแยกวิเคราะห์และถอดรหัสกลุ่ม MP3 ของเราได้ และยังมีประเภทอื่นๆ อีกหลายประเภท
รูปแบบคลื่นผิดปกติ
อีกสักครู่เราจะกลับมาดูโค้ดกัน แต่คราวนี้มาดูรายละเอียดไฟล์ที่เราเพิ่งต่อท้าย โดยเฉพาะที่ส่วนท้ายของโค้ดนั้น ข้อมูลด้านล่างคือกราฟของตัวอย่าง 3, 000 ตัวอย่างล่าสุดที่เฉลี่ยจากทั้ง 2 แชแนลจากแทร็ก sintel_0.mp3 พิกเซลแต่ละพิกเซลบนเส้นสีแดงคือตัวอย่างจุดลอยตัวในช่วงของ [-1.0, 1.0]
แล้วทำไมถึงไม่มีตัวอย่าง (เงียบ) พวกนั้น! จริงๆ แล้วเกิดจากอาร์ติแฟกต์การบีบอัดที่สร้างขึ้นระหว่างการเข้ารหัส โปรแกรมเปลี่ยนไฟล์เกือบทั้งหมดจะมีระยะห่างจากขอบบางประเภท ในกรณีนี้ LAME ได้เพิ่มตัวอย่างระยะห่างจากขอบ 576 ตัวอย่างต่อท้ายไฟล์
นอกจากระยะห่างจากขอบที่ส่วนท้ายแล้ว แต่ละไฟล์ยังมีระยะห่างจากขอบในตอนต้นด้วย ถ้าเราแอบดูแทร็ก sintel_1.mp3 เราจะได้เห็นตัวอย่างระยะห่างจากขอบอีก 576 ตัวอย่างที่ด้านหน้า ระยะห่างจากขอบจะแตกต่างกันไปตามโปรแกรมเปลี่ยนไฟล์และเนื้อหา แต่เราทราบค่าที่แน่นอนโดยอิงตาม metadata ที่รวมอยู่ในแต่ละไฟล์
ส่วนของความเงียบที่จุดเริ่มต้นและจุดสิ้นสุดของแต่ละไฟล์เป็นสาเหตุของข้อบกพร่องระหว่างส่วนต่างๆ ในการสาธิตก่อนหน้านี้ เราต้องนำส่วนที่ไม่มีเสียงเหล่านี้ออกเพื่อให้การเล่นไม่ขาดตอน โชคดีที่ขั้นตอนนี้ทำได้ง่ายโดยใช้ MediaSource ด้านล่าง เราจะแก้ไขเมธอด onAudioLoaded() ของเราให้ใช้กรอบเวลาต่อท้ายและออฟเซ็ตการประทับเวลาเพื่อนำส่วนที่ไม่มีเสียงนี้ออก
โค้ดตัวอย่าง
function onAudioLoaded(data, index) {
// Parsing gapless metadata is unfortunately non trivial and a bit messy, so
// we'll glaze over it here; see the appendix for details.
// ParseGaplessData() will return a dictionary with two elements:
//
// audioDuration: Duration in seconds of all non-padding audio.
// frontPaddingDuration: Duration in seconds of the front padding.
//
var gaplessMetadata = ParseGaplessData(data);
// Each appended segment must be appended relative to the next. To avoid any
// overlaps, we'll use the end timestamp of the last append as the starting
// point for our next append or zero if we haven't appended anything yet.
var appendTime = index > 0 ? sourceBuffer.buffered.end(0) : 0;
// Simply put, an append window allows you to trim off audio (or video) frames
// which fall outside of a specified time range. Here, we'll use the end of
// our last append as the start of our append window and the end of the real
// audio data for this segment as the end of our append window.
sourceBuffer.appendWindowStart = appendTime;
sourceBuffer.appendWindowEnd = appendTime + gaplessMetadata.audioDuration;
// The timestampOffset field essentially tells MediaSource where in the media
// timeline the data given to appendBuffer() should be placed. I.e., if the
// timestampOffset is 1 second, the appended data will start 1 second into
// playback.
//
// MediaSource requires that the media timeline starts from time zero, so we
// need to ensure that the data left after filtering by the append window
// starts at time zero. We'll do this by shifting all of the padding we want
// to discard before our append time (and thus, before our append window).
sourceBuffer.timestampOffset =
appendTime - gaplessMetadata.frontPaddingDuration;
// When appendBuffer() completes, it will fire an updateend event signaling
// that it's okay to append another segment of media. Here, we'll chain the
// append for the next segment to the completion of our current append.
if (index == 0) {
sourceBuffer.addEventListener('updateend', function() {
if (++index < SEGMENTS) {
GET('sintel/sintel_' + index + '.mp3',
function(data) { onAudioLoaded(data, index); });
} else {
// We've loaded all available segments, so tell MediaSource there are no
// more buffers which will be appended.
mediaSource.endOfStream();
URL.revokeObjectURL(audio.src);
}
});
}
// appendBuffer() will now use the timestamp offset and append window settings
// to filter and timestamp the data we're appending.
//
// Note: While this demo uses very little memory, more complex use cases need
// to be careful about memory usage or garbage collection may remove ranges of
// media in unexpected places.
sourceBuffer.appendBuffer(data);
}
Waveform ที่ลื่นไหล
เรามาดูกันว่าโค้ดใหม่สุดมันใช้ได้ผลดีอะไร โดยการดู Waveform อีกครั้งหลังจากที่เราเพิ่มหน้าต่างต่อท้ายแล้ว ที่ด้านล่าง คุณจะเห็นว่าส่วนที่ไม่มีเสียงในช่วงท้ายของ sintel_0.mp3 (สีแดง) และส่วนที่เงียบในตอนต้นของ sintel_1.mp3 (สีน้ำเงิน) ถูกนำออกแล้ว ซึ่งทำให้เราสามารถเปลี่ยนระหว่างส่วนได้อย่างราบรื่น
บทสรุป
เราเอาทั้ง 5 ส่วนมาต่อกันเป็น 1 ส่วน และต่อไปเรื่อยๆ จนจบการสาธิต ก่อนจากกันไป คุณอาจเห็นว่าเมธอด onAudioLoaded() ของเราไม่มีการพิจารณาคอนเทนเนอร์หรือตัวแปลงรหัส ซึ่งหมายความว่าเทคนิคทั้งหมดนี้จะทำงานได้ไม่ว่าจะใช้คอนเทนเนอร์หรือตัวแปลงรหัสประเภทใด คุณเล่น MP4 แบบแยกส่วนที่รองรับ DASH ของเดโมต้นฉบับแทน MP3 ได้ที่ด้านล่าง
หากต้องการทราบข้อมูลเพิ่มเติม โปรดดูภาคผนวกด้านล่างเพื่อดูรายละเอียดเพิ่มเติมเกี่ยวกับการสร้างเนื้อหาและการแยกวิเคราะห์ข้อมูลเมตาแบบไม่ขาดตอน นอกจากนี้ คุณยังสำรวจ gapless.js เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับโค้ดที่ขับเคลื่อนการสาธิตนี้ได้ด้วย
ขอขอบคุณที่อ่าน
ภาคผนวก ก: การสร้างเนื้อหาที่ไม่ขาดตอน
การสร้างเนื้อหาที่ไม่ขาดตอนอาจเป็นเรื่องยาก ที่ด้านล่างนี้ เราจะแนะนำการสร้างสื่อ Sintel ที่ใช้ในการสาธิตนี้ ในการเริ่มต้น คุณจะต้องมีสำเนาของซาวด์แทร็ก FLAC แบบไม่สูญเสียรายละเอียดสำหรับ Sintel สำหรับลูกหลาน เราได้รวม SHA1 ไว้ด้านล่าง สำหรับเครื่องมือ คุณจะต้องใช้ FFmpeg, MP4Box, LAME และการติดตั้ง OSX ที่มี afconvert
unzip Jan_Morgenstern-Sintel-FLAC.zip
sha1sum 1-Snow_Fight.flac
# 0535ca207ccba70d538f7324916a3f1a3d550194 1-Snow_Fight.flac
ก่อนอื่น เราจะแยกแทร็ก 1-Snow_Fight.flac ช่วง 31.5 วินาทีแรก นอกจากนี้ เรายังต้องการเพิ่มรูปแบบการเฟดวิดีโอความยาว 2.5 วินาทีโดยเริ่มจาก 28 วินาทีเพื่อไม่ให้มีการคลิกอีกเมื่อเล่นจบแล้ว เราสามารถดำเนินการทั้งหมดนี้ได้สำเร็จและนำผลลัพธ์มาใส่ใน sintel.flac โดยใช้บรรทัดคำสั่ง FFmpeg ด้านล่าง
ffmpeg -i 1-Snow_Fight.flac -t 31.5 -af "afade=t=out:st=28:d=2.5" sintel.flac
จากนั้นเราจะแยกไฟล์ออกเป็น Wave จำนวน 5 ไฟล์ โดยแต่ละไฟล์จะมีความยาว 6.5 วินาที ซึ่งเป็นวิธีที่ง่ายที่สุดเนื่องจากโปรแกรมเปลี่ยนไฟล์เกือบทั้งหมดรองรับการส่งผ่านข้อมูลของไฟล์ และเช่นเคย เราสามารถทำสิ่งนี้ได้อย่างแม่นยำด้วย FFmpeg หลังจากนั้น เราจะมี sintel_0.wav, sintel_1.wav, sintel_2.wav, sintel_3.wav และ sintel_4.wav
ffmpeg -i sintel.flac -acodec pcm_f32le -map 0 -f segment \
-segment_list out.list -segment_time 6.5 sintel_%d.wav
จากนั้นให้สร้างไฟล์ MP3 LAME มีตัวเลือกมากมายในการสร้างเนื้อหาที่ไม่ขาดตอน หากคุณควบคุมเนื้อหาได้ ให้พิจารณาใช้ --nogap กับการเข้ารหัสไฟล์ทั้งหมดแบบเป็นกลุ่มเพื่อหลีกเลี่ยงการเว้นระยะห่างระหว่างส่วน สำหรับวัตถุประสงค์ของการสาธิตนี้ เราต้องการระยะห่างจากขอบดังกล่าว เราจึงจะใช้การเข้ารหัส VBR คุณภาพสูงแบบมาตรฐานของไฟล์ Wave
lame -V=2 sintel_0.wav sintel_0.mp3
lame -V=2 sintel_1.wav sintel_1.mp3
lame -V=2 sintel_2.wav sintel_2.mp3
lame -V=2 sintel_3.wav sintel_3.mp3
lame -V=2 sintel_4.wav sintel_4.mp3
ทั้งหมดนี้เป็นสิ่งที่จำเป็นในการสร้างไฟล์ MP3 ต่อไปเราจะพูดถึงการสร้างไฟล์ MP4 ที่แยกเป็นส่วนๆ กัน เราจะทำตามคำแนะนำของ Apple ในการสร้างสื่อซึ่งเป็นความเชี่ยวชาญด้าน iTunes ด้านล่างนี้ เราจะแปลงไฟล์ Wave เป็นไฟล์ CAF ระดับกลางตามวิธีการ จากนั้นจะเข้ารหัสเป็นไฟล์ AAC ในคอนเทนเนอร์ MP4 โดยใช้พารามิเตอร์ที่แนะนํา
afconvert sintel_0.wav sintel_0_intermediate.caf -d 0 -f caff \
--soundcheck-generate
afconvert sintel_1.wav sintel_1_intermediate.caf -d 0 -f caff \
--soundcheck-generate
afconvert sintel_2.wav sintel_2_intermediate.caf -d 0 -f caff \
--soundcheck-generate
afconvert sintel_3.wav sintel_3_intermediate.caf -d 0 -f caff \
--soundcheck-generate
afconvert sintel_4.wav sintel_4_intermediate.caf -d 0 -f caff \
--soundcheck-generate
afconvert sintel_0_intermediate.caf -d aac -f m4af -u pgcm 2 --soundcheck-read \
-b 256000 -q 127 -s 2 sintel_0.m4a
afconvert sintel_1_intermediate.caf -d aac -f m4af -u pgcm 2 --soundcheck-read \
-b 256000 -q 127 -s 2 sintel_1.m4a
afconvert sintel_2_intermediate.caf -d aac -f m4af -u pgcm 2 --soundcheck-read \
-b 256000 -q 127 -s 2 sintel_2.m4a
afconvert sintel_3_intermediate.caf -d aac -f m4af -u pgcm 2 --soundcheck-read \
-b 256000 -q 127 -s 2 sintel_3.m4a
afconvert sintel_4_intermediate.caf -d aac -f m4af -u pgcm 2 --soundcheck-read \
-b 256000 -q 127 -s 2 sintel_4.m4a
ตอนนี้เรามีไฟล์ M4A หลายไฟล์ที่เราต้องแยกส่วนอย่างเหมาะสมก่อนที่จะใช้กับ MediaSource ตามวัตถุประสงค์ของเรา เราจะใช้ขนาดส่วนย่อยที่ 1 วินาที MP4Box จะเขียน MP4 แยกส่วนแต่ละรายการเป็น sintel_#_dashinit.mp4 พร้อมกับไฟล์ Manifest MPEG-DASH (sintel_#_dash.mpd) ซึ่งสามารถทิ้งได้
MP4Box -dash 1000 sintel_0.m4a && mv sintel_0_dashinit.mp4 sintel_0.mp4
MP4Box -dash 1000 sintel_1.m4a && mv sintel_1_dashinit.mp4 sintel_1.mp4
MP4Box -dash 1000 sintel_2.m4a && mv sintel_2_dashinit.mp4 sintel_2.mp4
MP4Box -dash 1000 sintel_3.m4a && mv sintel_3_dashinit.mp4 sintel_3.mp4
MP4Box -dash 1000 sintel_4.m4a && mv sintel_4_dashinit.mp4 sintel_4.mp4
rm sintel_{0,1,2,3,4}_dash.mpd
เท่านี้ก็เรียบร้อย ตอนนี้เรามีไฟล์ MP4 และ MP3 ที่แยกส่วนกันโดยมีข้อมูลเมตาที่ถูกต้องสำหรับการเล่นที่ไม่ขาดตอน ดูภาคผนวก B สำหรับรายละเอียดเพิ่มเติมว่าข้อมูลเมตามีลักษณะอย่างไร
ภาคผนวก ข: การแยกวิเคราะห์ข้อมูลเมตาที่ไม่มีช่องโหว่
เช่นเดียวกับการสร้างเนื้อหาที่ไม่ขาดตอน การแยกวิเคราะห์ข้อมูลเมตาที่ไม่มีช่องโหว่ก็อาจเป็นเรื่องยุ่งยากเนื่องจากไม่มีวิธีการมาตรฐานสำหรับการจัดเก็บ ด้านล่างนี้เราจะอธิบายถึงวิธีที่โปรแกรมเปลี่ยนไฟล์ 2 แบบที่ใช้กันมากที่สุด ได้แก่ LAME และ iTunes จัดเก็บข้อมูลเมตาที่ไม่ขาดตอน เริ่มด้วยการกำหนดวิธีการช่วยเหลือและเค้าโครงสำหรับ ParseGaplessData() ที่ใช้ข้างต้น
// Since most MP3 encoders store the gapless metadata in binary, we'll need a
// method for turning bytes into integers. Note: This doesn't work for values
// larger than 2^30 since we'll overflow the signed integer type when shifting.
function ReadInt(buffer) {
var result = buffer.charCodeAt(0);
for (var i = 1; i < buffer.length; ++i) {
result <<../= 8;
result += buffer.charCodeAt(i);
}
return result;
}
function ParseGaplessData(arrayBuffer) {
// Gapless data is generally within the first 512 bytes, so limit parsing.
var byteStr = new TextDecoder().decode(arrayBuffer.slice(0, 512));
var frontPadding = 0, endPadding = 0, realSamples = 0;
// ... we'll fill this in as we go below.
เราจะพูดถึงรูปแบบข้อมูลเมตา iTunes ของ Apple ก่อน เนื่องจากการแยกวิเคราะห์และอธิบายที่ง่ายที่สุด ภายในไฟล์ MP3 และ M4A iTunes (และ afconvert) ให้เขียนส่วนสั้นๆ ใน ASCII ดังนี้
iTunSMPB[ 26 bytes ]0000000 00000840 000001C0 0000000000046E00
โดยเขียนขึ้นภายในแท็ก ID3 ภายในคอนเทนเนอร์ MP3 และภายในอะตอมของข้อมูลเมตาภายในคอนเทนเนอร์ MP4 ตามวัตถุประสงค์ของเรา เราจะไม่สนใจโทเค็น 0000000 แรก โทเค็น 3 รายการถัดไป ได้แก่ ระยะห่างจากขอบด้านหน้า ระยะห่างจากขอบส่วนท้าย และจำนวนตัวอย่างที่ไม่ใช่ระยะห่างจากขอบทั้งหมด การหารแต่ละวิดีโอด้วยอัตราการสุ่มตัวอย่างของเสียงจะทำให้เรามีระยะเวลาของเสียงนั้นๆ
// iTunes encodes the gapless data as hex strings like so:
//
// 'iTunSMPB[ 26 bytes ]0000000 00000840 000001C0 0000000000046E00'
// 'iTunSMPB[ 26 bytes ]####### frontpad endpad real samples'
//
// The approach here elides the complexity of actually parsing MP4 atoms. It
// may not work for all files without some tweaks.
var iTunesDataIndex = byteStr.indexOf('iTunSMPB');
if (iTunesDataIndex != -1) {
var frontPaddingIndex = iTunesDataIndex + 34;
frontPadding = parseInt(byteStr.substr(frontPaddingIndex, 8), 16);
var endPaddingIndex = frontPaddingIndex + 9;
endPadding = parseInt(byteStr.substr(endPaddingIndex, 8), 16);
var sampleCountIndex = endPaddingIndex + 9;
realSamples = parseInt(byteStr.substr(sampleCountIndex, 16), 16);
}
ในทางกลับกัน โปรแกรมเปลี่ยนไฟล์ MP3 แบบโอเพนซอร์สส่วนใหญ่จะเก็บข้อมูลเมตาที่ไม่มีช่องว่างภายในส่วนหัว Xing พิเศษที่ใส่ไว้ในเฟรม MPEG เงียบ (เป็นโหมดเงียบ ดังนั้นตัวถอดรหัสที่ไม่เข้าใจส่วนหัวของ Xing ก็จะเล่นแบบเงียบ) ขออภัย แท็กนี้ไม่ได้แสดงอยู่ทุกครั้งและมีช่องที่ไม่บังคับหลายช่อง สำหรับวัตถุประสงค์ของการสาธิตนี้ เราสามารถควบคุมสื่อได้ แต่ในทางปฏิบัติแล้ว จะต้องมีการตรวจสอบเพิ่มเติมบางอย่างเพื่อให้ทราบเมื่อข้อมูลเมตาที่ไม่ขาดตอนพร้อมใช้งานจริง
ก่อนอื่น เราจะแยกวิเคราะห์จำนวนตัวอย่างทั้งหมด เพื่อความเรียบง่าย เราจะอ่านข้อความนี้จากส่วนหัว Xing แต่สามารถสร้างจากส่วนหัวเสียง MPEG ปกติได้ สามารถทำเครื่องหมายส่วนหัว Xing ด้วยแท็ก Xing หรือ Info 4 ไบต์หลังแท็กนี้จะมี 32 บิตที่แสดงถึงจำนวนเฟรมทั้งหมดในไฟล์ การคูณค่านี้ด้วยจำนวนตัวอย่างต่อเฟรมจะทำให้เราได้ตัวอย่างทั้งหมดในไฟล์
// Xing padding is encoded as 24bits within the header. Note: This code will
// only work for Layer3 Version 1 and Layer2 MP3 files with XING frame counts
// and gapless information. See the following document for more details:
// http://www.codeproject.com/Articles/8295/MPEG-Audio-Frame-Header
var xingDataIndex = byteStr.indexOf('Xing');
if (xingDataIndex == -1) xingDataIndex = byteStr.indexOf('Info');
if (xingDataIndex != -1) {
// See section 2.3.1 in the link above for the specifics on parsing the Xing
// frame count.
var frameCountIndex = xingDataIndex + 8;
var frameCount = ReadInt(byteStr.substr(frameCountIndex, 4));
// For Layer3 Version 1 and Layer2 there are 1152 samples per frame. See
// section 2.1.5 in the link above for more details.
var paddedSamples = frameCount * 1152;
// ... we'll cover this below.
ตอนนี้เรามีจำนวนตัวอย่างทั้งหมดแล้ว เราจะไปอ่านจำนวนตัวอย่างระยะห่างจากขอบกัน ซึ่งอาจเขียนไว้ภายใต้แท็ก LAME หรือ Lavf ที่ฝังในส่วนหัวของ Xing ทั้งนี้ขึ้นอยู่กับโปรแกรมเปลี่ยนไฟล์ของคุณ โดย 17 ไบต์หลังจากส่วนหัวนี้จะมี 3 ไบต์ที่แสดงถึงระยะห่างจากขอบหน้าและปลายทางแบบ 12 บิตตามลำดับ
xingDataIndex = byteStr.indexOf('LAME');
if (xingDataIndex == -1) xingDataIndex = byteStr.indexOf('Lavf');
if (xingDataIndex != -1) {
// See http://gabriel.mp3-tech.org/mp3infotag.html#delays for details of
// how this information is encoded and parsed.
var gaplessDataIndex = xingDataIndex + 21;
var gaplessBits = ReadInt(byteStr.substr(gaplessDataIndex, 3));
// Upper 12 bits are the front padding, lower are the end padding.
frontPadding = gaplessBits >> 12;
endPadding = gaplessBits & 0xFFF;
}
realSamples = paddedSamples - (frontPadding + endPadding);
}
return {
audioDuration: realSamples * SECONDS_PER_SAMPLE,
frontPaddingDuration: frontPadding * SECONDS_PER_SAMPLE
};
}
เราจึงมีฟังก์ชันที่ครบถ้วนในการแยกวิเคราะห์เนื้อหาส่วนใหญ่ที่ไม่ขาดตอน อย่างไรก็ตาม กรณี Edge ก็มีอยู่มากมาย เราจึงขอแนะนำให้ใช้ความระมัดระวังก่อนใช้โค้ดที่คล้ายกันในเวอร์ชันที่ใช้งานจริง
ภาคผนวก C: เกี่ยวกับการเก็บขยะ
หน่วยความจำที่เป็นของอินสแตนซ์ SourceBuffer จะมีขยะที่รวบรวมอยู่ตามประเภทเนื้อหา ขีดจำกัดเฉพาะแพลตฟอร์ม และตำแหน่งการเล่นปัจจุบัน ใน Chrome ระบบจะเรียกคืนหน่วยความจำจากบัฟเฟอร์ที่เล่นไปแล้วก่อน แต่หากการใช้งานหน่วยความจำเกินขีดจำกัดเฉพาะแพลตฟอร์ม ระบบจะนำหน่วยความจำออกจากบัฟเฟอร์ที่ยังไม่ได้เล่น
เมื่อการเล่นถึงช่องว่างในไทม์ไลน์เนื่องจากหน่วยความจำกลับคืนมา ระบบอาจเกิดข้อบกพร่องหากมีขนาดเล็กเพียงพอหรือหยุดชะงักหากช่องว่างมีขนาดใหญ่เกินไป ทั้ง 2 อย่างนี้ก็ไม่ใช่ประสบการณ์ที่ดีสำหรับผู้ใช้ ดังนั้น จึงควรหลีกเลี่ยงการเพิ่มข้อมูลต่อท้ายพร้อมกันมากเกินไป และควรลบช่วงออกจากไทม์ไลน์ของสื่อที่ไม่จำเป็นอีกต่อไปด้วยตนเอง
คุณนำช่วงออกได้ด้วยเมธอด remove() ใน SourceBuffer แต่ละรายการ ซึ่งจะใช้เวลา [start, end] เป็นวินาที เช่นเดียวกับ appendBuffer() remove() แต่ละรายการจะเริ่มเหตุการณ์ updateend เมื่อเสร็จสิ้น ไม่ควรออกหรือนำข้อมูลอื่นๆ ออกจนกว่าเหตุการณ์จะเริ่มทำงาน
ใน Chrome บนเดสก์ท็อป คุณสามารถเก็บเนื้อหาเสียงได้ประมาณ 12 เมกะไบต์และเนื้อหาวิดีโอ 150 เมกะไบต์ในหน่วยความจำพร้อมกัน คุณไม่ควรเชื่อถือค่าเหล่านี้ในเบราว์เซอร์หรือแพลตฟอร์มต่างๆ เช่น ค่าเหล่านี้ไม่ได้เป็นตัวแทนของอุปกรณ์เคลื่อนที่อย่างแน่นอน
การรวบรวมขยะจะส่งผลต่อข้อมูลที่เพิ่มไปยัง SourceBuffers เท่านั้น โดยไม่มีขีดจำกัดเกี่ยวกับปริมาณข้อมูลที่คุณบัฟเฟอร์ได้ในตัวแปร JavaScript คุณอาจผนวกข้อมูลเดียวกันไว้ในตำแหน่งเดียวกันได้ด้วยหากจำเป็น