অডিও (Audio)

একটি গল্প দিয়ে শুরু করি

রাজশাহীর বাউল শিল্পী করিম সাহেব তাঁর গানের একটি ওয়েবসাইট বানাতে চান। তিনি চান, কেউ সাইটে ঢুকলেই তাঁর বাউল গান শুনতে পাবে — একদম ক্যাসেট প্লেয়ারের মতো, কিন্তু ইন্টারনেটে। তাঁর ছেলে বলল: "বাবা, HTML5-এ একটা বিশেষ ট্যাগ আছে — শুধু সেটা লিখলেই হবে!" করিম সাহেব অবাক। একটা ট্যাগেই গান বাজবে?

হ্যাঁ! এটাই <audio> ট্যাগের শক্তি।

সমস্যাটা কী ছিল আগে?

HTML5 আসার আগে (2010-এর আগে) ওয়েবে অডিও বাজাতে Flash (ফ্ল্যাশ — একটি পুরনো plugin সফটওয়্যার) লাগত। Flash ছিল Adobe-এর আলাদা software — browser-এ আলাদাভাবে install করতে হত।

পুরনো Flash পদ্ধতি:
User → Browser → Flash Plugin আছে? → হ্যাঁ → গান বাজবে
                                    → না  → Error! কিছুই হবে না

সমস্যাগুলো:

মোবাইলে Flash কাজ করত না
iOS (iPhone/iPad) কখনো Flash সমর্থন করেনি
নিরাপত্তার দুর্বলতা ছিল
ধীরে ধীরে সব browser Flash বন্ধ করে দিয়েছে

সমাধান: HTML5 নিজেই <audio> ট্যাগ দিল — কোনো plugin ছাড়াই!

ভিজ্যুয়াল মডেল (ASCII Diagram)

HTML ফাইলে <audio> ট্যাগ লেখা হলে Browser কী করে:

HTML File
┌─────────────────────────────────┐
│  <audio controls>               │
│    <source src="baul.mp3"       │
│           type="audio/mpeg">   │
│  আপনার browser সমর্থন করে না।  │
│  </audio>                       │
└─────────────────────────────────┘
          │
          ▼
     Browser পড়ে ও বোঝে
          │
          ▼
┌─────────────────────────────────┐
│   স্বয়ংক্রিয় Player তৈরি হয়:  │
│  ┌──────────────────────────┐   │
│  │ ▶ ══════════════ 0:00   │   │
│  │ 🔊 ──────────────────    │   │
│  └──────────────────────────┘   │
└─────────────────────────────────┘
          │
          ▼
     গান বাজে!

মানসিক মডেল (Mental Model)

<audio> ট্যাগকে একটা ক্যাসেট প্লেয়ার-এর মতো ভাবো:

ক্যাসেট প্লেয়ারের অংশ	HTML Audio-তে সমতুল্য
ক্যাসেট ঢোকানো	`src` দিয়ে ফাইলের পাথ দেওয়া
Play/Pause বোতাম	`controls` attribute
Auto-start	`autoplay` attribute
Repeat বোতাম	`loop` attribute
Volume Zero	`muted` attribute
ক্যাসেটের ধরন (আড়াই ঘণ্টা / ৯০ মিনিট)	ফাইল ফরম্যাট (MP3/WAV/OGG)

মূল ধারণা (Formal Concept)

<audio> হলো HTML5-এর একটি multimedia element যা ওয়েব পেজে সরাসরি শব্দ বা গান যুক্ত করতে ব্যবহৃত হয়। এটি একটি container element — এর ভেতরে <source> ট্যাগ দিয়ে অডিও ফাইলের ঠিকানা ও ধরন জানানো হয়।

Module 1: সবচেয়ে সহজ `<audio>` ট্যাগ

<audio controls>
  <source src="baul-gaan.mp3" type="audio/mpeg">
  আপনার browser অডিও সাপোর্ট করে না।
</audio>

লাইন ধরে বিশ্লেষণ:

