এইচটিএমএল মিউজিক টিউটোরিয়াল (HTML Embed Music Tutorial in Bangla)

     

এইচটিএমএল ৫ এ অডিও ভিডিও প্রদর্শনের জন্য নতুন কিছু ট্যাগ এসেছে ফলে ব্রাউজারে অডিও ভিডিও চালানো এখন খুব সহজ। আগে embed নামের একটি ট্যাগ দিয়ে এই কাজগুলি চালানো হত তবে অনেক সমস্যা ছিল। যেমন embed ট্যাগ কাজ করার জন্য প্লাগিন ইনস্টল থাকতে হত (ব্রাউজারে)। এদের মধ্যে খুব পরিচিত একটি প্লাগিন হচ্ছে ফ্লাশ প্লেয়ার এছাড়া কুইক টাইম, ভিএলসি (VLC), Windows Media Player ইত্যাদি।

সমস্যা হত যদি ইউজারের ব্রাউজারে কোন মিডিয়া প্লেয়ার প্লাগিন ইনস্টল না থাকত। যাই HTML 5 এসব সমস্যার সমাধান নিয়ে এসেছে। যদি এখনও IE (ইন্টারনেট এক্সপ্লোরার) HTML 5 সাপোর্ট করেনা তবে IE এর সর্বশেষ ভার্সনে (IE 9+) এসব সমাধান আসছে।

যেহেতু এখন বেশিরভাগ মানুষই মজিলা বা গুগল ক্রোম ব্রাউজার ব্যবহার করে তাই আমরা HTML 5 এরই উপর ভিত্তি করে টিউটোরিয়াল দিচ্ছি।

এইচটিএমএল ৫ ব্যবহার করে এখানে mp3 ফাইল বাজিয়ে দেখাচ্ছি এবং এর জন্য কোন প্লাগিন লাগবেনা। audio নামের ট্যাগ দিয়ে এটা করা যায়।

1.<audio controls>

2.<source src="/media/Duniya_Ke_Ae_Musafir.ogg" type="audio/ogg" />

3.<source src="/media/Duniya_Ke_Ae_Musafir.mp3" type="audio/mpeg" />

4.<h1>Your Browser doesn't support audio tag</h1>

5. 

6.</audio>

** মজিলাতে mp3  সাপোর্ট করেনা তাই ogg ফরমেটে দিয়েছি তবে গুগল ক্রোমে mp3 টি চলবে।

** দেখুন দটি source ট্যাগ দিয়েছি অথচ একটি দেয়া উচিৎ ছিল বলে ভাবতে পারেন। না আমারটাই ঠিক আছে কেননা ব্রাউজার fallback ফরমেট মেথড ব্যবহার করে দেখে কোন ফরমেটটি সে সাপোর্ট করে। একটার পর একটা চেক করে দেখতে দেখতে যেটা সাপোর্টেড ফরমেট সেটা বাজানো শুরু করবে।

** type এট্রিবিউট টি ঐচ্ছিক তবে দিলে পারফমেন্স বাড়বে।

<audio> এর ভিতরে controls="controls" এভাবে দিতে পারেন অথবা আমি যেভাবে দিয়েছি সেটাও হবে। এটা হচ্ছে pause/play, sound ইত্যাদি প্লেয়ারে দেখাবে কিনা সেটার জন্য। এরপর controls এর মত  autoplay আরেকটা এট্রিবিউট আছে এটা দিলে অটোমেটিক মিউজিক প্লে হবে।

loop নামে একটা এট্রিবিউট আছে এটা দিলে মিউজিকটি একবার শেষ হলে আবার প্রথম থেকে শুরু হবে এভাবে ঘুরে ঘুরে বাজতে থাকবে।

preload নামের আরেকটা এট্রিবিউট আছে audio এলিমেন্টের জন্য এবং এটার ৩ রকম মান দেয়া যায়।

১. auto দিলে পেজ লোড হবার আগেই অডিটি ডাউনলোড করবে আগে

২. meta দিলে পেজ লোড হবার সাথে সাথে মেটাডেটা যেমন author ইত্যাদি লোড হবে।

৩. none দিলে মেটাডেটা কিংবা অডিও কোনটাই পেজের আগে লোড হবেনা।

** source ট্যাগটি না দিয়ে যদি audio ট্যাগে src এট্রিবিউট দিয়ে মিডিয়া ফাইলটির উৎস দেখিয়ে দেন তবু হবে।

এখন সমস্যা হল যেহেতু audio ট্যাগ সব ব্রাউজারে সাপোর্ট করেনা তাছাড়া mp3, ogg, wav ছাড়া অন্য ফরমেট চলেনা তাই সব ব্রাউজার কমপিটাবিলাটির জন্য আপাতত embed ট্যাগ ব্যবহার করতে পারেন। তবে এটার জন্য যেকোন মিডিয়া প্লেয়ার আপনার ব্রাউজারে ইনস্টল থাকতে হবে। সাধারনত VLC media player আপনার পিসিতে ইনস্টল থাকলে VLC Web Plugin নামে একটা ছোট্র প্লাগিন আপনার ব্রাউজারে অটোমেটিক ইনস্টল আছে।

view sourceprint?

1.<object width="300" height="42" type="audio/mpeg" data="audio/my_music.mp3">

2.<param name="src" value="/media/Duniya_Ke_Ae_Musafir.mp3" />

3.<embed src="/media/Duniya_Ke_Ae_Musafir.mp3" width="300" height="42">

4.</embed>

5.</object>