MediaSource API का उपयोग करके ऑडियो को कैसे काट दिया जाए
उसके साथ MediaSource एपीआई, आप ऐसा कर सकते हैं मीडिया स्ट्रीम उत्पन्न और कॉन्फ़िगर करें ब्राउज़र में सही है। यह आपको अनुमति देता है मीडिया डेटा पर कई तरह के ऑपरेशन करते हैं मीडिया से संबंधित एचटीएमएल टैग जैसे या . उदाहरण के लिए, आप कर सकते हैं विभिन्न धाराओं को मिलाएं, ओवरलैपिंग मीडिया बनाएँ, आलसी लोड मीडिया, तथा मीडिया मीट्रिक संपादित करें जैसे वॉल्यूम या फ़्रीक्वेंसी बदलना.
इस पोस्ट में, हम विशेष रूप से देखेंगे कि कैसे एक ऑडियो नमूना स्ट्रीम करें (एक छिन्न एमपी 3 फ़ाइल) के साथ MediaSource एपीआई ब्राउज़र में सही करने के लिए संगीत दिखाने से पहले अपने दर्शकों के लिए। हम कैसे कवर करेंगे एपीआई के लिए समर्थन का पता लगाएं, कैसे HTML मीडिया तत्व कनेक्ट करें एपीआई के लिए, कैसे करें मीडिया को लाना अजाक्स के माध्यम से, और अंत में कैसे इसे स्ट्रीम करें.
यदि आप पहले से देखना चाहते हैं कि हम क्या कर रहे हैं, तो एक नजर डालें स्रोत कोड Github पर, या बाहर की जाँच करें डेमो पेज.
स्टेप 1. HTML बनाएं
HTML बनाने के लिए, a जोड़ें एक के साथ टैग नियंत्रण गुण अपने पेज पर पिछड़ी अनुकूलता के लिए भी डिफ़ॉल्ट त्रुटि संदेश जोड़ें उन उपयोगकर्ताओं के लिए जिनके ब्राउज़र सुविधा का समर्थन नहीं करते हैं। हम इस संदेश को चालू / बंद करने के लिए जावास्क्रिप्ट का उपयोग करेंगे.
चरण 2. ब्राउज़र समर्थन का पता लगाएं
जावास्क्रिप्ट में, एक बनाएँ पकड़ने की कोशिश ब्लॉक करेगा कि एक त्रुटि यदि MediaSource API समर्थित नहीं है उपयोगकर्ता के ब्राउज़र द्वारा, या, यदि अन्य शब्दों के साथ MediaSource (चाबी) अस्तित्व में नहीं है में खिड़की वस्तु.
(! 'MediaSource' विंडो में) का प्रयास करें, नए ReferenceError को फेंकें ('विंडो ऑब्जेक्ट में MediaSource नहीं है।') catch (e) कंसोल.लॉग (e)। चरण 3. MIME समर्थन का पता लगाएं
समर्थन जाँच के बाद, के लिए भी जाँच करें MIME प्रकार का समर्थन. यदि मीडिया का MIME प्रकार जिसे आप स्ट्रीम करना चाहते हैं, वह ब्राउज़र द्वारा समर्थित नहीं है, उपयोगकर्ता को सचेत करें तथा एक त्रुटि.
var माइम = 'ऑडियो / एमपीईजी'; if ((MediaSource.isTypeSupported (mime)) अलर्ट ('मीडिया नहीं चला सकता है। MIME टाइप का मीडिया' + माइम + 'समर्थित नहीं है।'); फेंक ('प्रकार का मीडिया' + माइम + 'समर्थित नहीं है।)); ध्यान दें कि ऊपर कोड स्निपेट होना चाहिए अंदर रखा प्रयत्न खंड, से पहले पकड़ ब्लॉक करें (संदर्भ के लिए, लाइन नंबरिंग का पालन करें या जीथुब पर अंतिम जेएस फ़ाइल देखें).
चरण 4. लिंक
कोई नया बनाएं MediaSource वस्तु, और के स्रोत के रूप में असाइन करें टैग का उपयोग करके URL.createObjectURL () तरीका.
var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); Audio.src = URL.createObjectURL (mediaSource); चरण 5. एक जोड़ें SourceBuffer करने के लिए वस्तु MediaSource
जब एक HTML मीडिया तत्व एक मीडिया स्रोत तक पहुँचता है और करने के लिए तैयार है सर्जन करना SourceBuffer वस्तुओं, मीडिया स्रोत एपीआई आग 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 = new XMLHttpRequest; xhr .open ('GET', 'sample.mp3'); xhr.responseType = 'array_uff ; xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); ब्रेक; केस 404: थ्रो Not फाइल नॉट फाउंड ’; डिफ़ॉल्ट - थ्रो’ को लाने में असफल रहा। फ़ाइल '; कैच (ई) कंसोल.इरोर (ई);; xhr.send ();); चरण 7. धारा के अंत का संकेत दें
जब एपीआई ने डेटा को जोड़ना बंद कर दिया है SourceBuffer एक ईवेंट कहा जाता है updatend निकाल दिया जाता है. किसी इवेंट हैंडलर के अंदर, कॉल करें धारा का अंत() उसकि विधि MediaSource सेवा मेरे इंगित करें कि धारा समाप्त हो गई है.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = new XMLHttpRequest; xhr .open ('GET', 'sample.mp3'); xhr.responseType = 'array_uff ; xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', function (_) mediaSource.endOfStream ();; ); ब्रेक; केस 404: थ्रो 'फाइल नॉट फाउंड'; डिफॉल्ट: थ्रो 'फाइल को लाने में असफल रहा'; (ई) कंसोल.रोर (ई);; xhr.send ();; ; स्टेप 8. मीडिया फाइल को ट्रंक करें
SourceBuffer वस्तु है दो गुण बुलाया appendWindowStart तथा appendWindowEnd का प्रतिनिधित्व कर रहा है मीडिया डेटा का प्रारंभ और समाप्ति समय आप फ़िल्टर करना चाहते हैं। नीचे हाइलाइट किया गया कोड पहले चार सेकंड फ़िल्टर करता है एमपी के.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0;…); डेमो
और बस इतना ही, हमारा ऑडियो सैंपल स्ट्रीम किया गया है वेब पेज से ही सही। के लिए सोर्स कोड, हमारे पर एक नज़र है गितुब रेपो और अंतिम परिणाम के लिए, बाहर की जाँच करें डेमो पेज.
ब्राउज़र का समर्थन
इस पोस्ट को लिखने के रूप में, MediaSource एपीआई सभी प्रमुख ब्राउज़रों में आधिकारिक तौर पर समर्थित है। लेकिन परीक्षण से पता चलता है कि ए कार्यान्वयन फ़ायरफ़ॉक्स में छोटी गाड़ी है, और वेबकिट ब्राउज़रों को अभी भी इससे परेशानी है appendWindowStart संपत्ति.
जैसा कि MediaSource API है अभी भी अपने प्रायोगिक चरण में है, उच्चतर संपादन कार्यों तक पहुँच सीमित हो सकती है लेकिन मूल स्ट्रीमिंग सुविधा कुछ आप कर सकते हैं तुरंत उपयोग करें.
