একটি কাস্টমাইজড HTML5 অডিও প্লেয়ার তৈরি

এই টিউটোরিয়ালে আমি আপনাদের পরিচয় করাবো HTML5 অডিও এর সাথে এবং দেখাবো কিভাবে আপনি নিজের প্লেয়ারটি বানাবেন।

আপনি যদি শর্টকাট নিতে চান, কিছু তৈরি করা HTML5 অডিও প্লেয়ার দেখতে পারেন যা এনভাটো মার্কেট এ পাবেন। এটি আপনাকে ভ্যরাইটি সোর্স থেকে প্লেলিস্ট বানাতে দিবে, এবং এটিতে বিশাল পরিসরে কাস্টমাইজের অপশন থাকে।

সাহায্যের জন্য আপনি অনেক HTML5 এক্সপার্টদের পাবেন এনভাটো স্টুডিও তে।

সূচনা

এখন পর্যন্ত ওয়েব প্রোযেক্টে অডিও বাস্তবায়ন একটি বিরক্তিকর প্রক্রিয়া ছিলো যা ফ্ল্যাশ এর মতো তৃতীয় পক্ষের প্লাগইনের উপর প্রচন্ডভাবে নির্ভরশীল ছিল। যখন আইফোনে প্লাগইন এর অখ্যাত অগ্রহণযোগ্যতা এবং মোবাইলের জন্য এডোবি ফ্ল্যাশ এর অসমর্থনের খবরটি পাওয়া গেলো, তখন অনেক ডেভেলপার তাদের প্রজেক্টে অডিও অন্তর্ভুক্ত করার অন্য পথ খুজছিল। এই হল যেখানে HTML5 অডিও সমস্যা সমাধানের জন্য পদক্ষেপ নেয়।

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

সাধারন Html5 অডিও

HTML5 ব্যবহার করে অডিও ইমপ্লিমেন্টের সবচাইতে সহজ পন্থা হচ্ছে নতুন অডিও ট্যাগ ব্যবহার করা। নিচের দেখানো কোড আপনার HTML5 ডকুমেন্টে যোগ করুনঃ

<audio controls="controls">
  <source src="track.ogg" type="audio/ogg" />
  <source src="track.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

উপরে আপনি কোডের দিকে লক্ষ করলে দেখবেন আমি <audio> ট্যাগ ডিক্লেয়ার করেছি এবং কন্ট্রোল এট্রিবিউট সংজ্ঞায়িত করেছি, যাতে আমরা প্লেয়ারে ডিফল্ট কন্ট্রোলগুলো দেখতে পাই।

<audio> তে নেস্টেড আমাদের ২টি 'src' ট্যাগ আছে। ট্যাগে পরিবেষ্টিত আমাদের ২টি 'src' একটি MP3 ট্রাকে সংজ্ঞায়িত এবং অপরটি সংজ্ঞায়িত OGG ফরম্যাটে। OGG ফরম্যাট বিশেষভাবে ফায়ারফক্সে মিউজিক প্লে করতে অনুমতি দেয় যেহেতু লাইসেন্স এর সমস্যার কারনে ফায়ারফক্স কোন প্লাগইন ছাড়া MP3 সমর্থন করে না। একটি টেক্সট স্ট্রিং Your browser does not support the audio element. অসমর্থিত ব্রাউজারে ব্যবহারকারীকে জানতে দেয় যে আসলে কি হচ্ছে।

ডিফল্ট Html5 অডিও প্লেয়ার

Html5 অডিও ট্যাগ এট্রিবিউটস

এই অডিও ট্যাগ সকল HTML5 attributes সাপোর্ট করে, আর এই ট্যাগের নিজস্ব সকল attributes নিচে লিস্ট করে দেয়া হল।

