Цаасан хаалганы хонх W/ P5.js & Makey Makey: 9 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:02

Макей Макей төслүүд »

Энэхүү төсөл нь p5.js дээр ноорог үүсгэж, товчлуур дарж аудио файл тоглуулах боломжтой бөгөөд дараа нь харандаа, цаас, Макей Макей ашиглан товчлуурыг дарж дууг идэвхжүүлдэг.

Энэ төсөл нь хаалганы хонхны дууг ашигладаг боловч алхамууд нь аудио файлыг p5.js эскиз дээрээ хэрхэн оруулахыг багтаасан тул ямар ч төрлийн дууг ашиглахад хялбархан дасан зохицох боломжтой юм.

P5.js -ийн талаар дэлгэрэнгүй үзэх:

Хэрэв та Makey Makey-тэй p5.js ашиглаж эхэлж байгаа бол эхлээд энэ төслийг шалгаж үзэхийг санал болгож байна:

Хангамж

Харандаа

Жижиг дөрвөлжин цаас

Makey Makey иж бүрдэл (2 матрын хавчаар)

Зөөврийн компьютер интернет холболтгүй

Алхам 1: Аудио файлыг татаж авах

Энэ төсөл нь p5.js эскиз дээрээ байршуулах шаардлагатай аудио файлыг ашиглахыг шаарддаг. Үүнийг хийхийн тулд бид эхлээд аудио файлыг татаж авах хэрэгтэй.

Хэрэв та компьютер дээрээ файл татаж авах боломжгүй эсвэл файлыг татаж аваад ноорог дээрээ оруулахыг алгасахыг хүсч байвал энэ линкээр орж аль хэдийн байршуулсан дуутай p5.js загварыг авч 3 -р алхам руу орно уу. Хэрэв та ирээдүйд p5.js дээр аудио файлтай ажиллахыг хүсч байвал энэ алхам болон дараагийн алхам нь үүнийг хэрхэн хийхийг танд харуулах болно.

Вэб дээр дууны эффект, аудио файл татаж авах олон газар байдаг, зарим нь данс шаарддаг, жишээ нь freesound.org, зарим нь soundbible.com гэх мэт данс шаарддаггүй. Төсөлдөө дуу ашиглахдаа лиценз болон/эсвэл хамаарлын шаардлагыг үргэлж анхаарч үзээрэй. Энэ талаар дэлгэрэнгүйг эндээс үзнэ үү:

Энэ төслийн хаалганы хонхны дууг Тим Кан өгсөн https://freesound.org/s/163730/ хаягаас авсан.

Хэрэв та данс үүсгэхгүйгээр дууг татаж авахыг хүсч байвал би дууг эндээс татаж авах боломжтой mp3 формат руу хөрвүүллээ:

Алхам 2: P5.js руу аудио файл байршуулах

Хаалганы хонхны дууг татаж авсны дараа бид үүнийг p5.js ноорог дээрээ оруулах ёстой бөгөөд ингэснээр бид үүнийг сонсох боломжтой болно.

Үүнийг хийхийн тулд дараах алхмуудыг дагана уу.

- Тоглуулах товчлуурын доор байрлах вэб засварлагчийн зүүн талд байгаа '>' дүрс дээр дарна уу. Энэ нь таны ноорог файлуудыг харуулдаг хажуугийн самбарыг нээх болно.

- 'Sketch Files' булангийн баруун талд доошоо харсан жижиг гурвалжин дээр дарна уу. Энэ нь 'хавтас нэмэх', 'файл нэмэх' гэсэн сонголттой унах цэсийг авчрах болно.

- "Файл нэмэх" дээр дарна уу. Энэ нь файл нэмэх цонх гарч ирнэ. Та хаалганы хонхны файлыг хайрцаг руу чирэх эсвэл "Файлуудыг байршуулахын тулд энд чирж эсвэл файл хөтчийг ашиглахын тулд дарна уу" гэсэн хайрцгийг дарна уу. Энэ нь аудио файлыг олохын тулд компьютерийнхээ файлуудыг үзэх боломжийг танд олгоно.

- Файлыг чирж эсвэл сонгосны дараа та түүнийг байршуулж байгааг харах бөгөөд хажуугийн мөрөнд файлын нэр гарч ирнэ.

Одоо та энэ аудио файлыг ноорог дээрээ ашиглах, ашиглах боломжтой болно.

Алхам 3: Аудио файлыг P5.js ноорог руу ачаалж байна

P5.js эскиз дээр аудио файл ачаалах нь биднийг дууны файлын объект болгохыг шаарддаг. Объект нь бидний ашиглаж болох өөрийн гэсэн шинж чанар, функцтэй байдаг.

