কেস-স্টাডি - ক্রোমের সাথে জ্যাম

কিভাবে আমরা অডিও রক করেছি

Oskar Eriksson

ভূমিকা

জ্যাম উইথ ক্রোম হল একটি ওয়েব ভিত্তিক মিউজিক্যাল প্রজেক্ট যা গুগল তৈরি করেছে। ক্রোমের সাথে জ্যাম সারা বিশ্বের লোকেদের একটি ব্যান্ড গঠন করতে দেয় এবং ব্রাউজারের ভিতরে রিয়েল টাইমে জ্যাম করতে দেয়৷ আমরা DinahMoe- এ এই প্রকল্পের অংশ হতে পেরে দারুণ আনন্দ পেয়েছি। আমাদের ভূমিকা ছিল অ্যাপ্লিকেশনের জন্য সঙ্গীত তৈরি করা, এবং সঙ্গীত উপাদান ডিজাইন এবং বিকাশ করা। উন্নয়ন তিনটি প্রধান ক্ষেত্র নিয়ে গঠিত: মিডি প্লেব্যাক, সফটওয়্যার স্যাম্পলার, অডিও ইফেক্ট, রাউটিং এবং মিক্সিং সহ একটি " মিউজিক ওয়ার্কস্টেশন "; রিয়েল-টাইমে মিউজিককে ইন্টারেক্টিভভাবে নিয়ন্ত্রণ করতে একটি মিউজিক লজিক ইঞ্জিন; এবং একটি সিঙ্ক্রোনাইজেশন উপাদান যা নিশ্চিত করে যে একটি সেশনের সমস্ত খেলোয়াড় ঠিক একই সময়ে সঙ্গীত শুনতে পায়, একসাথে বাজতে সক্ষম হওয়ার পূর্বশর্ত।

প্রামাণিকতা, নির্ভুলতা এবং অডিও মানের সর্বোচ্চ সম্ভাব্য স্তর অর্জন করতে আমরা ওয়েব অডিও API ব্যবহার করা বেছে নিয়েছি। এই কেস স্টাডি আমাদের সামনে যে চ্যালেঞ্জগুলি উপস্থাপন করা হয়েছিল এবং আমরা কীভাবে সেগুলি সমাধান করেছি সেগুলি নিয়ে আলোচনা করবে৷ আপনাকে ওয়েব অডিও দিয়ে শুরু করার জন্য HTML5Rocks-এ ইতিমধ্যেই বেশ কয়েকটি দুর্দান্ত পরিচায়ক নিবন্ধ রয়েছে, তাই আমরা সরাসরি পুলের গভীর প্রান্তে ঝাঁপ দেব।

কাস্টম অডিও প্রভাব লেখা

ওয়েব অডিও এপিআই-এর স্পেসিফিকেশনে অন্তর্ভুক্ত অনেকগুলি দরকারী প্রভাব রয়েছে, তবে আমাদের ক্রোমের সাথে JAM-এ আমাদের যন্ত্রগুলির জন্য আরও বিস্তৃত প্রভাবগুলির প্রয়োজন ছিল৷ উদাহরণস্বরূপ, ওয়েব অডিওতে একটি নেটিভ বিলম্ব নোড আছে, তবে অনেক ধরনের বিলম্ব রয়েছে - স্টেরিও বিলম্ব, পিং পং বিলম্ব, স্ল্যাপব্যাক বিলম্ব এবং তালিকাটি চলে। ভাগ্যক্রমে, নেটিভ ইফেক্ট নোড এবং কিছু কল্পনা ব্যবহার করে ওয়েব অডিওতে এই সবগুলি তৈরি করা সম্ভব।

যেহেতু আমরা দেশীয় নোডগুলি এবং আমাদের নিজস্ব কাস্টম প্রভাবগুলি যথাসম্ভব স্বচ্ছ উপায়ে ব্যবহার করতে সক্ষম হতে চেয়েছিলাম, তাই আমরা সিদ্ধান্ত নিয়েছি যে আমাদের একটি মোড়ক বিন্যাস তৈরি করতে হবে যা এটি অর্জন করতে পারে। ওয়েব অডিওতে নেটিভ নোডগুলি নোডগুলিকে একসাথে লিঙ্ক করতে এর সংযোগ পদ্ধতি ব্যবহার করে, তাই আমাদের এই আচরণটি অনুকরণ করতে হবে। এই মৌলিক ধারণা মত দেখায় কি:

var MyCustomNode = function(){
    this.input = audioContext.createGain();
    var output = audioContext.createGain();

    this.connect = function(target){
       output.connect(target);
    };
};

