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

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

আপনার ওয়েবসাইটে ব্যাকগ্রাউন্ড মিউজিক/অডিও যোগ করতে আপনি 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>

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

আপনার ব্যাকগ্রাউন্ড অডিও মিউট করতে muted অ্যাট্রিবিউট যোগ করুন:

<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 Edge/IE ছাড়া সব ব্রাউজারে সাপোর্টেড
• OGG Edge/IE এবং Safari ছাড়া সব ব্রাউজারে সাপোর্টেড

জুলাই ২০২০ পর্যন্ত।

টিপ: আপনার <audio> এলিমেন্টে এক্সট্রা <source> যোগ করুন ফলব্যাক হিসেবে, যদি এন্ড ইউজারের ব্রাউজার আপনার প্রাইমারি ফাইল ফরম্যাট সাপোর্ট না করে:

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

এখন যদি এন্ড ইউজারের ব্রাউজার WAV ফরম্যাট সাপোর্ট না করে, তবে MP3 সোর্সটি প্লে হবে।