Объект хийхийн тулд бид эхлээд объектыг барих хувьсагч хийх хэрэгтэй. Энэ нь ноорог зурах явцад объект болон түүний шинж чанаруудад хандах боломжийг бидэнд олгоно. Хувьсагч болгохын тулд ноорогны дээд мөрөнд ороод let гэсэн үгийг бичнэ үү. Энэ үг нь javascript дээр хувьсагчийг зарлахад хэрэглэгддэг. Дараа нь хувьсагчид нэр өгнө үү. Бид хувьсагчийг хүссэн зүйлээ дуудаж болно, гэхдээ энэ нь бидний кодонд юу хийхтэй холбоотой нэр өгөх нь тустай юм. Энэ тохиолдолд үүнийг хаалганы хонх гэж нэрлэх нь утгагүй болно.

хаалганы хонх тавих;

P5.js вэб дээр суурилсан тул ноорог ажиллаж эхлэхээс өмнө аудио файлыг ноорог дээр ачаалагдсан эсэхийг шалгах хэрэгтэй, эс тэгвээс бид объектын шинж чанарт хандах боломжгүй байж магадгүй юм. Үүнийг хийхийн тулд ноорог эхлэхээс өмнө аудио файлыг ачаалах функцийг нэмэх шаардлагатай байна. Энэ функцийг preload () гэж нэрлэдэг. Бид үүнийг setup () ба draw () функцын нэгэн адил бичдэг.

Буржгар хаалт дотор loadSound () функцийг ашиглан бид хувьсагчаа дууны объектод оноож өгнө. Хаалтны дотор аудио файлын яг нэрийг ишлэл дотор бичнэ үү.

функцийг урьдчилан ачаалах () {

хаалганы хонх = loadSound ('хаалганы хонх.mp3');

}

Алхам 4: KeyPressed () функцийг ашиглан аудио файл тоглуулах

Аудио файлыг ноорог дээр ачаалж байгаа тул та үүнийг play () аргаар тоглуулж болно. Аргууд нь үндсэндээ объектод зориулагдсан функцууд юм.

Хэрэв та өмнө нь p5.js дээр товчлуур дардаг байсан бол draw функцийн дотор keyIsPressed хувьсагчтай нөхцөлт мэдэгдлийг ашигласан байх. Гэсэн хэдий ч аудио файлтай ажиллахдаа бид үүнийг зурах функц дотор идэвхжүүлэхийг хүсэхгүй байна. Draw функц нь давталт тул байнга шинэчлэгддэг. Энэ нь сонсоход тийм ч таатай биш товчлуур дарагдсан тохиолдолд аудио файл дахин дахин тоглогдох болно гэсэн үг юм.

Үүнээс зайлсхийхийн тулд та keyPressed () нэртэй функцийг ашиглах гэж байна. Үүнийг мөн setup () ба draw () функцтэй адил бичдэг. Үүнийг draw () функцын доор кодын доод хэсэгт бичнэ үү.

Буржгар хаалт дотор та товчлуур дарахад аудио файлыг нэг удаа ажиллуулах play () аргыг оруулна. Объектод зориулсан аргыг ашиглахын тулд тухайн объектыг агуулсан хувьсагчийн нэрийг бичээд дараа нь.play ();

функцийн товчлуур дарагдсан () {

хаалганы хонх.play ();

}

Та ноорогоо ажиллуулахдаа товчлуур дарахад хаалганы хонх дуугарна.

ЧУХАЛ ТАЙЛБАР: Манай кодонд товчлуур дарах үед вэб редактор бид текст засварлагч дээр код бичих товчлуур дарж байгаа эсвэл түлхүүр дарж кодчилсон зүйлээ хийх гэж байгаа эсэхийг мэдэх шаардлагатай. Тоглуулах товчлуур дээр дарахад хулганыг зураг дээр дараад зураг дээр дарна уу. Энэ нь редакторын анхаарлыг ноорог дээр авчрах бөгөөд товчлуур дарахад бидний хийхийг хүсч буй товчлуур дарагдах болно

Алхам 5: Цаасны товчлуурыг хий

Макей Макей ашиглан дууг өдөөхийн тулд бид ердийн харандаа, цаас ашиглан товчлуур хийх болно.

Хагас тойрог зурж, хооронд нь маш бага зай үлдээгээрэй, ингэснээр тэд хүрэхгүй, гэхдээ ойрхон байгаа тул бид хоёр талыг нэгэн зэрэг хуруугаараа хүрч болно. Хагас тойрог бүр цаасны үзүүр хүртэл үргэлжилсэн зузаан шугамтай байх ёстой. Энд та Makey Makey -аас матрын хавчаарыг хавсаргах болно.

