کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **پیانو مجازی** با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران اجازه می‌دهد تا با کلیک بر روی کلیدهای پیانو یا استفاده از صفحه‌کلید، نت‌های موسیقی را اجرا کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای پیانو مجازی ایجاد می‌کنیم.
```html
پیانو مجازی
```
### 2. **CSS**
برای طراحی ظاهری پیانو از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
.piano {
display: flex;
position: relative;
}
.key {
border: 1px solid #000;
height: 200px;
width: 40px;
position: relative;
margin: 0 -1px;
}
.white {
background-color: white;
z-index: 1;
}
.black {
background-color: black;
height: 120px;
width: 25px;
position: absolute;
left: 30px;
margin-left: -12.5px;
z-index: 2;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش از `Audio` برای پخش نت‌های موسیقی استفاده می‌کند.
```javascript
const keys = document.querySelectorAll('.key');
keys.forEach(key => {
key.addEventListener('click', playNote);
});
document.addEventListener('keydown', (event) => {
const note = mapKeyToNote[event.key.toUpperCase()];
if (note) {
playNoteByName(note);
}
});
function playNoteByName(note) {
const key = document.querySelector(`.key[data-note="${note}"]`);
if (key) {
playNote.call(key);
}
}
function playNote() {
const note = this.dataset.note;
const audio = new Audio(`sounds/${note}.mp3`);
audio.currentTime = 0; // برای پخش دوباره از ابتدا
audio.play();
this.classList.add('active');
setTimeout(() => {
this.classList.remove('active');
}, 200);
}
// نقشه کلیدها به نت‌ها
const mapKeyToNote = {
'A': 'C',
'W': 'C#',
'S': 'D',
'E': 'D#',
'D': 'E',
'F': 'F',
'T': 'F#',
'G': 'G',
'Y': 'G#',
'H': 'A',
'U': 'A#',
'J': 'B',
'K': 'C2',
};
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه و ساختار کلیدهای پیانو است.
2. **CSS**: طراحی ساده برای ایجاد یک پیانو زیبا و کاربرپسند.
3. **JavaScript**:
- **پخش نت‌ها**: با کلیک بر روی کلیدها یا استفاده از صفحه‌کلید، نت‌های موسیقی پخش می‌شوند.
- **نقشه کلیدها به نت‌ها**: کلیدهای صفحه‌کلید به نت‌های پیانو متصل می‌شوند.
- **پخش صدا**: از شیء `Audio` برای پخش صداهای نت‌ها استفاده می‌شود.
### نتیجه‌گیری
این پروژه **پیانو مجازی** یک مثال عالی برای یادگیری کار با صدا و رویدادهای کاربر در JavaScript است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ضبط موسیقی یا افزودن تنظیمات صدا اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **پیانو مجازی** با استفاده از HTML، CSS و JavaScript می‌باشد
