Créer un site Web de synthèse vocale
Aug 22, 2024 am 06:33 AMIntroduction
Bonjour, amis développeurs ! Je suis ravi de vous présenter mon dernier projet : un Générateur de synthèse vocale simple mais puissant. Ce projet est un moyen fantastique d'approfondir les capacités de JavaScript, en particulier dans la gestion des entrées utilisateur, l'interaction avec l'API Web Speech et la mise à jour dynamique du DOM. Que vous soyez débutant ou que vous cherchiez à approfondir vos connaissances en JavaScript, ce générateur de synthèse vocale est un excellent projet sur lequel travailler.
Aperçu du projet
Le Text to Speech Generator est une application Web qui permet aux utilisateurs de convertir du texte en mots prononcés à l'aide de la fonction de synthèse vocale du navigateur. Ce projet montre comment créer une interface utilisateur interactive et accessible tout en fournissant des commentaires en temps réel en convertissant la saisie de texte en parole.
Caractéristiques
- Interface conviviale : conception simple et intuitive pour une interaction utilisateur transparente.
- Discours en temps réel : convertit instantanément le texte saisi en parole lorsque vous tapez et cliquez sur le bouton Parler.
- Fonctionnalité d'arrêt : permet aux utilisateurs d'arrêter le discours à tout moment pendant la lecture.
- Conception réactive : garantit une expérience cohérente sur différentes tailles d'écran et appareils.
Technologies utilisées
- HTML : Structure la page Web et les éléments de saisie.
- CSS : stylise l'interface, garantissant un design épuré et réactif.
- JavaScript : Gère la logique de synthèse vocale et les interactions utilisateur.
Structure du projet
Voici un aperçu rapide de la structure du projet :
Text-to-Speech-Generator/ ├── index.html ├── styles.css └── script.js
- index.html : contient la structure HTML du générateur de synthèse vocale.
- styles.css : inclut des styles CSS pour améliorer l'apparence et la réactivité de l'application.
- script.js : Gère la logique de synthèse vocale et les interactions utilisateur.
Installation
Pour démarrer le projet, suivez ces étapes :
-
Cloner le dépôt :
git clone https://github.com/abhishekgurjar-in/Text-to-Speech-Generator.git
Copier après la connexion -
Ouvrez le répertoire du projet :
cd Text-to-Speech-Generator
Copier après la connexion -
Exécuter le projet :
- Ouvrez le fichier index.html dans un navigateur Web pour commencer à utiliser le générateur de synthèse vocale.
Usage
- Ouvrez le site Web dans un navigateur Web.
- Tapez votre texte dans la zone de texte fournie.
- Cliquez sur le bouton « Prononcer le texte » pour entendre le texte prononcé à haute voix.
- Cliquez sur le bouton "Stop" si vous souhaitez arrêter le discours.
Explication du code
HTML
Le fichier index.html fournit la structure de base du générateur de synthèse vocale, y compris la zone de texte pour la saisie utilisateur et les boutons pour déclencher la synthèse vocale. En voici un extrait :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Text to Speech Generator</title> <link rel="stylesheet" href="style.css" /> <script src="script.js" defer></script> </head> <body> <h1 class="title">Text to Speech</h1> <div class="container"> <textarea name="text" class="text" placeholder="Type Text Here..." ></textarea> <div class="buttons"> <button class="speak-btn">Speak Text</button> <button class="stop-btn">Stop</button> </div> </div> <div class="footer"> <p>Made with ❤️ by Abhishek Gurjar</p> </div> </body> </html>
CSS
Le fichier styles.css stylise le générateur de synthèse vocale, offrant une mise en page claire et conviviale. Voici quelques styles clés :
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: white; } .title { text-align: center; font-size: 40px; margin: 20px; padding: 10px; } .container { margin: 20px; padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .text { background-color: rgb(242, 241, 241); color: black; width: 600px; height: 400px; margin: 10px; padding: 5px; border: 1px solid rgba(0, 0, 0, 0.51); display: block; border-radius: 10px; } .buttons { display: flex; } .speak-btn, .stop-btn { width: 200px; height: 40px; margin: 10px; padding: 10px; border: none; color: white; background-color: rgb(63, 63, 255); border-radius: 5px; font-size: 15px; text-align: center; cursor: pointer; } .stop-btn { background-color: rgb(255, 63, 63); } .footer { margin: 50px; text-align: center; }
Javascript
Le fichier script.js gère la logique de synthèse vocale, convertissant le texte saisi en parole et gérant la fonctionnalité d'arrêt. En voici un extrait :
document.addEventListener('DOMContentLoaded', function() { const textEl = document.querySelector(".text"); const speakEl = document.querySelector(".speak-btn"); const stopEl = document.querySelector(".stop-btn"); speakEl.addEventListener('click', function() { speakText(textEl.value); }); stopEl.addEventListener('click', function() { stopSpeaking(); }); function speakText(text) { window.speechSynthesis.cancel(); const utterance = new SpeechSynthesisUtterance(text); window.speechSynthesis.speak(utterance); } function stopSpeaking() { window.speechSynthesis.cancel(); } });
Démo en direct
Vous pouvez consulter la démo en direct du générateur de synthèse vocale ici.
Conclusion
Construire ce générateur de synthèse vocale a été une expérience agréable et éducative qui a approfondi ma compréhension de JavaScript, en particulier dans la création d'applications Web interactives à l'aide de l'API Web Speech. J'espère que ce projet vous incitera à explorer les possibilités du développement Web. Bon codage !
Crédits
Ce projet a été développé dans le cadre de mon parcours visant à améliorer mes compétences en développement Web, en me concentrant sur les intégrations JavaScript et API.
Auteur
-
Abhishek Gurjar
- Profil GitHub
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques

Faire votre première transition Svelte personnalisée

Téléchargement de fichiers avec Multer dans Node.js et Express
