ধাপ 1: অডিও ট্যাগ দিয়ে আপনার ফ্ল্যাশ অবজেক্ট মোড়ানো
যে ব্রাউজারগুলি অডিও ট্যাগ চিনতে পারে না তারা পরিবর্তে ফ্ল্যাশ সামগ্রী লোড করবে৷
<audio>
</span><span class="old">
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</span><span class="new">
</audio>
ধাপ 2: উত্স রেফারেন্স যোগ করুন
আমরা যত খুশি "উৎস" লাইন এবং ফরম্যাট যোগ করতে পারি। যদি ব্রাউজারটি একটি নির্দিষ্ট বিন্যাস সমর্থন না করে তবে এটি পরেরটিতে ফিরে যাবে।
<span class="old"><audio></span>
<span class="new"><source src="test.mp3" type="audio/mpeg" />
<source src="test.ogg" type="audio/ogg" /></span><span class="old">
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio></span>
ধাপ 3: ফ্ল্যাশে ফলব্যাক যোগ করুন
নিরাপদ থাকার জন্য, আমাদের একটি ফ্ল্যাশ অডিও প্লেয়ারে ফলব্যাক যোগ করতে হবে, যদি ব্রাউজারটি আমাদের নির্দিষ্ট করা কোনো ফর্ম্যাট সমর্থন না করে। উদাহরণস্বরূপ, Firefox 3.5 শুধুমাত্র Ogg ফরম্যাটের সাথে অডিও ট্যাগ সমর্থন করে, কিন্তু আমাদের কাছে শুধুমাত্র mp3 ফাইলটি উপলব্ধ থাকতে পারে।
<span class="old"><audio></span>
<span class="new"><source src="test.mp3" type="audio/mpeg" /></span><span class="old">
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio>
</span><span class="new">
<div id="player_fallback"></div>
<script>
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg')) {
swfobject.embedSWF(
"player_mp3_mini.swf",
"player_fallback",
"200",
"20",
"9.0.0",
"",
{"mp3":"test.mp3"},
{"bgcolor":"#085c68"});
}
}
</script></span>
এটি সহজ করার জন্য, আমরা জাভাস্ক্রিপ্টের মাধ্যমে ফ্ল্যাশ প্লেয়ার সন্নিবেশ করার জন্য SWFObject লাইব্রেরি ব্যবহার করছি। লাইব্রেরি অন্তর্ভুক্ত করতে আপনি কেবল Google AJAX Libraries API ব্যবহার করতে পারেন আপনার শিরোনামে এই দুটি লাইন সন্নিবেশ করান:
<span class="new"><script src="https://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script></span></pre>
ধাপ 4: প্লেয়ার দেখানোর জন্য ডিফল্ট নিয়ন্ত্রণ যোগ করুন
এই নিয়ন্ত্রণগুলি কাস্টমাইজযোগ্য নয় (শেষে উদাহরণ দেখুন)। যেহেতু এই ডিফল্ট নিয়ন্ত্রণগুলি সমর্থিত বিন্যাস নির্বিশেষে প্রদর্শিত হবে আমাদের পূর্বে তৈরি করা শর্তসাপেক্ষে এর দৃশ্যমানতা পরিচালনা করতে হবে।
// TODO: DevSite - Code sample removed as it used inline event handlers
বিকল্পভাবে, আপনি JavaScript এবং CSS ব্যবহার করে নিজের প্লেয়ার তৈরি করতে পারেন।
// TODO: DevSite - Code sample removed as it used inline event handlers