Хар талыг нь харанхуйгаар дүүргэсэн эсэхийг шалгаарай, ингэснээр харандаагаар хийсэн бал чулуу нь Макей Макей -ийн гүйдлийг барьж чаддаг.

Хоёр хагас тойргийн загвар нь хоорондоо маш бага зайтай байх бөгөөд хоёр талд нь зэрэг хүрэх боломжгүй юм. Энэ нь газардуулгын утсыг барихгүйгээр Makey Makey дээрх түлхүүр ба Дэлхий хоёрын хоорондох хэлхээг дуусгах боломжийг танд олгоно.

Алхам 6: Makey Makey -ийг тохируулна уу

Makey Makey самбар, USB кабель, хоёр матрын хавчаараас гар. Нэг матрын хавчаарыг Дэлхийд, нөгөө нь Сансрын товчлуурт хавсаргана уу (бид кодондоо түлхүүр зааж өгөөгүй тул бидний дарсан товчлуурууд дууг өдөөх болно).

Space товчлуур дээр хавсаргасан матрын хавчаарыг аваад цаасан товчлуурын нэг талд хавчуул. Дэлхийд наалдсан матрын хавчаарыг аваад цаасан товчлуурын нөгөө талд хавчуул.

USB кабелийг зөөврийн компьютерт холбоно уу.

Алхам 7: Аудио файлыг идэвхжүүлэхийн тулд товчлуурыг дарна уу

Энэ үед та хаалганыхаа хонхыг дарахад бэлэн байна. Ноорогоо эхлүүлээрэй (зураг дээр хулганаа дарахаа мартуузай, ингэснээр товчлуур дарахад keyPressed () функцийг ажиллуулна), дараа нь цаасан дээрх хоёр хагас тойрог дээр нэгэн зэрэг хүрнэ үү. Та хаалганы хонхны аудио файлыг тоглуулах дууг сонсох ёстой.

Алхам 8: Өргөтгөл: Ноорог дээр харааны бүрэлдэхүүн хэсгийг нэмнэ үү

Энэ үед манай ноорог нь зөвхөн аудио файлыг тоглуулах кодыг агуулдаг тул дэлгэц дээр ямар ч өөрчлөлт гарахгүй. Хэрэв та ямар нэгэн төрлийн интерактив дууны төсөл бүтээх гэж байгаа бол энэ нь таны хийхийг хүссэн зүйл байж магадгүй юм.

Гэсэн хэдий ч p5.js -ийн харааны кодлох чадварын ачаар график нэмэх боломж хязгааргүй юм. Та зөвхөн аудио файл тоглож байх үед гарч ирэх, дууны хэмжээ, давтамжийн өөрчлөлтөд хариу өгөх, тэр ч байтугай дууны дүрсийг дүрслэн харуулах гэх мэт олон янзаар аудио файлууддаа хариу үйлдэл үзүүлдэг дүрслэлтэй байж болно.

Алхам 9: Өргөтгөл: Товчлуурыг дарахад тойргийн өнгийг өөрчлөх

Энэ төслийг хялбар байлгахын тулд бид товчлуур дарахад өнгө өөрчлөгддөг тойрог хийх гэж байна.

Draw () функц дээр ellipse () функцийг ашиглан тойрог үүсгэнэ. Дээрх хэсэгт fill () функцийг нэмж тойргийн өнгийг тохируулна уу. Энэхүү эскизийн хувьд анхны өнгө нь цагаан өнгөтэй байх бөгөөд энэ нь 255 саарал өнгөтэй байна. Та өнгийг RGB өнгөний утгыг ашиглан хүссэн өнгө болгон тохируулж болно.

Fill () функц ба ellipse () функцын хооронд хаалт дотор keyIsPressed хувьсагчийг ашиглан нөхцөлт мэдэгдэл үүсгэнэ. Нөхцөлт мэдэгдлийн буржгар хаалтуудын хооронд товчлуурыг дарахад тойргийг өөрчлөхийг хүссэн өнгөөр өөр fill () функцийг тавь. Энэ төслийн хувьд өнгө нь 255, 255, 0 гэсэн RGB утгатай шар болж өөрчлөгдөнө.

if (keyIsPressed) {

дүүргэх (255, 255, 0);

}

Ноорогыг ажиллуулахын тулд тоглуулах товчийг дарна уу. Ноорог ачаалах үед цагаан тойрог гарч ирэх ёстой (зураг дээр хулганаа дарахаа бүү мартаарай). Дараа нь цаасан товчлуурыг дарахад хаалганы хонх дуугарч, тойргийн өнгө өөрчлөгдөж байгааг харах хэрэгтэй.

p5.js ноорог: