ওয়েব অডিও API এর সাথে গেম অডিও তৈরি করা হচ্ছে

Boris Smus

ভূমিকা

অডিও মাল্টিমিডিয়া অভিজ্ঞতাকে এত আকর্ষক করে তোলে তার একটি বিশাল অংশ। আপনি যদি কখনও শব্দ বন্ধ করে সিনেমা দেখার চেষ্টা করে থাকেন তবে আপনি সম্ভবত এটি লক্ষ্য করেছেন।

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

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

ওয়েবে গেম অডিও

সাধারণ গেমগুলির জন্য, <audio> ট্যাগ ব্যবহার করা যথেষ্ট হতে পারে। যাইহোক, অনেক ব্রাউজার দুর্বল বাস্তবায়ন প্রদান করে, যার ফলে অডিও সমস্যা এবং উচ্চ বিলম্ব হয়। এটি আশা করা যায় একটি অস্থায়ী সমস্যা, যেহেতু বিক্রেতারা তাদের নিজ নিজ বাস্তবায়ন উন্নত করার জন্য কঠোর পরিশ্রম করছে। <audio> ট্যাগের অবস্থার এক ঝলক দেখার জন্য, areweplayingyet.org- এ একটি চমৎকার পরীক্ষা স্যুট রয়েছে।

<audio> ট্যাগ স্পেসিফিকেশনের গভীরে তাকালে, তবে, এটা স্পষ্ট হয়ে যায় যে অনেকগুলি জিনিস আছে যা কেবল এটি দিয়ে করা যায় না, যা আশ্চর্যজনক নয়, যেহেতু এটি মিডিয়া প্লেব্যাকের জন্য ডিজাইন করা হয়েছিল। কিছু সীমাবদ্ধতা অন্তর্ভুক্ত:

• সাউন্ড সিগন্যালে ফিল্টার প্রয়োগ করার ক্ষমতা নেই
• কাঁচা পিসিএম ডেটা অ্যাক্সেস করার কোনও উপায় নেই
• সূত্র এবং শ্রোতাদের অবস্থান এবং দিকনির্দেশের কোন ধারণা নেই
• কোন সূক্ষ্ম-শস্যময় সময়।

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

ব্যাকগ্রাউন্ড মিউজিক

গেমগুলি প্রায়শই লুপে ব্যাকগ্রাউন্ড মিউজিক বাজতে থাকে।

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

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

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

এর পরে, আপনি প্রতিটি নোডের জন্য একটি উত্স তৈরি করুন এবং প্রতিটি উত্সের জন্য একটি লাভ নোড তৈরি করুন এবং গ্রাফটি সংযুক্ত করুন।

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

// Assume gains is an array of AudioGainNode, normVal is the intensity
// between 0 and 1.
var value = normVal - (gains.length - 1);
// First reset gains on all nodes.
for (var i = 0; i < gains.length; i++) {
    gains[i].gain.value = 0;
}
// Decide which two nodes we are currently between, and do an equal
// power crossfade between them.
var leftNode = Math.floor(value);
// Normalize the value between 0 and 1.
var x = value - leftNode;
var gain1 = Math.cos(x - 0.5*Math.PI);
var gain2 = Math.cos((1.0 - x) - 0.5*Math.PI);
// Set the two gains accordingly.
gains[leftNode].gain.value = gain1;
// Check to make sure that there's a right node.
if (leftNode < gains.length - 1) {
    // If there is, adjust its gain.
    gains[leftNode + 1].gain.value = gain2;
}

উপরের পদ্ধতিতে, দুটি উত্স একবারে খেলা করে, এবং আমরা সমান শক্তি বক্ররেখা ব্যবহার করে তাদের মধ্যে ক্রসফেড করি (যেমন ভূমিকায় বর্ণিত হয়েছে)।

অনুপস্থিত লিঙ্ক: ওয়েব অডিওতে অডিও ট্যাগ

অনেক গেম ডেভেলপার আজ তাদের ব্যাকগ্রাউন্ড মিউজিকের জন্য <audio> ট্যাগ ব্যবহার করে, কারণ এটি স্ট্রিমিং কন্টেন্টের জন্য উপযুক্ত। এখন আপনি একটি ওয়েব অডিও প্রসঙ্গে <audio> ট্যাগ থেকে বিষয়বস্তু আনতে পারেন।

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

var audioElement = document.querySelector('audio');
var mediaSourceNode = context.createMediaElementSource(audioElement);
// Create the filter
var filter = context.createBiquadFilter();
// Create the audio graph.
mediaSourceNode.connect(filter);
filter.connect(context.destination);

ওয়েব অডিও API এর সাথে <audio> ট্যাগ সংহত করার বিষয়ে আরও সম্পূর্ণ আলোচনার জন্য, এই ছোট নিবন্ধটি দেখুন।

শব্দ প্রভাব

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

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

নিম্নলিখিত উদাহরণটি একাধিক স্বতন্ত্র বুলেটের নমুনা থেকে একটি মেশিনগানের রাউন্ড তৈরি করে একাধিক শব্দ উত্স তৈরি করে যার প্লেব্যাক সময়মতো স্তব্ধ হয়।

var time = context.currentTime;
for (var i = 0; i < rounds; i++) {
    var source = this.makeSource(this.buffers[M4A1]);
    source.noteOn(time + i - interval);
}

এখন, যদি আপনার গেমের সমস্ত মেশিনগান ঠিক এইরকম শোনায়, তবে এটি বেশ বিরক্তিকর হবে। অবশ্যই তারা লক্ষ্য থেকে দূরত্ব এবং আপেক্ষিক অবস্থানের উপর ভিত্তি করে শব্দ দ্বারা পরিবর্তিত হবে (পরে এটি সম্পর্কে আরও), তবে এটি যথেষ্ট নাও হতে পারে। সৌভাগ্যবশত ওয়েব অডিও API দুটি উপায়ে উপরের উদাহরণটিকে সহজে টুইক করার একটি উপায় প্রদান করে:

1. বুলেট গুলির মধ্যে সময় একটি সূক্ষ্ম পরিবর্তন সঙ্গে
2. বাস্তব জগতের এলোমেলোতাকে আরও ভালভাবে অনুকরণ করতে প্রতিটি নমুনার প্লেব্যাক রেট (পিচ পরিবর্তন করে) পরিবর্তন করে।

কার্যকরী এই কৌশলগুলির আরও বাস্তব-জীবনের উদাহরণের জন্য, পুল টেবিলের ডেমোটি দেখুন, যা র্যান্ডম স্যাম্পলিং ব্যবহার করে এবং আরও আকর্ষণীয় বল সংঘর্ষের শব্দের জন্য প্লেব্যাক রেট পরিবর্তিত হয়।

3D অবস্থানগত শব্দ

গেমগুলি প্রায়শই কিছু জ্যামিতিক বৈশিষ্ট্য সহ একটি বিশ্বে সেট করা হয়, হয় 2D বা 3D তে৷ যদি এটি হয়, স্টেরিও অবস্থানযুক্ত অডিও অভিজ্ঞতার নিমগ্নতাকে ব্যাপকভাবে বাড়িয়ে তুলতে পারে। সৌভাগ্যবশত, ওয়েব অডিও API বিল্ট-ইন হার্ডওয়্যার ত্বরিত অবস্থানগত অডিও বৈশিষ্ট্যগুলির সাথে আসে যা ব্যবহারের জন্য বেশ সোজা। যাইহোক, আপনাকে নিশ্চিত করতে হবে যে আপনার কাছে স্টেরিও স্পিকার রয়েছে (বিশেষত হেডফোন) নিম্নলিখিত উদাহরণটি বোঝার জন্য।

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

PositionSample.prototype.changePosition = function(position) {
    // Position coordinates are in normalized canvas coordinates
    // with -0.5 < x, y < 0.5
    if (position) {
    if (!this.isPlaying) {
        this.play();
    }
    var mul = 2;
    var x = position.x / this.size.width;
    var y = -position.y / this.size.height;
    this.panner.setPosition(x - mul, y - mul, -0.5);
    } else {
    this.stop();
    }
};

ওয়েব অডিওর স্থানিকীকরণের চিকিৎসা সম্পর্কে জানার বিষয়গুলি:

• শ্রোতা ডিফল্টরূপে মূলে (0, 0, 0)।
• ওয়েব অডিও পজিশনাল এপিআই একক, তাই ডেমো সাউন্ডকে আরও ভালো করার জন্য আমি একটি গুণক প্রবর্তন করেছি।
• ওয়েব অডিও y-is-up কার্টেসিয়ান স্থানাঙ্ক ব্যবহার করে (বেশিরভাগ কম্পিউটার গ্রাফিক্স সিস্টেমের বিপরীত)। এই কারণেই আমি উপরের স্নিপেটে y-অক্ষ অদলবদল করছি

উন্নত: শব্দ শঙ্কু

অবস্থানগত মডেলটি খুবই শক্তিশালী এবং বেশ উন্নত, মূলত OpenAL এর উপর ভিত্তি করে। আরও বিশদ বিবরণের জন্য, উপরের লিঙ্কযুক্ত স্পেকের বিভাগ 3 এবং 4 দেখুন।

