HTML এ মিউজিক প্লেয়ার কোড কি?

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

এইচটিএমএল মিউজিক প্লেয়ার

বর্তমানে, আপনি ওয়েব ব্রাউজ করে সঙ্গীত (বা যেকোনো ধরনের অডিও) বাজানোর জন্য শত শত বিশেষ প্রোগ্রাম খুঁজে পেতে পারেন; কিছু অন্যদের চেয়ে ভাল এবং আরও অনেক বিকল্প এবং আরও বিকল্প সহ। যাইহোক, এটা সম্ভব যে আমরা নিজেরাই, কোড ব্যবহারের মাধ্যমে, আমাদের নিজস্ব তৈরি করতে পারি এইচটিএমএল মিউজিক প্লেয়ার; অবশ্যই, এটি বেশ সহজ, কিন্তু এটি তার কার্য সম্পাদন করে।

এই কাজের জন্য আপনাকে কোডিং এবং প্রোগ্রামিংয়ে বিশেষজ্ঞ হওয়ার দরকার নেই, যেহেতু সত্য, এটি করা বেশ সহজ এবং খুব সহজ কিছু।

এইচটিএমএল কি?

নিবন্ধের বিষয়বস্তু দিয়েই শুরু করার আগে, আমরা বিশ্বাস করি যে এটি খুবই গুরুত্বপূর্ণ যে আপনি HTML কী তা সম্পর্কে একটু জানেন; এমন কিছু যা আপনি সম্ভবত উল্লেখ করেছেন বা কোন সময়ে পড়েছেন।

HTML মানে হাইপারটেক্সট মার্কআপ ভাষা; যা ওয়েব পেজের উন্নয়নের জন্য ব্যবহৃত একটি কোড ল্যাঙ্গুয়েজ। আরো বিশেষভাবে, এই কোডটি আমাদের সকল তথ্য, তথ্য, মাল্টিমিডিয়া সামগ্রী, পাঠ্য এবং আরও অনেক কিছু একত্রিত করতে সাহায্য করে; নকশা এবং শৈলীর ক্ষেত্রে, এটি CSS- এর অংশ, অন্য কোড ভাষা থেকে যায়।

আপনি যখন এই নিবন্ধটি পড়বেন, আপনি জানতে পারবেন যে এটি একই HTML ভাষা ব্যবহার করে করা হয়েছে; ওয়েব ব্রাউজার যেমন ক্রোম, মাইক্রোসফট এজ এবং অন্যান্য, এই কোডটির "অনুবাদ" করার জন্য দায়ী যা আমাদের পৃষ্ঠার স্বাভাবিক বিষয়বস্তু দেখায়। আপনাকে একটি পরিষ্কার ধারণা দিতে, আপনি এখনই আপনার ক্রোম ব্রাউজার থেকে নিম্নলিখিত শর্টকাটটি ব্যবহার করে দেখতে পারেন: Ctrl + Shift + I; এটি ডেভেলপার টুল খুলবে এবং আপনি দেখতে পাবেন যে একটি ওয়েব পেজ আসলে কেমন হয় যদি এটি 'অনুবাদ' না হয়।

ইতিমধ্যেই স্পষ্ট করে দিচ্ছি, সংক্ষেপে HTML কোড কি; এখন আমরা দেখাব কিভাবে আপনার তৈরি করতে হয় সঙ্গীত প্লেয়ার.

এইচটিএমএল, কোডে মিউজিক প্লেয়ার

একটি ওয়েব ব্রাউজারে একটি মিউজিক প্লেয়ার কেমন দেখাচ্ছে তা দেখতে, ব্রাউজারের ভিতরে আপনার একটি ট্র্যাক টেনে আনতে চেষ্টা করুন; আপনি দেখতে পাবেন যে এটি এটি বাজানো শুরু করবে এবং আপনাকে প্রধান ড্রাইভার দেখাবে।

যেমনটি আমরা আপনাকে বলেছি, এটি বেশ সহজ কিছু, যার কেবল বোতাম থাকবে খেলা/বিরতি, সময় নেভিগেটর, সংখ্যার সময় এবং ভলিউম নিয়ামক। মূলত, অন্যান্য সমস্ত ব্রাউজারের একটি অনুরূপ নকশা রয়েছে।

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

প্লেয়ার ertোকানোর জন্য কোড

একবার আপনার HTML5 এর সাথে আপনার ওয়েব পেজের বডি আছে; যে কোডটি আপনাকে সাধারণ প্লেয়ার ertোকানোর অনুমতি দেবে তা হল:

<audio src="../music/woman.mp3" controls="controls" type="audio/mpeg" preload="preload">
</audio>

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

