کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **خواننده متن به گفتار (Speech Text Reader) با JavaScript**
این پروژه یک برنامه ساده است که به کاربر اجازه می‌دهد متن ورودی را به گفتار تبدیل کند. این برنامه با استفاده از HTML، CSS و JavaScript پیاده‌سازی شده است و از API های مرورگر برای تبدیل متن به گفتار استفاده می‌کند.
### 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 {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 500px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
textarea {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
resize: none;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این کد از Web Speech API برای تبدیل متن به گفتار استفاده می‌کند.
```javascript
// انتخاب عناصر DOM
const textInput = document.getElementById('textInput');
const speakBtn = document.getElementById('speakBtn');
// تابع برای تبدیل متن به گفتار
function speakText() {
const text = textInput.value; // دریافت متن از ورودی
// ایجاد یک شی گفتار
const speech = new SpeechSynthesisUtterance(text);
// تنظیم زبان و ویژگی‌های دیگر (اختیاری)
speech.lang = 'fa-IR'; // زبان فارسی
speech.volume = 1; // حجم صدا
speech.rate = 1; // سرعت گفتار
speech.pitch = 1; // تن صدا
// اجرای گفتار
window.speechSynthesis.speak(speech);
}
// افزودن رویداد کلیک به دکمه
speakBtn.addEventListener('click', speakText);
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، یک ناحیه متنی برای وارد کردن متن و یک دکمه برای تبدیل متن به گفتار است.
2. **CSS**: طراحی ساده و کاربرپسند برای رابط کاربری.
3. **JavaScript**:
- **متن ورودی**: متن از ناحیه متنی دریافت می‌شود.
- **گفتار**: از `SpeechSynthesisUtterance` برای ایجاد گفتار استفاده می‌شود و با تنظیم زبان و ویژگی‌های دیگر، متن به گفتار تبدیل می‌شود.
- **رویداد کلیک**: با کلیک بر روی دکمه، متن ورودی به گفتار تبدیل می‌شود.
### نتیجه‌گیری
این پروژه **خواننده متن به گفتار** یک مثال عالی برای استفاده از API های مرورگر و مفاهیم JavaScript است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند تغییر صدای گفتار، ذخیره‌سازی متن و غیره اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **خواننده متن به گفتار (Speech Text Reader) با JavaScript** می‌باشد
