ساخت یک درام پد (Drum Pad) ساده با html و css و js

ما قصد داریم در این مطلب یک درام پد ساده مثل عکس بالا رو با html و css و vanilla js بسازیم. یه قابلیتی که این درام پد داره اینکه می تونیم از دکمه های کیبورد هم استفاده کنیم. تو این درام پد از یه گوگل فونت استفاده کردیم و چیدمان صفحه هم با flexbox انجام دادیم. در کل سعی کردم خیلی ساده باشه و چیز خاصی نداشته باشه. در ضمن کل فایل های اصلی با فایل های صوتی درام کیت رو تو این لینک تو گیت هاب گذاشتم.

خوب اول از همه تو پوشه پروژمون یه پوشه به اسم sounds ساختیم و فایلای صوتی درام کیتمون رو داخل اون ریختیم. حالا بریم سراغ فایل html همونطور که تو عکس زیر می بینیم از بالا به ترتیب یه تگ p بالا داریم و دو تا div با کلاس های first-row و second-row داریم تو هرکدوم اونا هم شش تا div دیگه هست که همون دکمه درام پدمون هستن و تو هرکدوم از این div ها یه حرف انگلیسی با یه تگ audio هستش که سورس این audio ها به فایل های صوتی درام کیتمون تو پوشه sounds هستش. آخر سر هم دوباره یه تگ p دیگه داریم.

فایل css هم خیلی سادست و توضیح نمی دمش. برای فایل js هم کدشو در زیر آوردیم. ابتدا دو تا متغیر ساختیم که اولیش همه دوازده تا div با کلاس div-drum رو بهمون بر میگردونه و دومیش هم دوازده تا تگ audio رو بهمون برمیگردونه. بعدش دوتا لوپ for داریم که تو هر کدومشون یه EventListener گذاشتیم. EventListener لوپ اول برای کلیک موس هستش و EventListener لوپ دوم برای کلید های مشخص شده کیبورد هستش که برای لوپ دوم همونطور که می بینید همه کلید هایی که میخایم استفاده کنیم رو داخل یه آرایه ریختیم با یه if چک میکنیم که اگه کلید فشار داده شده یکی از کلید مشخص شده تو آرایه ما باشه تگ audio پلی بشه.

const divDrum = document.getElementsByClassName(&quotdiv-drum&quot);

const audioDrum = document.getElementsByClassName(&quotaudio-drum&quot);

for (let i = 0; i < divDrum.length; i++) {

    divDrum[i].addEventListener(&quotclick&quot,(playDrumMouse = () => {

        audioDrum[i].play();

        audioDrum[i].currentTime = 0;

        divDrum[i].style.background = &quot#ffd700"

        setTimeout(function () {

            divDrum[i].style.background = &quotblack"

        }, 100);

    }));

}

buttonArray = [&quott&quot, &quoty&quot, &quotu&quot, &quoti&quot, &quoto&quot, &quotp&quot, &quota&quot, &quots&quot, &quotd&quot, &quotf&quot, &quotg&quot, &quoth&quot];

for (let i = 0; i < buttonArray.length; i++) {

    const element = buttonArray[i];

    document.addEventListener(&quotkeydown&quot,(playDrumKeyboard = (event) => {

        if (event.key == element) {

            audioDrum[i].play();

            audioDrum[i].currentTime = 0;

            divDrum[i].style.background = &quot#ffd700"

            setTimeout(function () {

                divDrum[i].style.background = &quotblack"

            }, 100);

        }

    }));

}

نکته آخر، دستور زیر کاربردش اینکه وقتی این دستور نباشه برای هر بار پلی شدن یه تگ audio باید وایسیم تا آخر پلی شه بعد دوباره پلیش کنیم ولی با این دستور می تونیم قبل تموم شدنش دوباره تگ audio رو پلی کنیم. می تونید پاکش کنید و امتحان کنید. ممنون از توجهتون.

audioDrum[i].currentTime = 0;