ওয়েব অডিওতে গন্তব্য আউটপুট ডিভাইস পরিবর্তন করুন

ফ্রাঁসোয়া বিউফোর্ট
François Beaufort

এখন পর্যন্ত, গন্তব্য অডিও আউটপুট ডিভাইস সেট করা শুধুমাত্র HTMLMediaElement.setSinkId() এর সাথে <video> এবং <audio> এর জন্য সম্ভব ছিল। ওয়েব অডিওতে , AudioContext ডিফল্ট ডিভাইস ব্যবহার করে, ব্যবহারকারীকে সিস্টেম অডিও আউটপুট ডিভাইসটি ম্যানুয়ালি পরিবর্তন করতে দেয়।

Chrome 110 থেকে, আপনি AudioContext.setSinkId() ব্যবহার করে ওয়েব অডিওতে অডিও আউটপুটকে প্রোগ্রাম্যাটিকভাবে যেকোনো অনুমোদিত ডিভাইসে নির্দেশ করতে পারেন।

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

একটি নির্দিষ্ট ডিভাইসে অডিও আউটপুট রুট করুন

প্রথমত, আপনি যে অডিও আউটপুট ডিভাইসটিকে গন্তব্য হিসাবে ব্যবহার করতে চান তার শনাক্তকারীর প্রয়োজন৷ navigator.mediaDevices.enumerateDevices() সহ উপলব্ধ মিডিয়া ডিভাইসের তালিকা পান, শুধুমাত্র অডিও আউটপুট ডিভাইসে ফিল্টার করুন এবং আপনার পছন্দের অডিও আউটপুট ডিভাইসের deviceId বৈশিষ্ট্য পান। খালি স্ট্রিং "" মানটি deviceId এর জন্য ডিফল্ট ডিভাইস হিসাবেও ব্যবহার করা যেতে পারে।

একবার আপনার কাছে অডিও আউটপুট ডিভাইসের শনাক্তকারী হয়ে গেলে, একটি AudioContext তৈরি করুন এবং audioContext.setSinkId(deviceId) কল করুন। সফল হলে, প্রত্যাবর্তিত প্রতিশ্রুতিটি সমাধান হয়ে যায় যখন অডিওটি নির্বাচিত সংযুক্ত আউটপুট ডিভাইসে রাউট করা হয়। AudioContext বন্ধ থাকলে এটি ব্যর্থ হতে পারে।

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

const permission = await navigator.permissions.query({ name: "microphone" });
if (permission.state == "prompt") {
  // More audio outputs are available when user grants access to the mic.
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  stream.getTracks().forEach((track) => track.stop());
}

// Request a list of media devices and filter audio output devices.
const devices = await navigator.mediaDevices.enumerateDevices();
const audioOutputs = devices.filter(device => device.kind == "audiooutput");

const audioContext = new AudioContext();

// Pick the first available audio output.
const deviceId = audioOutputs[0].deviceId;
await audioContext.setSinkId(deviceId);

মনে রাখবেন যে আপনি একটি AudioContext তৈরি করার সময় একটি sinkId প্যারামিটার হিসাবে deviceId পাস করতে পারেন।

const audioContext = new AudioContext({ sinkId: deviceId });

একটি নিঃশব্দ অডিও কনটেক্সট সহ অডিও রেন্ডার করুন

পাওয়ার খরচ কমানোর জন্য আপনি এখন ওয়েব অডিওতে একটি "নীরব আউটপুট ডিভাইস" নির্দিষ্ট করতে পারেন। এইবার, একটি স্ট্রিং মানের পরিবর্তে, AudioContext.setSinkId(){ type: "none" } পাস করুন।

মনে রাখবেন যে audioContext.currentTime মাধ্যমে অ্যাক্সেসযোগ্য অডিও ঘড়িটি এখনও অডিও গ্রাফ রেন্ডার করতে অগ্রসর হবে৷ এই নিঃশব্দ অডিও কনটেক্সটটির মূল লক্ষ্য হল শ্রবণযোগ্য শব্দ তৈরি না করে অডিও গ্রাফ রেন্ডার করা। প্রাথমিক ব্যবহারের ক্ষেত্রে শব্দ না করে মাইক্রোফোন ইনপুট বিশ্লেষণ করা হবে।

// Silent Web Audio output.
await audioContext.setSinkId({ type: "none" });

বৈশিষ্ট্য সনাক্তকরণ

AudioContext.setSinkId() সমর্থিত কিনা তা পরীক্ষা করতে, ব্যবহার করুন:

if ("setSinkId" in AudioContext.prototype) {
  // AudioContext.setSinkId() is supported.
}

নমুনা

AudioContext.setSinkId() এর সাথে খেলতে https://sinkid.glitch.me/- এ একটি ডেমো উপলব্ধ।

ব্রাউজার সমর্থন

AudioContext.setSinkId() Chrome 110 বা তার পরবর্তী সংস্করণে উপলব্ধ।

প্রতিক্রিয়া

Chrome টিম এবং ওয়েব স্ট্যান্ডার্ড সম্প্রদায় AudioContext.setSinkId() এর সাথে আপনার অভিজ্ঞতা সম্পর্কে শুনতে চায়। অনুগ্রহ করে বিদ্যমান বা নতুন GitHub সমস্যাগুলিতে মন্তব্য করে মতামত প্রদান করুন।

স্বীকৃতি

এই নিবন্ধটি পর্যালোচনা করার জন্য হংচান চোই এবং মাইকেল উইলসনকে ধন্যবাদ।

Unsplash-স্টিভ হার্ভে দ্বারা ক্যালেন্ডার ছবির ছবি।