আসসালামু আলাইকুম,
আপনি নিশ্চয়ই <audio> ট্যাগ ইউজ করেছেন।
এখন আপনাদের জাভাস্ক্রিপ্ট অডিও প্লেয়ার বানানো শিখিয়ে দেবো।
যদি আপনার ব্লগস্পট সাইট হয়, তবে Templete>Edit HTML দিয়ে <head> ও </head> এর মাঝে নিচের কোড পেস্ট করে দিন।
এখন আপনার কাজ শেষ!
কেবল নিচের মতো করে অডিও ইম্বেড করতে হবে আপনাকে,
আপনি নিশ্চয়ই <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>