এই প্যাটার্ন দিয়ে আমরা সত্যিই নেটিভ নোডের কাছাকাছি। দেখা যাক কিভাবে এটি ব্যবহার করা হবে।

//create a couple of native nodes and our custom node
var gain = audioContext.createGain(),
    customNode = new MyCustomNode(),
    anotherGain = audioContext.createGain();

//connect our custom node to the native nodes and send to the output
gain.connect(customNode.input);
customNode.connect(anotherGain);
anotherGain.connect(audioContext.destination);

আমাদের কাস্টম নোড এবং একটি নেটিভ নোডের মধ্যে পার্থক্য হল আমাদের কাস্টম নোড ইনপুট সম্পত্তির সাথে সংযোগ করতে হবে। আমি নিশ্চিত যে এটিকে প্রতিরোধ করার উপায় আছে, তবে এটি আমাদের উদ্দেশ্যে যথেষ্ট কাছাকাছি ছিল। এই প্যাটার্নটি নেটিভ অডিওনোডের সংযোগ বিচ্ছিন্ন করার পদ্ধতিগুলিকে অনুকরণ করার জন্য এবং সেইসাথে সংযোগ করার সময় ব্যবহারকারীর সংজ্ঞায়িত ইনপুট/আউটপুটগুলিকে মিটমাট করার জন্য আরও উন্নত করা যেতে পারে। নেটিভ নোডগুলি কী করতে পারে তা দেখতে স্পেসিফিকেশনটি দেখুন।

এখন যেহেতু কাস্টম ইফেক্ট তৈরি করার জন্য আমাদের মৌলিক প্যাটার্ন ছিল, পরবর্তী ধাপটি ছিল আসলে কাস্টম নোডকে কিছু কাস্টম আচরণ দেওয়া। এর একটি slapback বিলম্ব নোড কটাক্ষপাত আছে.

স্ল্যাপব্যাক আপনি এটা মানে

স্ল্যাপব্যাক বিলম্ব, যাকে কখনও কখনও স্ল্যাপব্যাক ইকো বলা হয়, এটি একটি ক্লাসিক প্রভাব যা 50-এর স্টাইলের ভোকাল থেকে সার্ফ গিটার পর্যন্ত বেশ কয়েকটি যন্ত্রে ব্যবহৃত হয়। প্রভাবটি আগত শব্দটি নেয় এবং আনুমানিক 75-250 মিলিসেকেন্ডের সামান্য বিলম্বের সাথে শব্দের একটি অনুলিপি চালায়। এটি শব্দটি পিছনে থাপ্পড় মারার অনুভূতি দেয়, এইভাবে নাম। আমরা এর মতো প্রভাব তৈরি করতে পারি:

var SlapbackDelayNode = function(){
    //create the nodes we'll use
    this.input = audioContext.createGain();
    var output = audioContext.createGain(),
        delay = audioContext.createDelay(),
        feedback = audioContext.createGain(),
        wetLevel = audioContext.createGain();

    //set some decent values
    delay.delayTime.value = 0.15; //150 ms delay
    feedback.gain.value = 0.25;
    wetLevel.gain.value = 0.25;

    //set up the routing
    this.input.connect(delay);
    this.input.connect(output);
    delay.connect(feedback);
    delay.connect(wetLevel);
    feedback.connect(delay);
    wetLevel.connect(output);

    this.connect = function(target){
       output.connect(target);
    };
};

আপনার মধ্যে কেউ কেউ হয়তো ইতিমধ্যেই বুঝতে পেরেছেন, এই বিলম্বটি আরও বড় বিলম্বের সময় ব্যবহার করা যেতে পারে এবং এইভাবে প্রতিক্রিয়া সহ একটি নিয়মিত মনো বিলম্বে পরিণত হয়। এই বিলম্বটি ব্যবহার করে এটি কেমন শোনাচ্ছে তা শুনতে দেওয়ার জন্য এখানে একটি উদাহরণ দেওয়া হল।

অডিও রাউটিং

