כיצד זרם אודיו מקוצץ באמצעות

עם ה ממשק API של MediaSource, אתה יכול ליצור ולהגדיר זרמי מדיה ממש בדפדפן. זה מאפשר לך לבצע מגוון של פעולות על נתוני מדיה המוחזקים על ידי תגי HTML הקשורים לתוכן כגון או . למשל, אתה יכול לערבב זרמים שונים, ליצור מדיה חופפת - -, מדיה העומס העצל, ו ערוך ערכי מדיה כגון שינוי עוצמת הקול או התדר.

במאמר זה נלמד במיוחד כיצד זרם מדגם שמע (קובץ MP3 חתוך) עם ממשק API של MediaSource ממש בדפדפן כדי הצג מראש מוסיקה אל הקהל שלך. נסקור כיצד לזהות תמיכה עבור ה- API, איך ל חבר את אלמנט HTML Media ל- API, כיצד אחזר את המדיה דרך אייאקס, ולבסוף איך זרם זה.

אם אתה רוצה לראות מראש מה אנחנו עושים, יש להסתכל על קוד המקור על, או לבדוק את דף הדגמה.

שלב 1. צור את ה- HTML

כדי ליצור את ה- HTML, הוסף עם a שולטת תכונה אל הדף שלך. עבור תאימות לאחור, גם הוסף הודעת שגיאה המוגדרת כברירת מחדל עבור משתמשים שדפדפנים שלהם אינם תומכים בתכונה. אנו נשתמש ב- JavaScript כדי להפעיל / לכבות את ההודעה.

שלב 2. זיהוי תמיכה בדפדפן

ב- JavaScript, צור נסה לתפוס לחסום את זה לזרוק שגיאה אם ממשק API של MediaSource אינו נתמך על ידי הדפדפן של המשתמש, או, עם מילים אחרות אם מדיה (המפתח) לא קיים בתוך ה חלון אובייקט.

 נסה if '!' MediaSource 'בחלון) ".  

שלב 3. זיהוי תמיכה MIME

לאחר בדיקת התמיכה, גם לבדוק את תמיכה מסוג MIME. אם סוג ה- MIME של המדיה שברצונך להזרים אינו נתמך על ידי הדפדפן, התראה על המשתמש ו לזרוק שגיאה.

var mime = 'audio / mpeg'; אם (!) MediaSource.isTypeSupported (mime)) התראה ('לא ניתן להפעיל את המדיה מדיה של סוג MIME' + mime + 'אינה נתמכת.'); ('מדיה מסוג' + mime + 'אינה נתמכת');  

שים לב שקטע הקוד שלמעלה צריך להיות ממוקם בתוך נסה בלוק, לפני ה לתפוס בלוק (עבור הפניה, בצע את מספור הקו או לבדוק את הקובץ JS הסופי על Github).

שלב 4. קישור תג ל- API של MediaSource

ליצור חדש מדיה אובייקט ו להקצות אותו כמקור של תג באמצעות URL.createObjectURL () שיטה.

 var audio = document.querySelector ('שמע'), mediaSource = New MediaSource (); audio.src = URL.createObjectURL (mediaSource); 

שלב 5. הוסף a מקור להתנגד ל מדיה

כאשר אלמנט HTML מדיה גישה למקור מדיה והוא מוכן ליצור מקור חפצים, ממשק ה- API של MediaSource שריפות א המקור אירוע .

ה מקור אובייקט מחזיקה נתח של מדיה כי בסופו של דבר מפוענח, מעובד ומשוחק. בודד מדיה אובייקט יכול יש מרובים מקור חפצים.

בתוך ה אירוע האירוע של המקור אירוע, הוסף מקור להתנגד ל מדיה עם ה addSourceBuffer () שיטה.

 mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime);); 

שלב 6. אחזר את המדיה

עכשיו שיש לך מקור אובייקט, הגיע הזמן אחזר את קובץ ה- MP3. בדוגמה שלנו, אנחנו נעשה זאת על ידי באמצעות בקשת AJAX.

להשתמש מערך כפי ש responseType, איזה מסמן נתונים בינאריים. כאשר התגובה מוצגת בהצלחה, הוסף אותו מקור עם ה appendBuffer () שיטה.

 ("מקור",) פונקציה () var sourceBuffer = this.addSourceBuffer (mime); var xhr = XMLHttpRequest חדש; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ) xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); break; case 404: לזרוק 'קובץ לא נמצא', ברירת המחדל: לזרוק 'נכשל להביא את file '; לתפוס (ה) console.error (e);; xhr.send ();); 

שלב 7. ציין את סוף הזרם

כאשר ה- API סיים לצרף את הנתונים מקור א האירוע נקרא עדכון הוא ירה. בתוך מטפל באירועים, התקשר אל סוף הזרם() שיטה של מדיה ל מציינים שהזרם הסתיים.

 ("מקור",) פונקציה () var sourceBuffer = this.addSourceBuffer (mime); var xhr = XMLHttpRequest חדש; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; (x). = () (). ): 404: לזרוק 'קובץ לא נמצא', ברירת המחדל: לזרוק 'נכשל לאחזר את הקובץ'; לתפוס (e) console.error (e);; xhr.send ();) ; 

שלב 8. לקצץ את קובץ המדיה

ה מקור אובייקט יש שני מאפיינים שקוראים לו הוספה ו הוספה המייצג את התחלה וסיום של נתוני התקשורת אתה רוצה לסנן. הקוד המודגש למטה מסנן את ארבע השניות הראשונות של MP3.

 mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0; ...); 

הדגמה

וזה הכל, שלנו מדגם שמע מוזרם מימין מתוך דף האינטרנט. בשביל ה קוד מקור, יש להסתכל על שלנו ג 'יטו ריפו ועל התוצאה הסופית, לבדוק את דף הדגמה.

תמיכה בדפדפן

נכון לכתוב הודעה זו, מדיה API נתמך באופן רשמי בכל הדפדפנים העיקריים. אבל הבדיקה מראה כי יישום הוא, ו Webkit דפדפנים עדיין יש בעיות עם הוספה נכס.

כמו ה- MediaSource API עדיין בשלב הניסוי שלה, גישה לפונקציות עריכה גבוהות יותר עשויה להיות מוגבלת אך זרימה בסיסית תכונה היא משהו שאתה יכול לעשות שימוש מיידי.