WebRTC-এর সাথে MediaStream ইন্টিগ্রেশনের অংশ হিসেবে, Web Audio API সম্প্রতি createMediaElementSource() নামে পরিচিত একটি গোপন রত্ন অবতরণ করেছে। মূলত, এটি আপনাকে API-তে ইনপুট উত্স হিসাবে একটি HTML5 <audio> উপাদান সংযুক্ত করার অনুমতি দেয়। সাধারণ মানুষের ভাষায়...আপনি HTML5 অডিও ভিজ্যুয়ালাইজ করতে পারেন, রিয়েলটাইম সাউন্ড মিউটেশন, ফিল্টারিং ইত্যাদি করতে পারেন!
সাধারণত, ওয়েব অডিও API XHR2 , ফাইল ইনপুট, যাই হোক না কেন,.... এবং আপনি বন্ধ হয়ে গেলে একটি গান লোড করার মাধ্যমে কাজ করে৷ পরিবর্তে, এই হুক আপনাকে ওয়েব অডিও API এর ভিজ্যুয়ালাইজেশন, ফিল্টার এবং প্রক্রিয়াকরণ শক্তির সাথে HTML5 <audio> একত্রিত করতে দেয়।
মোটামুটি দীর্ঘ অডিও সম্পদ স্ট্রিম করার জন্য <audio> এর সাথে একীভূত করা আদর্শ। আপনার ফাইল 2 ঘন্টা দীর্ঘ বলুন. আপনি যে পুরো জিনিস ডিকোড করতে চান না! আপনি যদি প্লে/পজ/অন্বেষণের জন্য একটি উচ্চ-স্তরের মিডিয়া প্লেয়ার API (এবং UI) তৈরি করতে চান তবে এটিও আকর্ষণীয়, তবে কিছু অতিরিক্ত প্রক্রিয়াকরণ/বিশ্লেষণ প্রয়োগ করতে চান।
এটি দেখতে কেমন তা এখানে রয়েছে:
// 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() API) একটি <audio> ট্যাগে পাইপ অডিও ইনপুট (যেমন মাইক, মিক্সার, গিটার) ওয়্যার আপ করতে সক্ষম হবেন, তারপর এটি ব্যবহার করে কল্পনা করতে পারবেন ওয়েব অডিও API। মেগা বুম!