WebRTC के साथ MediaStream इंटिग्रेशन के तहत, Web Audio API में हाल ही में एक ऐसा बेहतरीन टूल लॉन्च किया गया है जिसे createMediaElementSource() कहा जाता है. आम तौर पर, इससे एपीआई के इनपुट सोर्स के तौर पर, HTML5 <audio> एलिमेंट को जोड़ा जा सकता है. आसान शब्दों में कहें, तो...इसकी मदद से HTML5 ऑडियो को विज़ुअलाइज़ किया जा सकता है, रीयल टाइम में साउंड में बदलाव किया जा सकता है, फ़िल्टर किया जा सकता है वगैरह!
आम तौर पर, Web Audio API किसी गाने को XHR2, फ़ाइल इनपुट वगैरह के ज़रिए लोड करता है. इसके बजाय, इस हुक की मदद से, Web Audio API के विज़ुअलाइज़ेशन, फ़िल्टर, और प्रोसेसिंग की सुविधाओं के साथ HTML5 <audio> को जोड़ा जा सकता है.
<audio> के साथ इंटिग्रेट करना, लंबी ऑडियो ऐसेट स्ट्रीम करने के लिए सबसे सही है. मान लें कि आपकी फ़ाइल दो घंटे की है. आपको उस पूरी चीज़ को डिकोड नहीं करना है! अगर आपको वीडियो चलाने/रोकने/स्किप करने के लिए, हाई-लेवल मीडिया प्लेयर एपीआई (और यूज़र इंटरफ़ेस) बनाना है, लेकिन आपको कुछ और प्रोसेसिंग/विश्लेषण भी लागू करने हैं, तो यह भी दिलचस्प है.
यहां बताया गया है कि यह कैसा दिखता है:
// 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> टैग में ऑडियो इनपुट (जैसे, माइक, मिक्सर, गिटार) को पाइप करने के लिए जोड़ा जा सकेगा.इसके बाद, Web Audio API का इस्तेमाल करके इसे विज़ुअलाइज़ किया जा सकेगा. मेगा बूम!