জাভাস্ক্রিপ্ট অডিও প্লেয়ার audio.js

আসসালামু আলাইকুম,
আপনি নিশ্চয়ই <audio> ট্যাগ ইউজ করেছেন।

এখন আপনাদের জাভাস্ক্রিপ্ট অডিও প্লেয়ার বানানো শিখিয়ে দেবো।

যদি আপনার ব্লগস্পট সাইট হয়, তবে Templete>Edit HTML দিয়ে <head> ও </head> এর মাঝে নিচের কোড পেস্ট করে দিন।

<script src="http://kolber.github.io/audiojs/audiojs/audio.min.js"></script>
<script>
      audiojs.events.ready(function() {
        audiojs.createAll();
      });
</script> 

এখন আপনার কাজ শেষ!

কেবল নিচের মতো করে অডিও ইম্বেড করতে হবে আপনাকে,
<audio src="http://ge.tt/api/1/files/6VtKUPO2/2/blob?download" preload="auto"></audio>

প্রয়জনে কাস্টম সিএসএস দিতে পারেন,


<style>
p { clear: both; }
      .audiojs { height: 22px; background: #404040;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444));
        background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);
        -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
        -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); }
      .audiojs .play-pause { width: 15px; height: 20px; padding: 0px 8px 0px 0px; }
      .audiojs p { width: 25px; height: 20px; margin: -3px 0px 0px -1px; }
      .audiojs .scrubber { background: #5a5a5a; width: 310px; height: 10px; margin: 5px; }
      .audiojs .progress { height: 10px; width: 0px; background: #ccc;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc));
        background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%); }
      .audiojs .loaded { height: 10px; background: #000;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222));
        background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); }
      .audiojs .time { float: left; height: 25px; line-height: 25px; }
      .audiojs .error-message { height: 24px;line-height: 24px; }
      .track-details { clear: both; height: 20px; width: 448px; padding: 1px 6px; background: #eee; color: #222; font-family: monospace; font-size: 11px; line-height: 20px;
        -webkit-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.15); }
      .track-details:before { content: '♬ '; }
      .track-details em { font-style: normal; color: #999; }
    </style>

শেয়ার করুন

লেখকঃ

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


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