ওয়েব অডিও API প্রসঙ্গে সংযুক্ত একটি একক AudioListener রয়েছে যা অবস্থান এবং অভিযোজনের মাধ্যমে স্থানটিতে কনফিগার করা যেতে পারে। প্রতিটি উত্স একটি AudioPannerNode মাধ্যমে পাস করা যেতে পারে, যা ইনপুট অডিও স্থানিককরণ করে। প্যানার নোডের অবস্থান এবং অভিযোজন, সেইসাথে একটি দূরত্ব এবং দিকনির্দেশক মডেল রয়েছে।

দূরত্ব মডেলটি উৎসের নৈকট্যের উপর নির্ভর করে লাভের পরিমাণ নির্দিষ্ট করে, যখন দিকনির্দেশক মডেলটি একটি অভ্যন্তরীণ এবং বাইরের শঙ্কু নির্দিষ্ট করে কনফিগার করা যেতে পারে, যা শ্রোতা অভ্যন্তরীণ শঙ্কুর মধ্যে থাকলে (সাধারণত নেতিবাচক) লাভের পরিমাণ নির্ধারণ করে। ভিতরের এবং বাইরের শঙ্কু, বা বাইরের শঙ্কু বাইরে।

var panner = context.createPanner();
panner.coneOuterGain = 0.5;
panner.coneOuterAngle = 180;
panner.coneInnerAngle = 0;

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