• autoplay- এটার মান "true" বসানো যায়, বা খালি রাখা যায়। ট্র্যাক লোড হওয়ার সাথে সাথে বাজা শুরু হবে কিনা তা এই অ্যাট্রিবিউট নির্ণয় করে।
• controls -এটা নেটিভ কন্ট্রোল যেমন 'play,pause' ইত্যাদি ডিফাইন করে।
• loop - এটার মাণ "loop"সেট করলে, ট্র্যাক শেষ হওয়ার পর পুনরায় বাজা শুরু হয়।
• preload - এটার মান "auto" (এর মানে পেজ লোড শেষ হওয়ার সাথে সাথে অডিও ফাইল ডাউনলোড শুরু হয়), ট্র্যাকের মেটা ডাটা ডাউনলোড হওয়া শুরু হয়।
• src - এটা দিয়ে ডিফাইন করা হয় যে অডিও ট্যাগটি প্লেয়ারের সাহায্যে বাজবে কি না।

প্লেয়ার পরিবর্ধিত করা

প্রথম কয়েকটি ধাপে আমরা HTML5 অডিও এর খুবই সাধারন ফর্মগুলো দেখবো। অডিও ট্যাগ জাভাস্ক্রিপ্টের সাহায্যে ইউটিলাইজ করে আমরা একটি ভালো মানের অডিও প্ল্রেয়ার বানিয়ে নিতে পারি। আসুন দেখি jQuery দিয়ে কি কি করা সম্ভব। jQuery তে document ready ডিফাইন করার পরে, আপনার একটি অডিও ভ্যারিয়েবল তৈরি করে নিতে পারি যেখানে অডিও ফাইল স্টোর হবেঃ

var myaudio = new Audio('mysong.mp3');

এটি সত্যিই এত সহজ! যখন দরকার হবে, তখন এই অডিও ফাইল 'myaudio' ভ্যারিয়েবল দিয়ে ট্রিগার করা যাবে। এই লিস্টের সকল অ্যাকশন এই ভ্যারিয়েবলের মাধ্যমে নেয়া যাবে। পরে আমাদের অডিও প্লেয়ার বানানোর সময় আমরা এগুলার কয়েকটি ব্যবহার করব।

myaudio.play(); - This will play the music.
myaudio.pause(); - This will stop the music.
myaudio.duration; - Returns the length of the music track.
myaudio.currentTime = 0; - This will rewind the audio to the beginning.
myaudio.loop = true; - This will make the audio track loop.
myaudio.muted = true; - This will mute the track

মিউজিক প্লে শেষ হলে, যদি কোন ফাংশন রান করতে চান, তাহলে 'myaudio.addEventListener('ended',myfunc)' - ফাংশন ব্যবহার করতে হবে - যা অডিও প্লে হওয়া শেষ হলে রান করবে।

একটি HTML5 অডিও প্লেয়ার তৈরিঃ মার্কাপ

এখন যেহেতু আপনি HTML5 অডিওর ব্যাকগ্রাউন্ড, বেসিক ব্যবহার জানেন, এখন আমরা একটি কাস্টম অডিও প্লেয়ার বানানো শিখবো। আমরা ডিজাইন স্টেজটা স্কিপ করে যাবো, কারণ সেই অংশটি আমাদের আজকের টিউটোরিয়ালের বিষয়বস্তুর মধ্যে পরে না, কিন্তু আপনি চাইলে এই ডিজাইনের সোর্সকোড ডাউনলোড করে নিতে পারেন এবং PSD থেকে আইডিয়া নিতে পারেন কিভাবে ডিজাইনটি সাজানো হয়েছে।

ডকুমেন্টের শুরুতে HTML5 doctype বসানো হয়েছে। টাইটেলে ইয়াহু CSS রিসেট, গুগল ওয়েব ফন্ট 'Lobster' ব্যবহার করা হয়েছে। js ফোল্ডারের js ফাইলে লেটেস্ট jQuery আর কাস্টম জাভাস্ক্রিপ্ট রয়েছে। আর আরে html5slider.js যেটা দিয়ে ফায়ারফক্সে HTML5 ইনপুট রেঞ্জ টাইপ ডিসপ্লে করা যায়, এটা আমরা অডিও স্ক্রাবার হিসেবে ব্যবহার করব।

