HTML5 অডিও ট্যাগ বাস্তবায়নের জন্য দ্রুত নির্দেশিকা

আর্নেস্ট ডেলগাডো
Ernest Delgado
X

ধাপ 1: অডিও ট্যাগ দিয়ে আপনার ফ্ল্যাশ অবজেক্ট মোড়ানো

যে সকল ব্রাউজার অডিও ট্যাগ চিনতে পারে না তারা পরিবর্তে ফ্ল্যাশ সামগ্রী লোড করবে।

 <audio>
    <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>

ধাপ 2: উত্স রেফারেন্স যোগ করুন

আমরা যত খুশি "উৎস" লাইন এবং ফরম্যাট যোগ করতে পারি। যদি ব্রাউজারটি একটি নির্দিষ্ট বিন্যাস সমর্থন না করে তবে এটি পরেরটিতে ফিরে যাবে।

 <audio>
  <source src="test.mp3" type="audio/mpeg" />
  <source src="test.ogg" type="audio/ogg" />

  <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>

ধাপ 3: ফ্ল্যাশে ফলব্যাক যোগ করুন

নিরাপদ থাকার জন্য, আমাদের একটি ফ্ল্যাশ অডিও প্লেয়ারে ফলব্যাক যোগ করতে হবে, যদি ব্রাউজারটি আমাদের নির্দিষ্ট করা কোনো ফর্ম্যাট সমর্থন না করে। উদাহরণস্বরূপ, Firefox 3.5 শুধুমাত্র Ogg ফরম্যাটের সাথে অডিও ট্যাগ সমর্থন করে, কিন্তু আমাদের কাছে শুধুমাত্র mp3 ফাইলটি উপলব্ধ থাকতে পারে।

<audio>
  <source src="test.mp3" type="audio/mpeg" />
  <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>

<div id="player_fallback"></div>
<script type="application/javascript">
  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>

এটি সহজ করার জন্য, আমরা জাভাস্ক্রিপ্টের মাধ্যমে ফ্ল্যাশ প্লেয়ার সন্নিবেশ করার জন্য SWFObject লাইব্রেরি ব্যবহার করছি। লাইব্রেরি অন্তর্ভুক্ত করতে আপনি কেবল Google AJAX Libraries API ব্যবহার করতে পারেন আপনার শিরোনামে এই দুটি লাইন সন্নিবেশ করান:

<script src="http://www.google.com/jsapi" type="application/javascript"></script>
<script type="application/javascript">google.load("swfobject", "2.2");</script>

ধাপ 4: প্লেয়ার দেখানোর জন্য ডিফল্ট নিয়ন্ত্রণ যোগ করুন

এই নিয়ন্ত্রণগুলি কাস্টমাইজযোগ্য নয় (শেষে উদাহরণ দেখুন)। যেহেতু এই ডিফল্ট নিয়ন্ত্রণগুলি সমর্থিত বিন্যাস নির্বিশেষে প্রদর্শিত হবে আমাদের পূর্বে তৈরি করা শর্তসাপেক্ষে এর দৃশ্যমানতা পরিচালনা করতে হবে।

<audio id="audio_with_controls" controls="controls">
  <source src="test.mp3" type="audio/mpeg" />
  <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>

<div id="player_fallback"></div>
<script type="application/javascript">
  if (document.createElement('audio').canPlayType) {
    if (!document.createElement('audio').canPlayType('audio/mpeg')) {
      ... SWFObject script line here ...
      document.getElementsById('audio_with_controls').style.display = 'none';
    }
  }
</script>

বিকল্পভাবে, আপনি JavaScript এবং CSS ব্যবহার করে নিজের প্লেয়ার তৈরি করতে পারেন।

<audio id="audio">
  <source src="test.mp3" type="audio/mpeg" />
  <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>

<div id="player_fallback"></div>
<div id="player" style="display: none">
  <button onClick="document.getElementById('audio').play()">Play</button>
  <button onClick="document.getElementById('audio').pause()">Pause</button>
</div>

<script type="application/javascript">
  if (document.createElement('audio').canPlayType) {
    if (!document.createElement('audio').canPlayType('audio/mpeg')) {
      ... SWFObject script lines here ...
    } else { // HTML5 audio + mp3 support
      document.getElementById('player').style.display = 'block';
    }
  }
</script>