অংশ	অর্থ
`<audio>`	অডিও container শুরু
`controls`	Play/Pause/Volume বার দেখাও
`<source>`	অডিও ফাইলের তথ্য দাও (self-closing)
`src="baul-gaan.mp3"`	ফাইলের নাম ও পাথ
`type="audio/mpeg"`	ফাইলটি MP3 ফরম্যাটের (MIME type)
শেষ লাইন	Fallback text: browser না বুঝলে দেখাবে
`</audio>`	অডিও container শেষ

Module 2: Attributes (বৈশিষ্ট্যসমূহ) বিস্তারিত

2.1 `controls` — প্লেয়ার বার দেখানো

<!-- controls ছাড়া: কিছুই দেখা যাবে না! -->
<audio src="gaan.mp3"></audio>

<!-- controls সহ: সুন্দর প্লেয়ার দেখা যাবে -->
<audio src="gaan.mp3" controls></audio>

📝 HSC টিপস: controls একটি Boolean Attribute (বুলিয়ান — শুধু উপস্থিত থাকলেই কাজ করে)। controls="true" লিখতে হয় না, শুধু controls লিখলেই যথেষ্ট।

2.2 `autoplay` — পেজ লোড হলেই বাজবে

<audio src="welcome.mp3" controls autoplay></audio>

⚠️ সতর্কতা: আধুনিক browser গুলো autoplay block করে — কারণ user বিরক্ত হয়। তবে muted যুক্ত করলে autoplay কাজ করে।

2.3 `loop` — বারবার বাজবে

<!-- bKash tutorial সাইটে background ambient sound -->
<audio src="background.mp3" autoplay loop muted></audio>

গান শেষ হলে স্বয়ংক্রিয়ভাবে আবার শুরু থেকে বাজবে।

2.4 `muted` — নিঃশব্দ অবস্থায় শুরু

<audio src="cricket-commentary.mp3" controls muted></audio>

পেজ লোড হলে গান শুরু হবে কিন্তু শব্দ থাকবে না। User নিজে চাইলে unmute করতে পারবে।

2.5 `preload` — কতটুকু আগে লোড হবে

<audio src="gaan.mp3" controls preload="auto"></audio>
<audio src="gaan.mp3" controls preload="metadata"></audio>
<audio src="gaan.mp3" controls preload="none"></audio>

preload মান	কী লোড হয়	কখন ব্যবহার করবে
`auto`	পুরো ফাইল আগেভাগে লোড	ছোট ফাইল, দ্রুত বাজাতে চাইলে
`metadata`	শুধু তথ্য (duration, codec)	সাধারণ ব্যবহার, ডেটা বাঁচাতে
`none`	কিছুই লোড না	Mobile data বাঁচাতে চাইলে

Module 3: অডিও ফরম্যাট ও `<source>` ট্যাগ

অডিও ফরম্যাট তুলনা

ফরম্যাট	Extension	MIME Type	সাপোর্ট	বৈশিষ্ট্য
MP3	`.mp3`	`audio/mpeg`	সব browser	সবচেয়ে প্রচলিত, ছোট সাইজ
WAV	`.wav`	`audio/wav`	সব browser	উচ্চমানের, বড় সাইজ
OGG	`.ogg`	`audio/ogg`	Chrome, Firefox	Open-source, ভালো quality

Browser সাপোর্ট চার্ট:
              Chrome   Firefox   Safari   Edge
MP3             ✓        ✓         ✓       ✓
WAV             ✓        ✓         ✓       ✓
OGG             ✓        ✓         ✗       ✓

Safari OGG সমর্থন করে না — তাই সবসময় MP3 fallback রাখতে হয়।

একাধিক Source — সব Browser-এর জন্য

<audio controls>
  <source src="baul-gaan.ogg" type="audio/ogg">
  <source src="baul-gaan.mp3" type="audio/mpeg">
  <source src="baul-gaan.wav" type="audio/wav">
  আপনার browser HTML5 audio সমর্থন করে না।
