কেন শুধু শুধু ফ্ল্যাশ MP3 প্লেয়ার ওয়েবসাইটে ইউজ করবেন? আসুন ফ্ল্যাশের বদলে HTML5 ইউজ করি!

আসসালামু আলাইকুম,
কেমন আছেন?

আপনাদের যাদের ব্লগস্পটে গানের সাইট আছে তারা কি গান ইম্বেড করেন?

করেন না বোধহয়।

আগে উত্তর দেই, ইম্বেড করলে কি হয়?

এতে আপনার ওয়েবসাইটের ভিজিটর আপনার ওয়েবসাইটে সরাসরি অনলাইনে গান শোনার সুযোগ পান।



তো আপনারা হয়তো ফ্লাশ প্লেয়ারের কথা ভাবছেন, আমি ভেবেছিলাম।

কিন্তু মোবাইল ইউজারদের কথা ভেবে ছেড়ে দিয়েছি।

ফ্ল্যাশ এমপি৩ প্লেয়ার ইউজ করলে হয়তো প্রি লোড বা গান না শুনতে চাইলেও এমবি কাটার ফাঁদ তৈরি হতে পারে না। কিন্তু ফ্ল্যাশ এসডব্লিউএফ (SWF) ফাইল্টি লোড হতেই হবে!

যেমন নিচের এই অডিও বারটি দেখুন,


আজ রাতে কোনও রুপকথা নেই বাই ওল্ড স্কুল

এর ইম্বেড কোড হল,
<object data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" height="50" type="application/x-shockwave-flash" width="500">
<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="FlashVars" value="mp3=http%3A//googledrive.com/host/0Bz8X6FgnifH3SXdaNjRqZVhXalE&amp;width=500&amp;height=50" />
</object>


এখানে এসডব্লিউএফ ফাইলের সাইজ কম হলেও মোবাইলে কিন্তু লোড হয় না। আর পিসিতে ফ্লাশ প্লেয়ার ছাড়া কাজ করে না।
আর আপনি কেন এটা নিবেন?
কারন এখানে মাঝের বাটনের না ক্লিক করলে গান লোড হয় না,
ভালো ফাংশান! ইন্টারনেট ডাটা অনেক সেভ করবে।

এখন আপনি কিন্তু এই ফাংশান নরমান এইচটিএমএল দিয়েও করতে পারবেন। এইচটিএমএলএর সুবিধা হল এটা মোবাইলও সাপোর্ট দেবে, কম্পিউটারও!

এখন এইচটিএমএল অডিও প্লেয়ার বানাবো,

<audio controls>
<source src="http://googledrive.com/host/0Bz8X6FgnifH3SXdaNjRqZVhXalE">
</audio>

এটা একটা সিম্পল এমপি৩ প্লেয়ার। এর controls এট্রিবিউট বাদ দিলে কিছুই দেখা যাবে না, মানে অডিও প্লেয়ার দেখা যাবে না।

এখন যদি এরকম লিখি,

 <audio controls autoplay>
<source src="http://googledrive.com/host/0Bz8X6FgnifH3SXdaNjRqZVhXalE">
</audio>

এখন কন্ট্রোল দেখা যাবে, কিন্তু অটো প্লে হবে। মানে পেজ লোড হওয়া মাত্র গান চালু হবে।

এখন এটা লিখলে কি হবে?

<audio autoplay>
<source src="http://googledrive.com/host/0Bz8X6FgnifH3SXdaNjRqZVhXalE">
</audio>

এখানেই মজা! কোনও কন্ট্রোল থাকবে না, কিন্তু গান ব্যাকগ্রাউন্ডে বাজতে থাকবে!

তবে এগুলো কোনটাই ডাটা এফিসিয়েন্ট না :p

এখন আমরা প্রিলোড এট্রিবিউট ব্যাবহার করবো।

এই এট্রিবিউটএর কথা ডব্লিউ থ্রি স্কুলে নেই। কাজেও পোস্টটি দেখুন!

এখন একটা প্রিলোড ফাংশান সহ HTML MP3 প্লেয়ার দেখাই!

<audio controls preload="auto">
<source src="http://googledrive.com/host/0Bz8X6FgnifH3SXdaNjRqZVhXalE">
</audio>

এখানে preload="***"
এই তিনটি *** আপনি ৩টি এট্রিবিউট দিতে পারবেন।

  1. auto
  2. metadata
  3. none
এই তিনটির ৩টি কাজ।

  1. auto - অটোমেটিক্যালি এমপি৩ ফাইল সার্ভার থেকে লোড করে।
  2. metadata - এমপি৩ ফাইল লোড করে না, তবে ফাইল ডিউরেশন ও অন্যান্য তথ্য নেয়।
  3. none - ক্লিক করার আগে প্লে করবে না।
অতএব এখানে কাজের কাজ করছে নিচের অডিও প্লেয়ারটা!

<audio controls preload="metadata">
<source src="http://googledrive.com/host/0Bz8X6FgnifH3SXdaNjRqZVhXalE">
</audio>

ডেমো,





শেয়ার করুন

লেখকঃ

আমি তাওসিফ তুরাবি, অনলাইনাম (অনলাইন + নাম) ব্লগার তাওসিফ। এখন, ২০১৬ পর্যন্ত আমি ১৬ বছরের এক কিশোর। পড়াশোনা করি শহীদ পুলিশ স্মৃতি কলেজে। টেক ব্লগ লিখতে ভালবাসি। সাইন্স ফিকশন আর গল্প লিখতে পছন্দ করি।  জিআর+ ব্লগের এর একজন প্রতিষ্ঠাতা অ্যাডমিন।
আমাদের একটা ওয়েব ডেভেলপার ফার্ম আছে যার নাম জিআর+ আইটি বাংলাদেশ
এছাড়া আমার ব্যাক্তিগত ব্লগ রয়েছে। আমার ফেসবুক আইডিতে আমার সাথে সর্বক্ষণ যোগাযোগ করতে পারবেন। 


পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট