کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
پروژه **"پخش‌کننده صوتی ساده" (Simple Audio Player App)** با استفاده از JavaScript به شما کمک می‌کند تا اصول پخش فایل‌های صوتی و ایجاد رابط کاربری ساده برای کنترل پخش را یاد بگیرید. این پروژه به شما امکان می‌دهد تا فایل‌های صوتی را پلی، متوقف و کنترل کنید.
### مراحل پیاده‌سازی پروژه
#### ۱. ساختار پروژه
ابتدا یک پوشه جدید به نام `simple-audio-player` ایجاد کرده و در آن سه فایل به نام‌های `index.html`، `styles.css` و `script.js` بسازید. همچنین، یک پوشه به نام `audio` ایجاد کرده و فایل‌های صوتی خود را در آن ذخیره کنید.
#### ۲. ایجاد فایل HTML
**index.html**:
```html
پخش‌کننده صوتی ساده
```
#### ۳. ایجاد فایل CSS
**styles.css**:
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
width: 300px;
}
h1 {
font-size: 20px;
color: #333;
}
.controls {
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 5px;
cursor: pointer;
}
.progress {
margin-top: 20px;
font-size: 14px;
color: #555;
}
```
#### ۴. پیاده‌سازی منطق پخش‌کننده صوتی در JavaScript
**script.js**:
```javascript
const audioPlayer = document.getElementById('audio-player');
const playBtn = document.getElementById('play-btn');
const pauseBtn = document.getElementById('pause-btn');
const stopBtn = document.getElementById('stop-btn');
const currentTimeSpan = document.getElementById('current-time');
const durationSpan = document.getElementById('duration');
// پخش فایل صوتی
playBtn.addEventListener('click', () => {
audioPlayer.play();
});
// توقف فایل صوتی
pauseBtn.addEventListener('click', () => {
audioPlayer.pause();
});
// ایست کامل و بازگشت به ابتدا
stopBtn.addEventListener('click', () => {
audioPlayer.pause();
audioPlayer.currentTime = 0;
});
// به‌روزرسانی زمان فعلی و مدت فایل
audioPlayer.addEventListener('timeupdate', () => {
const currentMinutes = Math.floor(audioPlayer.currentTime / 60);
const currentSeconds = Math.floor(audioPlayer.currentTime % 60);
currentTimeSpan.textContent = `${pad(currentMinutes)}:${pad(currentSeconds)}`;
});
// به‌روزرسانی مدت کل فایل صوتی پس از بارگذاری
audioPlayer.addEventListener('loadedmetadata', () => {
const durationMinutes = Math.floor(audioPlayer.duration / 60);
const durationSeconds = Math.floor(audioPlayer.duration % 60);
durationSpan.textContent = `${pad(durationMinutes)}:${pad(durationSeconds)}`;
});
// تابع کمکی برای اضافه کردن صفر در ابتدای اعداد
function pad(number) {
return number < 10 ? '0' + number : number;
}
```
### توضیحات کد
1. **HTML**:
- شامل یک عنصر `
2. **CSS**:
- طراحی ساده برای نمایش پخش‌کننده صوتی و دکمه‌های کنترل. این طراحی با استفاده از رنگ‌های آرام و یک جعبه حاوی کنترل‌ها پیاده‌سازی شده است.
3. **JavaScript**:
- **پخش فایل صوتی**: با کلیک بر روی دکمه "پخش"، فایل صوتی پخش می‌شود.
- **توقف فایل صوتی**: با کلیک بر روی دکمه "توقف"، پخش فایل متوقف می‌شود.
- **ایست کامل**: دکمه "ایست" پخش را متوقف کرده و موقعیت پخش را به ابتدای فایل باز می‌گرداند.
- **به‌روزرسانی زمان‌ها**: با هر به‌روزرسانی زمان پخش، زمان فعلی فایل نمایش داده می‌شود و هنگام بارگذاری فایل، مدت کل فایل صوتی نیز نمایش داده می‌شود.
- **تابع کمکی `pad()`**: این تابع به منظور اضافه کردن صفر به اعداد کمتر از ۱۰ برای نمایش دقیق‌تر زمان استفاده می‌شود.
### نحوه اجرای پروژه
1. فایل‌ها را ذخیره کرده و سپس فایل `index.html` را در مرورگر خود باز کنید.
2. دکمه "پخش" را فشار دهید تا فایل صوتی شروع به پخش کند.
3. با استفاده از دکمه‌های "توقف" و "ایست" میتوانید پخش فایل را کنترل کنید.
### نتیجه‌گیری
این پروژه ساده به شما امکان می‌دهد که نحوه استفاده از ویژگی‌های عنصر `
| صفحه قابل مشاهده:
دانلود پروژه کاربردی پخش‌کننده صوتی ساده" (Simple Audio Player App)** با استفاده از JavaScript می‌باشد