এই বিষয়ে আরও তথ্যের জন্য, [পজিশনাল অডিও এবং ওয়েবজিএল[webgl] মিশ্রিত করার এই বিশদ টিউটোরিয়ালটি পড়ুন।

রুম প্রভাব এবং ফিল্টার

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

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

প্রদত্ত পরিবেশ থেকে কীভাবে আবেগ প্রতিক্রিয়া তৈরি করা যায় সে সম্পর্কে আরও অনেক তথ্যের জন্য, ওয়েব অডিও API স্পেকের কনভোলিউশন অংশে "রেকর্ডিং সেটআপ" বিভাগের মাধ্যমে পড়ুন।

আমাদের উদ্দেশ্যের জন্য আরও গুরুত্বপূর্ণ, ওয়েব অডিও API ConvolverNode ব্যবহার করে আমাদের শব্দগুলিতে এই আবেগ প্রতিক্রিয়াগুলি প্রয়োগ করার একটি সহজ উপায় প্রদান করে৷

// Make a source node for the sample.
var source = context.createBufferSource();
source.buffer = this.buffer;
// Make a convolver node for the impulse response.
var convolver = context.createConvolver();
convolver.buffer = this.impulseResponseBuffer;
// Connect the graph.
source.connect(convolver);
convolver.connect(context.destination);

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

চূড়ান্ত গণনা

সুতরাং আপনি একটি গেম তৈরি করেছেন, আপনার অবস্থানগত অডিও কনফিগার করেছেন এবং এখন আপনার গ্রাফে প্রচুর সংখ্যক অডিওনোড রয়েছে, সবগুলি একই সাথে বাজছে। দুর্দান্ত, তবে এখনও আরও একটি বিষয় বিবেচনা করার আছে:

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

এখানে কর্মে ক্লিপিংয়ের একটি বাস্তব উদাহরণ। তরঙ্গরূপ খারাপ দেখায়:

উপরেরটির মতো কঠোর বিকৃতি শোনা গুরুত্বপূর্ণ, বা বিপরীতভাবে, অত্যধিক দমিত মিশ্রণ যা আপনার শ্রোতাদের ভলিউম বাড়াতে বাধ্য করে। আপনি যদি এই পরিস্থিতিতে থাকেন তবে আপনাকে সত্যিই এটি ঠিক করতে হবে!

ক্লিপিং সনাক্ত করুন

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

// Assume entire sound output is being piped through the mix node.
var meter = context.createJavaScriptNode(2048, 1, 1);
meter.onaudioprocess = processAudio;
mix.connect(meter);
meter.connect(context.destination);

এবং ক্লিপিং নিম্নলিখিত processAudio হ্যান্ডলারে সনাক্ত করা যেতে পারে:

function processAudio(e) {
    var buffer = e.inputBuffer.getChannelData(0);

    var isClipping = false;
    // Iterate through buffer to check if any of the |values| exceeds 1.
    for (var i = 0; i < buffer.length; i++) {
    var absValue = Math.abs(buffer[i]);
    if (absValue >= 1) {
        isClipping = true;
        break;
    }
    }
}

সাধারণভাবে, পারফরম্যান্সের কারণে JavaScriptAudioNode অতিরিক্ত ব্যবহার না করার বিষয়ে সতর্ক থাকুন। এই ক্ষেত্রে, মিটারিংয়ের একটি বিকল্প বাস্তবায়ন, রেন্ডারের সময়ে getByteFrequencyData এর জন্য অডিও গ্রাফে একটি RealtimeAnalyserNode পোল করতে পারে, যেমন requestAnimationFrame দ্বারা নির্ধারিত। এই পদ্ধতিটি আরও কার্যকর, কিন্তু বেশিরভাগ সিগন্যাল মিস করে (যেখানে এটি সম্ভাব্যভাবে ক্লিপ করা যায় এমন জায়গাগুলি সহ), যেহেতু রেন্ডারিং সেকেন্ডে সর্বাধিক 60 বার হয়, যেখানে অডিও সিগন্যাল আরও দ্রুত পরিবর্তিত হয়।

যেহেতু ক্লিপ সনাক্তকরণ খুবই গুরুত্বপূর্ণ, তাই সম্ভবত আমরা ভবিষ্যতে একটি অন্তর্নির্মিত MeterNode ওয়েব অডিও API নোড দেখতে পাব।

ক্লিপিং প্রতিরোধ করুন

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

একটু চিনি যোগ করুন

সংকেতকে মসৃণ করতে এবং সামগ্রিক সংকেতে স্পাইক নিয়ন্ত্রণ করতে সঙ্গীত এবং গেম উৎপাদনে কম্প্রেসার সাধারণত ব্যবহৃত হয়। এই কার্যকারিতাটি DynamicsCompressorNode এর মাধ্যমে ওয়েব অডিও জগতে পাওয়া যায়, যা আপনার অডিও গ্রাফে ঢোকানো যেতে পারে আরও জোরে, আরও সমৃদ্ধ এবং পূর্ণ শব্দ দিতে এবং ক্লিপিংয়ে সহায়তা করতে। সরাসরি বৈশিষ্ট উদ্ধৃতি, এই নোড

দ্রষ্টব্য: …সিগন্যালের উচ্চতম অংশগুলির ভলিউম কমায় এবং সবচেয়ে নরম অংশগুলির ভলিউম বাড়ায়... এটি বিশেষ করে গেম এবং বাদ্যযন্ত্র অ্যাপ্লিকেশনগুলিতে গুরুত্বপূর্ণ যেখানে সামগ্রিক সংকেত স্তর নিয়ন্ত্রণ করতে এবং ক্লিপিং এড়াতে সাহায্য করার জন্য একযোগে প্রচুর সংখ্যক স্বতন্ত্র শব্দ বাজানো হয় .

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

এটি বাস্তবায়ন করা আপনার অডিও গ্রাফে একটি DynamicsCompressorNode অন্তর্ভুক্ত করার বিষয়, সাধারণত গন্তব্যের আগে শেষ নোড হিসাবে।

// Assume the output is all going through the mix node.
var compressor = context.createDynamicsCompressor();
mix.connect(compressor);
compressor.connect(context.destination);

গতিবিদ্যা কম্প্রেশন সম্পর্কে আরো বিস্তারিত জানার জন্য, এই উইকিপিডিয়া নিবন্ধটি খুবই তথ্যপূর্ণ।

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

উপসংহার

ওয়েব অডিও API ব্যবহার করে গেম অডিও ডেভেলপমেন্টের সবচেয়ে গুরুত্বপূর্ণ দিকগুলি আমি মনে করি তা কভার করে। এই কৌশলগুলির সাহায্যে, আপনি আপনার ব্রাউজারেই সত্যিকারের আকর্ষণীয় অডিও অভিজ্ঞতা তৈরি করতে পারেন। আমি সাইন অফ করার আগে, আমি আপনাকে একটি ব্রাউজার-নির্দিষ্ট টিপ দিয়ে রাখি: যদি আপনার ট্যাবটি পৃষ্ঠা দৃশ্যমানতা API ব্যবহার করে ব্যাকগ্রাউন্ডে যায় তবে শব্দ থামাতে ভুলবেন না, অন্যথায় আপনি আপনার ব্যবহারকারীর জন্য একটি সম্ভাব্য হতাশাজনক অভিজ্ঞতা তৈরি করবেন।

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

আমি সাইন অফ করার আগে, আমি আজকে বাস্তব গেমগুলিতে ওয়েব অডিও API-এর কিছু দুর্দান্ত ব্যবহার আপনাকে দিয়ে রাখি:

• ফিল্ড রানার্স , এবং কিছু প্রযুক্তিগত বিবরণ সম্পর্কে একটি লেখা।
• অ্যাংরি বার্ডস , সম্প্রতি ওয়েব অডিও API-তে স্যুইচ করা হয়েছে৷ আরো তথ্যের জন্য এই লেখা দেখুন.
• স্কিড রেসার , যা স্থানিক অডিওর দুর্দান্ত ব্যবহার করে।