কিভাবে আপনার ওয়েবসাইটে ব্যাকগ্রাউন্ড অডিও/মিউজিক যোগ করবেন

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

আপনার ওয়েবসাইটে ব্যাকগ্রাউন্ড মিউজিক/অডিও যোগ করতে, আপনি HTML অডিও উপাদান ব্যবহার করতে পারেন (<audio>...</audio> )।

ধরা যাক আপনার কাছে একটি অডিও ফাইল রয়েছে যা ব্যবহারকারীরা আপনার ওয়েবসাইট দেখার সাথে সাথে আপনি ব্যাকগ্রাউন্ডে চালাতে চান। এটি করার জন্য প্রয়োজনীয় সাধারণ HTML কোড এখানে:

<audio autoplay>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

<audio> উপাদানের src অ্যাট্রিবিউট অভ্যন্তরীণ এবং বাহ্যিক উভয় অডিও উত্সকে মান হিসাবে গ্রহণ করে৷

autoplay লক্ষ্য করুন বৈশিষ্ট্য ব্যবহারকারী আপনার ওয়েবপৃষ্ঠায় প্রবেশ করার সাথে সাথে আপনি অডিওটি বাজানো শুরু করতে চাইলে এটি প্রয়োজন৷

ডেমো: একটি উদাহরণ শুনতে, আপনার কম্পিউটার/হেডফোনে ভলিউম কমিয়ে দিন এবং এই ডেমোতে ক্লিক করুন।

HTML এ তিনটি সমর্থিত অডিও ফরম্যাট রয়েছে:MP3, WAV এবং OGG। <audio>-এ উপাদানটি আপনি type-এ বিন্যাসটি নির্দিষ্ট করেন বৈশিষ্ট্য:

এই টিউটোরিয়ালে আমি WAV ফর্ম্যাট ব্যবহার করি, তাই আমি type="audio/wav" যোগ করেছি উপরের এলিমেন্টে অ্যাট্রিবিউট।

অডিও উপাদান বৈশিষ্ট্য

<audio>-এ বিল্ট-ইন থাকা কয়েকটি দরকারী বৈশিষ্ট্য নিচে দেওয়া হল উপাদান, এবং আপনাকে সূক্ষ্ম নিয়ন্ত্রণ প্রদান করে।

লুপ ব্যাকগ্রাউন্ড অডিও

আপনার পটভূমি অডিও লুপ করতে, আপনি loop যোগ করতে পারেন বৈশিষ্ট্য:

<audio autoplay loop>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

ব্যাকগ্রাউন্ড অডিও মিউট করুন

আপনার ব্যাকগ্রাউন্ড অডিও মিউট করতে, আপনি mute যোগ করতে পারেন বৈশিষ্ট্য:

<audio muted>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

কেন আপনি muted ব্যবহার করবেন বৈশিষ্ট্য? ঠিক আছে, আপনি আপনার অডিও উপাদানটির অডিও উত্সটি সাময়িকভাবে অক্ষম করতে এবং আপনার ওয়েবপৃষ্ঠা থেকে সম্পূর্ণ উপাদানটি না সরিয়ে পরে আবার এটিকে আবার চালু করতে চাইতে পারেন৷

কন্ট্রোল ইন্টারফেস যোগ করুন

নিয়ন্ত্রণ যোগ করতে (খেলা, বিরতি, ইত্যাদি), controls ব্যবহার করুন বৈশিষ্ট্য:

<audio controls>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

এখন ব্যবহারকারী আপনার অডিও ফাইল শুনতে চাইলে প্লে ক্লিক করতে পারেন৷

অডিও ফরম্যাটের জন্য ব্রাউজার সমর্থন

• MP3 সব ব্রাউজারে সমর্থিত,
• WAV এজ/IE ছাড়া সকল ব্রাউজারে সমর্থিত হয়
• Edge/IE এবং Safari ছাড়া সকল ব্রাউজারে OGG সমর্থিত

জুলাই 2020 অনুযায়ী।

টিপ: একটি অতিরিক্ত <source> যোগ করুন আপনার <audio>-এ ফ্যালব্যাক হিসাবে উপাদান, যদি আপনার শেষ ব্যবহারকারী এমন একটি ব্রাউজার ব্যবহার করেন যা আপনার প্রাথমিক ফাইল ফর্ম্যাটকে সমর্থন করে না:

<audio controls>
  <source src="your-audio-file.wav" type="audio/wav" />
  <source src="your-audio-file.mp3" type="audio/mpeg" />
</audio>

এখন যদি শেষ ব্যবহারকারীর ব্রাউজারটি WAV ফরম্যাট সমর্থন না করে, তবে এটি পরিবর্তে MP3 উত্সটি চালাবে৷