<!DOCTYPE html>
<head>
  <title>HTML5 Audio Tutorial</title>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
	<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="http://code.jQuery.com/jQuery-latest.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/js.js"></script>
	<script type="text/javascript" src="js/html5slider.js"></script>
</head>

h1 টাইটেল তৈরি করে একটি div বানাই, এরপর সেখানে "container" এবং "gradient" ক্লাস বসাই। এখানে কিছু ইলিমেন্ট রিইউজ করা হয়েছে, আর gradientএকটি সেপারেট ক্লাসে রাখা হয়েছে। ".container" এর ভিতরে (এটা অ্যালবামের কভার শো করবে) একটা ইমেজ ডিসপ্লে করার যায়গা, এরপর তিনটা অ্যাংকর ট্যাগ যেটা দিয়ে প্লেয়ার কন্ট্রোল করা হবে বসাই। এরপর এগুলার মাঝে HTML5/স্ক্রাবার বসানোর রেঞ্জ খুঁজে বের করি।

<body>

	<h1>HTML 5 Audio Player</h1>

	<div class="container gradient">
		
		<img class="cover" src="images/cover.jpg" alt="">

		<div class="player gradient">

			<a class="button gradient" id="play" href="" title=""></a>
			<a class="button gradient" id="mute" href="" title=""></a>
		
				<input type="range" id="seek" value="0" max=""/>
	
			<a class="button gradient" id="close" href="" title=""></a>
			
		</div><!-- / player -->
		
	</div><!-- / Container-->
</body>
</html>

HTML5 অডিও প্লেয়ার তৈরিঃ শৈলি

সব সিএসেস হাতে লেখার পরিবর্তে আমরা আপনাকে দেখিয়ে দিবো কোন কোন অংশের উপর কাজ করা জরুরী।

নিচভের কোডে আমি প্লেয়ারের গ্রেডিয়েন্ট বানিয়েছি, CSS gradient editor ব্যবহার করে। এরপর প্লেয়ারের ".container" এ কিছু সিএসেস ট্রানজিশন বসাই।

'border-box' এ সিএসেস বক্স সাইজিং attribute বসাই। কন্টেইনারের চারপাশে 10px প্যাডিং বসাই, এরপর width ডিক্লেয়ার করি, যেটা এই ক্ষেত্রে 427px। প্যাডিং না বসালে 427px এর কন্টেইনার প্রয়োজনের চেয়ে অনেক বড় হয়ে যেত। * {box-sizing: border-box;} ব্যবহার করা আজকাল কমন প্র্যাকটিস হয়ে যাচ্ছে, যেটা দিয়ে স্টাইলিং করা সহজ হয়ে যায়।

এরপর ".coverlarge" ক্লাসে আরও কিছু সিএসেস ট্রানজিশন অ্যাপ্লাই করি, এটা নিয়ে প্লেয়ার প্রথমে ওপেন হবে। এই সিএসেস প্রথমে অনেক ঝামেলার মনে হবে, কিন্তু অনেক ব্রাউজারের সাপোর্ট লিখতে গিয়ে এতে অনেক প্রিফিক্স ব্যবহার করতে হয়েছে যেন প্লেয়ার সকল ব্রাউজারে কাজ করে।

.gradient {
	border: 1px solid black;

	-webkit-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
	-moz-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
	box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
	background: #494949; /* Old browsers */
background: -webkit-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);

	background: -moz-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
	background: -o-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
	background: -ms-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
	background: linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); /* W3C */
-image  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-9 */
}