</audio>

Browser কীভাবে ফরম্যাট বেছে নেয়:

Browser আসে
    │
    ▼
OGG বুঝি? ──হ্যাঁ──► OGG বাজাও (শেষ)
    │ না
    ▼
MP3 বুঝি? ──হ্যাঁ──► MP3 বাজাও (শেষ)
    │ না
    ▼
WAV বুঝি? ──হ্যাঁ──► WAV বাজাও (শেষ)
    │ না
    ▼
Fallback text দেখাও

Module 4: সম্পূর্ণ উদাহরণ — বাউল সংগীত পেজ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>করিমের বাউল সংগীত</title>
</head>
<body>
  <h1>বাউল শিল্পী করিমের গানের সংগ্রহ</h1>

  <h2>গান ১: মন পাখি উড়ে যায়</h2>
  <audio controls preload="metadata">
    <source src="music/mon-pakhi.ogg" type="audio/ogg">
    <source src="music/mon-pakhi.mp3" type="audio/mpeg">
    দুঃখিত, আপনার browser এই গান চালাতে পারছে না।
  </audio>

  <h2>গান ২: নদীর পারে বসে আছি</h2>
  <audio controls loop>
    <source src="music/nodir-pare.mp3" type="audio/mpeg">
  </audio>

  <h2>গান ৩: একতারা বাজে</h2>
  <audio controls muted>
    <source src="music/ektara.ogg" type="audio/ogg">
    <source src="music/ektara.mp3" type="audio/mpeg">
  </audio>
</body>
</html>

Module 5: Flash যুগ vs HTML5 যুগ

Flash যুগ (2010-এর আগে):        HTML5 যুগ (এখন):
┌──────────────────────┐          ┌──────────────────────┐
│ HTML ফাইল            │          │ HTML ফাইল            │
│ + Flash embed code   │          │ <audio> ট্যাগ         │
│ + .swf ফাইল          │          │ + MP3/OGG ফাইল       │
│ + Flash plugin       │          │                      │
│   (আলাদা install)    │          │  (plugin নেই!)       │
└──────────────────────┘          └──────────────────────┘
  জটিল, ধীর, নিরাপত্তা ঝুঁকি       সহজ, দ্রুত, নিরাপদ
  Mobile-এ কাজ করে না              সব device-এ কাজ করে
  iOS সমর্থন করে না                iOS-সহ সব জায়গায় চলে

সাধারণ ভুলসমূহ (Common Mistakes)

ভুল	সমস্যা	সঠিক পদ্ধতি
`<audio src="gaan.mp3"/>` (self-closing)	ভুল গঠন	`<audio src="gaan.mp3" controls></audio>`
`type="mp3"`	ভুল MIME type	`type="audio/mpeg"`
`controls` না দেওয়া	কিছু দেখা যাবে না	সবসময় `controls` দাও
শুধু OGG ফরম্যাট	Safari-তে বাজবে না	MP3 fallback রাখো
ফাইলের নাম বা পাথ ভুল	গান বাজবে না	সঠিক পাথ নিশ্চিত করো

Trade-offs (সুবিধা-অসুবিধা)

বিষয়	সুবিধা	অসুবিধা
`autoplay`	Automatic experience	User বিরক্ত হয়, browser block করে
`preload="auto"`	দ্রুত বাজে	বেশি ডেটা ও ব্যান্ডউইথ খরচ
MP3 ফরম্যাট	সব browser সমর্থন করে	Copyrighted codec
OGG ফরম্যাট	Free, open-source	Safari সমর্থন করে না
Multiple `<source>`	সব browser-এ কাজ করে	বেশি ফাইল রাখতে হয়, সার্ভার স্পেস বেশি

MCQ Quiz

1. HTML5-এ ওয়েব পেজে অডিও যুক্ত করতে কোন ট্যাগ ব্যবহার করা হয়?

(ক) <sound>
(খ) <music>
(গ) <audio> ✓
(ঘ) <media>