পূর্ববর্তী বৈশিষ্ট্যগুলি, তাদের উপস্থিত থাকা আবশ্যক, যাতে আমাদের এইচটিএমএল মিউজিক প্লেয়ার, অনুকূলভাবে কাজ করে।

আপনি যদি কম্পিউটার জগতের এই অংশটি পছন্দ করেন এবং খুব আগ্রহী হন, কোড, প্রোগ্রামিং এবং অন্যান্যগুলির সাথে যা কিছু আছে; আপনি এই এবং অন্যান্য কোড ভাষা সম্পর্কে আরও শিখতে নিম্নলিখিত নিবন্ধটি দেখতে পারেন: কোন প্রোগ্রামিং ভাষা শিখতে হবে?

একটি সঙ্গীত তালিকা তৈরি করার জন্য কোড

পূর্ববর্তী বিভাগে, আমরা কেবল একটি নির্দিষ্ট পথের সাথে বা একটি নির্দিষ্ট অডিও সহ একটি প্লেয়ার ertোকানোর জন্য কোডটি কী ছিল তা দেখেছি; সুতরাং আপনি «src» বৈশিষ্ট্যের জন্য যে গানটি বেছে নিয়েছেন তা ছাড়া এটি অন্য কোন গান চালাবে না; তাই যদি আপনি অন্য ট্র্যাক চান, তাহলে আপনাকে সোর্স কোডে যেতে হবে এবং অ্যাট্রিবিউটের ঠিকানা পরিবর্তন করতে হবে অথবা ফোল্ডারের নতুন ঠিকানা দিতে অন্য প্লেয়ারকেও প্রবেশ করতে হবে।

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

একই প্রোগ্রাম বা একই নোটের ব্লগে, আপনি এই নতুন কোড ভাষা চালু করতে পারবেন। আপনার জন্য একটি বাক্স তৈরি করা হবে, গানের তালিকা সহ, যেখানে ক্লিক করে, আপনি এই মুহূর্তে যা শুনতে চান তা নির্বাচন করতে পারেন; আপনি তালিকায় রাখতে পারেন, যত গান আপনি চান, কারণ এতে কোন সীমা নেই।

আপনার নিজের তৈরি করতে সক্ষম হওয়ার জন্য প্রয়োজনীয় জাভাস্ক্রিপ্ট সোর্স কোড প্লেলিস্ট এবং আপনার উপর চালান এইচটিএমএল মিউজিক প্লেয়ার; নিম্নলিখিত হল:

<script>
function cambiarTrack(track) {
   var path =  track.getAttribute("path")
   viejo_audio = document.getElementById("reproductor")
   audio_padre = viejo_audio.parentNode
   audio_padre.removeChild(viejo_audio)
   nuevo_audio = document.createElement("audio")
   nuevo_audio.setAttribute("id","reproductor")
   nuevo_audio.setAttribute("controls", "controls")
  // nuevo_audio.setAttribute("autoplay", "autoplay")
   source = document.createElement("source")
   source.setAttribute("src", path)
   source.setAttribute("type", "audio/mpeg")
   source.setAttribute("id", "reproductorSource")
   nuevo_audio.appendChild(source)
   audio_padre.appendChild(nuevo_audio)}
function cargarReproductor() {
         var select = document.getElementById("selectTrack")
         var path = select.options[0].getAttribute("path")
   nuevo_audio = document.createElement("audio")
   nuevo_audio.setAttribute("id","reproductor")
   nuevo_audio.setAttribute("controls", "controls")       
   source = document.createElement("source")
   source.setAttribute("src", path)
   source.setAttribute("type", "audio/mpeg")
   source.setAttribute("id", "reproductorSource")
   nuevo_audio.appendChild(source)
   padre = document.getElementById("reproductorBox")
   padre.appendChild(nuevo_audio)
}
</script>
<div id="reproductorBox"></div>
<select id = "selectTrack" multiple onchange="cambiarTrack(this.options[this.selectedIndex]);">
<option path="../music/take-on-me.mp3">Ah Ah - Take on me</option>
<option path="../music/dust-in-the-wind.mp3">Kansas - Dust in the wind</option>
<option path="../music/how-deep-is-your-love.mp3">Bee Geees - How deep is your love</option>
</select>
<script>cargarReproductor();</script>

এটি গুরুত্বপূর্ণ যে আপনি প্রতিটি "বিকল্প" ট্যাগে দেখেন, আপনি সঙ্গীতের ঠিকানাটি তার নামের সাথে প্রবেশ করুন, যেমন পূর্ববর্তী উদাহরণে; যেহেতু এটি সম্ভব যে অডিও চালানোর সময় একটি ত্রুটি ঘটে।

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