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। মেগা বুম!