.container {
	-webkit-transition: all .7s ease;
	-moz-transition: all .7s ease;
	-o-transition: all .7s ease;
	-ms-transition: all .7s ease;
	transition: all .7s ease;
	position: absolute;
	width: 427px;
	height: 70px;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	-webkit-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
	-moz-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
	box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
	top: 50%;
	left: 50%;
	margin: -214px 0px 0px -214px;
	padding: 10px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


.containerLarge {
	height: 427px;
}

.cover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	width: 398px;
	height: 10px;
	border: 2px solid black;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);
	-moz-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);
	box-shadow: inset 0px 5px 5px rgba(0,0,0,1);
}

.coverLarge {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	height: 398px;

	-webkit-transition: opacity .7s ease;
	-moz-transition: opacity .7s ease;
	-o-transition: opacity .7s ease;
	-ms-transition: opacity .7s ease;
	transition: opacity .7s ease;

	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

অডিও প্লেয়ার এই পর্যায়ে যেমন দেখাবে

একবার প্লেয়ারের কন্টেইনার সম্পূর্ণ হয়ে গেলে, এখন সময় আসল নিয়ন্ত্রণগুলো তৈরি করার। অধিকাংশ বাটন তৈরি করা হয়েছে CSS স্প্রাইটস ব্যবহার করে।

IE ব্রাউজারে HTML5 রেঞ্জ সাপোর্ট করে না, তাই আমরা সিদ্ধান্ত নিয়েছি IEইউজারদের স্ক্রাবার শো করব না। আপনার যদি দেখাতে ইচ্ছা করে তবে jQuery UI slider ব্যবহার করে দেখতে পারেন। আমি জাস্ট input{display:none\9!important;} ব্যবহার করে স্ক্রাবার হাইড করে দিচ্ছি। (বিস্তারিত জানতে এই লিংকটি তে গিয়ে পড়ে নিন। এখানে \9 সম্পর্কে লেখা আছে।)

HTML5 রেঞ্জের সমস্যা হচ্ছে সব ব্রাউজার এর জন্য কাস্টম স্টাইলিং সাপোর্ট করে না, শুধু ওয়েবকিট ব্রাউজারে এই সাপোর্ট আছে (ক্রোম এবং সাফারি)। অপেরা ও ফারারফক্সে সীমিত কিছু স্লাইডার দেখা যাবে। সকল ব্রাউজারে কাস্টম স্টাইলিং করতে jQuery UI slider ব্যবহার করুন। ওয়েবকিট ব্রাউজারের input::-webkit-slider-thumb attribute এ আপনি কাস্টম স্টাইলিং দেখতে পাবেন।

.player {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	width: 300px;
	bottom: 10px;
	width: 95%;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 5px;
}

.button {
	display: block;
	width: 34px;
	height: 34px;
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat;
	float: left;
	margin-right: 5px;
}

#play {
	background-position: 6px 5px;
}

#pause {
	background-position: -32px 5px;
}

#mute {
	background-position: -63px 5px;
}

#muted {
	background-position: -106px 5px;
}

input[type="range"] {
	width: 250px;
	margin-top: -5px;
}

#close {
	float: right;
	background-position: -146px 5px;
	display: none;
}

.volume {
	position: absolute;
	height: 100px;
	width: 34px;
	border: 1px solid black;
	background-color: #242323;
	top: -97px;
	display: none;
}
input{
	display:none\9!important;
}
input[type="range"] {
	-webkit-appearance: none;
	border: 1px solid black;
	position: absolute;
	top: 18px;
	display: block;
	width: 63%;
	height: 15px;

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color: #242323;
	left: 90px;

	-webkit-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
	-moz-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
	box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
}

input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border:1px solid black;

	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: #80e4df; /* Old browsers */
background: -webkit-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);

	background: -moz-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
	background: -o-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
	background: linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); /* W3C */
}

HTML5 অডিও প্লেয়ার তৈরিঃ jQuery