2. <audio> ট্যাগে কোন attribute যুক্ত করলে Play/Pause বার দেখা যায়?

(ক) play
(খ) controls ✓
(গ) show
(ঘ) bar

3. পেজ লোড হওয়ার সাথে সাথেই গান বাজানোর জন্য কোন attribute ব্যবহার করা হয়?

(ক) autoplay ✓
(খ) start
(গ) begin
(ঘ) play

4. গান শেষ হলে আবার শুরু থেকে বাজানোর জন্য কোন attribute ব্যবহার করা হয়?

(ক) repeat
(খ) replay
(গ) loop ✓
(ঘ) cycle

5. MP3 ফাইলের জন্য সঠিক MIME type কোনটি?

(ক) type="mp3"
(খ) type="audio/mp3"
(গ) type="audio/mpeg" ✓
(ঘ) type="music/mp3"

6. OGG ফরম্যাট কোন browser সমর্থন করে না?

(ক) Chrome
(খ) Firefox
(গ) Safari ✓
(ঘ) Edge

7. HTML5-এর আগে ওয়েবে অডিও বাজাতে কোন প্রযুক্তি ব্যবহার করা হত?

(ক) Java Applet
(খ) Flash ✓
(গ) Silverlight
(ঘ) উপরের সবগুলো

প্রতিফলন প্রশ্ন (Reflection Questions)

HTML5 আসার আগে ওয়েবে অডিও বাজাতে কী কী সমস্যা হত? Flash-এর কী কী দুর্বলতা ছিল?
controls attribute না দিলে কী হবে? তাহলে কি গান বাজবে না?
একই <audio> ট্যাগে কেন একাধিক <source> ট্যাগ ব্যবহার করা হয়?
autoplay attribute কেন আধুনিক browser-এ কাজ করে না? এটি কীভাবে কাজ করানো যায়?
preload="none" কখন ব্যবহার করা উচিত এবং কেন?

অনুশীলন কাজ (Practice Tasks)

সহজ: একটি HTML পেজ তৈরি করো যেখানে একটি MP3 গান controls সহ বাজবে।
মধ্যম: তিনটি গানের একটি তালিকা তৈরি করো — প্রতিটির জন্য <audio> ট্যাগ ব্যবহার করো এবং OGG ও MP3 উভয় <source> রাখো।
উন্নত: একটি "বাউল সংগীত" পেজ তৈরি করো যেখানে:
- Background মিউজিক autoplay, loop ও muted হবে
- তিনটি গানের player থাকবে
- শিল্পীর নাম ও গানের বিবরণ থাকবে

📝 HSC পরীক্ষার টিপস:

<audio> ট্যাগটি HTML5-এর নতুন সংযোজন — এটি অবশ্যই মনে রাখতে হবে
controls, autoplay, loop, muted — এই চারটি attribute-এর কাজ আলাদাভাবে জানো
<source> ট্যাগের src ও type attribute মনে রাখো
MIME type সহ মনে রাখো: MP3 = audio/mpeg, WAV = audio/wav, OGG = audio/ogg
Fallback text কী কাজ করে তা বোঝো
<audio> ট্যাগ self-closing নয় — </audio> দিয়ে বন্ধ করতে হয়

সারাংশ:

<audio> ট্যাগ HTML5-এর multimedia element — Flash ছাড়াই ওয়েবে গান বাজানো যায়

প্রধান attributes: controls (player দেখায়) | autoplay (নিজে বাজে) | loop (বারবার বাজে) | muted (নিঃশব্দ)

<source> ট্যাগ দিয়ে ফাইলের পাথ (src) ও MIME type (type) দেওয়া হয়

Browser compatibility-র জন্য একাধিক <source> ব্যবহার করো: OGG → MP3 → WAV ক্রমে

সব Browser-এ MP3 কাজ করে — এটি সবচেয়ে নির্ভরযোগ্য ফরম্যাট

Browser সমর্থন না করলে Fallback text দেখায়

Audio