পেশাদার অডিও অ্যাপ্লিকেশনগুলিতে বিভিন্ন যন্ত্র এবং বাদ্যযন্ত্রের অংশগুলির সাথে কাজ করার সময় একটি নমনীয় রাউটিং সিস্টেম থাকা অপরিহার্য যা আপনাকে কার্যকর উপায়ে শব্দগুলিকে মিশ্রিত করতে এবং পরিবর্তন করতে দেয়৷ ক্রোমের সাথে JAM-এ আমরা একটি অডিও বাস সিস্টেম তৈরি করেছি, যা ফিজিক্যাল মিক্সিং বোর্ডে পাওয়া যায়। এটি আমাদের একটি সাধারণ বাস, বা চ্যানেলে একটি রিভার্ব প্রভাবের প্রয়োজন এমন সমস্ত যন্ত্রকে সংযুক্ত করতে দেয় এবং তারপর প্রতিটি পৃথক যন্ত্রে একটি রিভার্ব যোগ করার পরিবর্তে সেই বাসে রিভার্ব যোগ করতে দেয়। এটি একটি প্রধান অপ্টিমাইজেশান এবং আপনি আরও জটিল অ্যাপ্লিকেশনগুলি করা শুরু করার সাথে সাথে অনুরূপ কিছু করার জন্য এটি বেশ সুপারিশ করা হয়৷

ভাগ্যক্রমে ওয়েব অডিওতে এটি অর্জন করা সত্যিই সহজ। আমরা মূলত প্রভাবগুলির জন্য সংজ্ঞায়িত কঙ্কাল ব্যবহার করতে পারি এবং একইভাবে এটি ব্যবহার করতে পারি।

var AudioBus = function(){
    this.input = audioContext.createGain();
    var output = audioContext.createGain();

    //create effect nodes (Convolver and Equalizer are other custom effects from the library presented at the end of the article)
    var delay = new SlapbackDelayNode(),
        convolver = new tuna.Convolver(),
        equalizer = new tuna.Equalizer();

    //route 'em
    //equalizer -> delay -> convolver
    this.input.connect(equalizer);
    equalizer.connect(delay.input);
    delay.connect(convolver);
    convolver.connect(output);

    this.connect = function(target){
       output.connect(target);
    };
};

এটি এই মত ব্যবহার করা হবে:

//create some native oscillators and our custom audio bus
var bus = new AudioBus(),
    instrument1 = audioContext.createOscillator(),
    instrument2 = audioContext.createOscillator(),
    instrument3 = audioContext.createOscillator();

//connect our instruments to the same bus
instrument1.connect(bus.input);
instrument2.connect(bus.input);
instrument3.connect(bus.input);
bus.connect(audioContext.destination);

এবং ভয়েলা, আমরা বিলম্ব, সমানীকরণ এবং রিভার্ব প্রয়োগ করেছি (যা একটি বরং ব্যয়বহুল প্রভাব, কর্মক্ষমতা অনুসারে) অর্ধেক খরচে যেন আমরা প্রতিটি পৃথক যন্ত্রে প্রভাব প্রয়োগ করেছি। যদি আমরা বাসে কিছু অতিরিক্ত মশলা যোগ করতে চাই, আমরা দুটি নতুন গেইন নোড যোগ করতে পারি - প্রিগেইন এবং পোস্টগেইন - যা আমাদের দুটি ভিন্ন উপায়ে বাসে শব্দ বন্ধ বা বিবর্ণ করতে দেয়। প্রভাবের আগে প্রিগেইন রাখা হয়, এবং পোস্টগেইন চেইনের শেষে রাখা হয়। আমরা যদি প্রিগেইন ফেইড করি তাহলে লাভ নিচের দিকে যাওয়ার পরেও প্রভাবগুলি অনুরণিত হবে, কিন্তু আমরা যদি পোস্টগেইন ফেইড করি তবে একই সময়ে সমস্ত সাউন্ড মিউট হয়ে যাবে।

এখান থেকে কোথায়?

আমি এখানে বর্ণনা করেছি এই পদ্ধতিগুলি আরও উন্নত করা যেতে পারে এবং করা উচিত। কাস্টম নোডের ইনপুট এবং আউটপুট এবং সংযোগ পদ্ধতির মতো জিনিসগুলি প্রোটোটাইপ ভিত্তিক উত্তরাধিকার ব্যবহার করে প্রয়োগ করা উচিত। বাসগুলি প্রভাবগুলির একটি তালিকা পাস করে গতিশীলভাবে প্রভাব তৈরি করতে সক্ষম হওয়া উচিত।

Chrome-এর সাথে JAM-এর প্রকাশ উদযাপন করতে আমরা আমাদের প্রভাবের কাঠামোকে ওপেন সোর্স করার সিদ্ধান্ত নিয়েছি। যদি এই সংক্ষিপ্ত ভূমিকা আপনার অভিনব সুড়সুড়ি দেয়, অনুগ্রহ করে একবার দেখুন এবং নির্দ্বিধায় অবদান রাখুন। কাস্টম ওয়েব অডিও সত্তার জন্য একটি বিন্যাস মানসম্মত করার বিষয়ে এখানে একটি আলোচনা চলছে। জড়িত!