WebRTC के साथ MediaStream इंटिग्रेशन के तहत, Web Audio API ने हाल ही में एक अंडरकवर जेम लॉन्च किया, जिसे createMediaElementSource() कहा जाता है. इसकी मदद से, HTML5 <audio> एलिमेंट को एपीआई में इनपुट सोर्स के तौर पर जोड़ा जा सकता है. आम शब्दों में...आप HTML5 ऑडियो को विज़ुअलाइज़ कर सकते हैं, रीयल टाइम में आवाज़ में बदलाव कर सकते हैं, फ़िल्टर कर सकते हैं वगैरह!
आम तौर पर, Web Audio API, XHR2 के ज़रिए गाना लोड करके, फ़ाइल इनपुट, कुछ भी,....और आप बंद होते हैं. इससे काम करता है. इसके बजाय, यह हुक आपको Web Audio API के विज़ुअलाइज़ेशन, फ़िल्टर, और प्रोसेसिंग पावर के साथ HTML5 <audio> को जोड़ने की सुविधा देता है.
<audio> के साथ इंटिग्रेट करना, काफ़ी लंबी ऑडियो एसेट स्ट्रीम करने का सबसे सही तरीका है. मान लें कि आपकी फ़ाइल 2 घंटे की है. आप इस पूरी चीज़ को डीकोड नहीं करना चाहते! अगर आपको चलाएं/रोकें/सीक करने के लिए हाई-लेवल मीडिया प्लेयर एपीआई (और यूआई) बनाना हो, लेकिन प्रोसेस या विश्लेषण के लिए कुछ और लागू करना हो, तो यह भी दिलचस्प हो सकता है.
यहां बताया गया है कि यह कैसा दिखता है:
// Create an <audio> element dynamically.
var audio = new Audio();
audio.src = 'myfile.mp3';
audio.controls = true;
audio.autoplay = true;
document.body.appendChild(audio);
var context = new webkitAudioContext();
var analyser = context.createAnalyser();
// Wait for window.onload to fire. See crbug.com/112368
window.addEventListener('load', function(e) {
// Our <audio> element will be the audio source.
var source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
// ...call requestAnimationFrame() and render the analyser's output to canvas.
}, false);
जैसा कि कोड में बताया गया है, एक गड़बड़ी है. इसके लिए ज़रूरी है कि सोर्स सेट अप,
window.onload के बाद किया जाए.
अगला लॉजिकल स्टेप crbub.com/112367 को ठीक करना है. इस कुत्ते का बच्चा तैयार हो जाने के बाद, WebRTC (खास तौर पर navigator.getUserMedia() एपीआई) को <audio> टैग में ऑडियो इनपुट (जैसे, माइक, मिक्सर, गिटार) से पाइप करने के लिए जोड़ा जा सकता है.इसके बाद, वेब ऑडियो एपीआई का इस्तेमाल करके उसे विज़ुअलाइज़ किया जा सकता है. मेगा बूम!