স্টাইলিং শেষে এখন আমরা প্লেয়ার ব্যবহার নিয়ে কাজ শুরু করব। jQuery ব্যবহার করে আমরা এই কাজ করতে পারি। jQuery document ready ডিক্লেয়ার করে নিলে, আমরা jQuery অব্জেক্ট  স্টোর করার জন্য কিছু ভ্যারিয়েবল তৈরি করে নিব।

container = $('.container');
	cover = $('.cover');
	play = $('#play');
	pause = $('#pause');
	mute = $('#mute');
	muted = $('#muted');
	close = $('#close');
	song = new Audio('music/track1.ogg','music/track1.mp3');
	duration = song.duration;

"song" দুইটা ট্র্যাক ডিক্লেয়ার করা আছে। ফায়ারফক্সের জন্য OGG এবং অন্য সব ব্রাউজারের জন্য MP3 ফরম্যাট। কন্ডিশনাল IF স্টেটমেন্ট দিয়ে দেখা হয়েছে যে ব্রাউজার MP3 ফরম্যাট প্লে করতে পারে কিনা।  যদি পারে তাহলে "song" ভায়রিয়েবল MP3 ফরম্যাটের ফাইল প্লে করবে, আর না হলে "OGG" ফরম্যাটের ফাইল প্লে করবে।

if (song.canPlayType('audio/mpeg;')) {
  	song.type= 'audio/mpeg';
  	song.src= 'music/track1.mp3';
	} else {
  	song.type= 'audio/ogg';
  	song.src= 'music/track1.ogg';
	}

প্লেয়ার প্লে পজ করার জন্য এখন আমরা একটি ক্লিক ফাংশন বানাবো। play() ব্যবহার করে অডিও স্টার্ট করব, এরপর jQuery মেথড replaceWith ব্যবহার করে প্লে পজ বাটন রিপ্লেস করে নেই।

  আমরা "coverLarge" ও "containerLarge" ক্লাসও "container" ও "cover" এ অ্যাড করে নিয়েছি। আমরা একটি সিএসএস ট্রানজিশন অ্যাড করেছি, যেটা দিয়ে প্লে শুরু হবে। "pause" ফাংশনও একই ভাবে কাজ করে, কিন্তু এটা ট্রানজিশন ছাড়াই কাজ করে। ক্লিক করলে, এটা পজ বাটন "play" বাটন দিয়ে রিপ্লেস করে নেয়।

play.live('click', function(e) {
		e.preventDefault();
		song.play();

		$(this).replaceWith('<a class="button gradient" id="pause" href="" title=""></a>');
		container.addClass('containerLarge');
		cover.addClass('coverLarge');
		$('#close').fadeIn(300);
		$('#seek').attr('max',song.duration);
	});

	pause.live('click', function(e) {
		e.preventDefault();
		song.pause();
		$(this).replaceWith('<a class="button gradient" id="play" href="" title=""></a>');

	});

মিউট ও মিউটেড বাটনও একই ভাবে কাজ করে, কিন্তু রিলিটেড অ্যাকশন কল করে নিয়ে কাজ করে, যেটা ক্লিকের পরে অন্য বাটন ভিজিবল করে দেয়।

mute.live('click', function(e) {
		e.preventDefault();
		song.volume = 0;
		$(this).replaceWith('<a class="button gradient" id="muted" href="" title=""></a>');

	});

	muted.live('click', function(e) {
		e.preventDefault();
		song.volume = 1;
		$(this).replaceWith('<a class="button gradient" id="mute" href="" title=""></a>');

	});

ইউজার "close" বাটন ক্লিক করলে আমরা jQuery কল করে containerLarge" এবং "coverLarge" ক্লাসগুলো রিমুভ করে নেই।  এটা প্লেয়ারের ইমেজ ও কভার হাইড করে। pause() ফাংশন কল করে প্লেয়ার পজ হয়। currentTime to equal 0 সেট করে অডিও রিসেট হয়। এটা প্লেব্যাক শুরুতে নিয়ে যায়।

$('#close').click(function(e) {
		e.preventDefault();
		container.removeClass('containerLarge');
		cover.removeClass('coverLarge');
		song.pause();
		song.currentTime = 0;
		$('#pause').replaceWith('<a class="button gradient" id="play" href="" title=""></a>');
		$('#close').fadeOut(300);
	});

এখন আমরা অডিও স্ক্রাবার নিয়ে কাজ করব, যাকে আমরা "seek" আইডি দিয়েছি। এই ফাংশন অডিওর যে কোন মাথায় আমাদের স্ক্রাবার ব্যবহার করতে সাহায্য করে। যখনই কেউ স্ক্রাবার এদিকে ওদিকে মুভ করে তখন এই ফাংশন সেটা ডিটেক্ট করে। তখন আমরা গান currentTime এ সেট করে স্ক্রাবার যেই পার্টে মুভ করা হয়েছে, গানের সেই পার্ট ম্যাচ করি। একই সাথে আমরা max attribute গানের ডিউরেশনের সাথে মিলিয়ে নেই।

$("#seek").bind("change", function() {
		song.currentTime = $(this).val();
		$("#seek").attr("max", song.duration);
	});

jQuery দিয়ে করা লাস্ট কাজ হচ্ছে "#seek" বানানো যেটা স্ক্রাবার গানের ডিউরেশন মেপে নিয়ে সেট করে। গানের টাইম আপডেট পেয়ে গেলে আমরা একটি ইভেন্ট লিসেনার বসাই, যেটা একটা ফাংশন দিয়ে পাওয়ারড হয়। আমরা কারেন্ট সংটাইম পেতে "curtime" ভ্যারিয়েবল ব্যবহার করব। এরপর স্ক্রাবারের ভ্যালু অ্যাড করে সেটা গানের কারেন্ট প্লে পজিশনে নিয়ে যাবো।

song.addEventListener('timeupdate',function (){
	curtime = parseInt(song.currentTime, 10);
		$("#seek").attr("value", curtime);
	});

আর ফাইনালি আমাদের প্লেয়ার বানানো শেষ! এখন এই HTML5 অডিও প্লেয়ার আপনি আপনার সাইট বা অ্যাপে ব্যবহার করতে পারেন।

পরিশেষ

আগে যেমন বলেছি, HTML5 অডিও একটি নতুন ফিচার এবং এটি স্টেবল হওয়ার আগে এতে আরও অনেক ইম্প্রুভমেন্ট দরকার। এই মুহুর্তে এই ফিচার দিয়ে শুধু সার্ভার থেকে কন্টিনিয়াসলি অডিও নিয়ে তা প্লেয়ারে প্লে স্ট্রিম করা যায়, ফলে ব্রাউজারে কিছু প্লেব্যাক ইস্যু দেখা দেয়। এটি সব সময় সমস্যার না, কিন্তু কিছু সময় অডিও সম্পূর্ণ ডাউনলোড হওয়ার আগেই বাজা শুরু হয়ে যায়।

এটি গেম না অডিও বেইজড অ্যাপের জন্য সমস্যা হয়ে দাঁড়াতে পারে। এই কারণে গুগল অডিও ট্যাগের এই সমস্যা কিছুটা সমাধান করতে একটি উপায় বের করেছে। Web Audio API" এর জন্য গুগল একটি প্রোপোসাল বানিয়ে তা W3C এ প্রেরণ করেছে। নেটিভ HTML5 অডিও থেকে এই এপিআই অনেক বেশি পাওয়ারফুল, কিন্তু সমস্যা হচ্ছে এই মুহুর্তে এটি শুধুমাত্র ক্রোম ব্রাউজারে কাজ করে।

গুগলের Web Audio API সম্পর্কে আরও পড়তে গুগল কোড এবং web audio specification চেক করে দেখুন।

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

অডিও প্লেয়ার নিয়ে কাজ করার আরও কিছু অপশন দেখতে এনভাটো মার্কেটের HTML5 Media সেকশন চেক করে দেখুন।