diff --git a/Hosting/links.json b/Hosting/links.json index 3f6a10f..c2ba547 100644 --- a/Hosting/links.json +++ b/Hosting/links.json @@ -1,4 +1,18 @@ [ + { + "category": "TypeScript", + "title": "Web Speech API Practic", + "date": "2024.11.14", + "url": "../TypeScript/WebSpeech.html", + "comment": "
" + }, + { + "category": "SVG", + "title": "Cybertruck", + "date": "2024.11.06", + "url": "../SVG/cybertruck.html", + "comment": "" + }, { "category": "SVG", "title": "Initial Practice : Shape Color Changer", diff --git a/README.md b/README.md index 7a5aedf..de2e713 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,7 @@ Separate web-related codes into this repository because [[MyPractice]](https://g ## Scripting Languages ### [TypeScript](/TypeScript/) +- [Web Speech API Practice (2024.11.14)](/TypeScript/README.md#web-speech-api-practice-20241114) - [`helloWorld("console.log")` (2024.05.23)](/TypeScript/README.md#helloworldconsolelog-20240523) - [Import a JSON file (2024.01.30)](/TypeScript/README.md#import-a-json-file-20240130) - [Touch Event Practice (2024.01.16)](/TypeScript/README.md#touch-event-practice-20240116) diff --git a/TypeScript/Images/WebSpeechAPIPractice.PNG b/TypeScript/Images/WebSpeechAPIPractice.PNG new file mode 100644 index 0000000..f0e19b2 Binary files /dev/null and b/TypeScript/Images/WebSpeechAPIPractice.PNG differ diff --git a/TypeScript/README.md b/TypeScript/README.md index 2d5ef3d..af79b24 100644 --- a/TypeScript/README.md +++ b/TypeScript/README.md @@ -5,6 +5,7 @@ I heard that no one ignores TypeScript users. However, it was enough for me to b ### \ +- [Web Speech API Practice (2024.11.14)](#web-speech-api-practice-20241114) - [`helloWorld("console.log")` (2024.05.23)](#helloworldconsolelog-20240523) - [Import a JSON file (2024.01.30)](#import-a-json-file-20240130) - [Touch Event Practice (2024.01.16)](#touch-event-practice-20240116) @@ -12,6 +13,107 @@ I heard that no one ignores TypeScript users. However, it was enough for me to b - [Hello World (2023.02.28)](#hello-world-20230228) +## [Web Speech API Practice (2024.11.14)](#list) + +- **Text-to-Speech(TTS)** conversion of Korean language input utilizing *Web Speech API* + - As a feature natively supported by most browsers, it requires no additional installation or importing, making it usable even in offline environments such as airplane mode + + ![Web Speech API Practice](./Images/WebSpeechAPIPractice.PNG) + +- Reference + - [MDN Web Docs](https://developer.mozilla.org/en-US/docs/) > [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) +- Code +
+ WebSpeech.html + + ```html + + + + + + + + + + Web Speech API Practice + + + + +

한글 TTS 예제

+ + + + + + ``` +
+
+ WebSpeech.ts + + ```ts + /** + * TextToSpeech class for converting text to speech using Web Speech API + */ + class TextToSpeech { + private synth: SpeechSynthesis; + private utterance: SpeechSynthesisUtterance; + + /** + * Initializes the TextToSpeech instance + */ + constructor() { + this.synth = window.speechSynthesis; + this.utterance = new SpeechSynthesisUtterance(); + } + + /** + * Converts the given text to speech + * @param text - The text to be spoken + */ + speak(text: string): void { + // Check if speech is already in progress + if (this.synth.speaking) { + console.error('Speech is already in progress.'); + return; + } + + // Configure the utterance + this.utterance.text = text; + this.utterance.lang = 'ko-KR'; // Set language to Korean + this.utterance.rate = 1; // Set speech rate (1 is normal speed) + this.utterance.pitch = 1; // Set pitch (1 is normal pitch) + + // Start speaking + this.synth.speak(this.utterance); + } + } + ``` + ```ts + // Wait for the DOM to be fully loaded before executing + document.addEventListener('DOMContentLoaded', () => { + // Get references to DOM elements + const textInput = document.getElementById('textInput') as HTMLInputElement; + const speakButton = document.getElementById('speakButton') as HTMLButtonElement; + + // Create an instance of TextToSpeech + const tts = new TextToSpeech(); + + // Add click event listener to the speak button + speakButton.addEventListener('click', () => { + const text = textInput.value.trim(); + if (text) { + tts.speak(text); // Speak the input text + } else { + alert('Please enter some text.'); // Alert if no text is entered + } + }); + }); + ``` +
+ + ## [`helloWorld("console.log")` (2024.05.23)](#list) - Just for fun ☞ [related meme](https://www.reddit.com/r/ProgrammerHumor/comments/13u2mfm/_/) diff --git a/TypeScript/WebSpeech.html b/TypeScript/WebSpeech.html new file mode 100644 index 0000000..7acd944 --- /dev/null +++ b/TypeScript/WebSpeech.html @@ -0,0 +1,20 @@ + + + + + + + + + + Web Speech API Practice + + + + +

한글 TTS 예제

+ + + + + diff --git a/TypeScript/WebSpeech.js b/TypeScript/WebSpeech.js new file mode 100644 index 0000000..27db9be --- /dev/null +++ b/TypeScript/WebSpeech.js @@ -0,0 +1,52 @@ +// Web Speech API Practice +// Author: kimpro82 +// Date: 2024.11.14 +/** + * TextToSpeech class for converting text to speech using Web Speech API + */ +var TextToSpeech = /** @class */ (function () { + /** + * Initializes the TextToSpeech instance + */ + function TextToSpeech() { + this.synth = window.speechSynthesis; + this.utterance = new SpeechSynthesisUtterance(); + } + /** + * Converts the given text to speech + * @param text - The text to be spoken + */ + TextToSpeech.prototype.speak = function (text) { + // Check if speech is already in progress + if (this.synth.speaking) { + console.error('Speech is already in progress.'); + return; + } + // Configure the utterance + this.utterance.text = text; + this.utterance.lang = 'ko-KR'; // Set language to Korean + this.utterance.rate = 1; // Set speech rate (1 is normal speed) + this.utterance.pitch = 1; // Set pitch (1 is normal pitch) + // Start speaking + this.synth.speak(this.utterance); + }; + return TextToSpeech; +}()); +// Wait for the DOM to be fully loaded before executing +document.addEventListener('DOMContentLoaded', function () { + // Get references to DOM elements + var textInput = document.getElementById('textInput'); + var speakButton = document.getElementById('speakButton'); + // Create an instance of TextToSpeech + var tts = new TextToSpeech(); + // Add click event listener to the speak button + speakButton.addEventListener('click', function () { + var text = textInput.value.trim(); + if (text) { + tts.speak(text); // Speak the input text + } + else { + alert('Please enter some text.'); // Alert if no text is entered + } + }); +}); diff --git a/TypeScript/WebSpeech.ts b/TypeScript/WebSpeech.ts new file mode 100644 index 0000000..1f47d42 --- /dev/null +++ b/TypeScript/WebSpeech.ts @@ -0,0 +1,60 @@ +// Web Speech API Practice +// Author: kimpro82 +// Date: 2024.11.14 + +/** + * TextToSpeech class for converting text to speech using Web Speech API + */ +class TextToSpeech { + private synth: SpeechSynthesis; + private utterance: SpeechSynthesisUtterance; + + /** + * Initializes the TextToSpeech instance + */ + constructor() { + this.synth = window.speechSynthesis; + this.utterance = new SpeechSynthesisUtterance(); + } + + /** + * Converts the given text to speech + * @param text - The text to be spoken + */ + speak(text: string): void { + // Check if speech is already in progress + if (this.synth.speaking) { + console.error('Speech is already in progress.'); + return; + } + + // Configure the utterance + this.utterance.text = text; + this.utterance.lang = 'ko-KR'; // Set language to Korean + this.utterance.rate = 1; // Set speech rate (1 is normal speed) + this.utterance.pitch = 1; // Set pitch (1 is normal pitch) + + // Start speaking + this.synth.speak(this.utterance); + } +} + +// Wait for the DOM to be fully loaded before executing +document.addEventListener('DOMContentLoaded', () => { + // Get references to DOM elements + const textInput = document.getElementById('textInput') as HTMLInputElement; + const speakButton = document.getElementById('speakButton') as HTMLButtonElement; + + // Create an instance of TextToSpeech + const tts = new TextToSpeech(); + + // Add click event listener to the speak button + speakButton.addEventListener('click', () => { + const text = textInput.value.trim(); + if (text) { + tts.speak(text); // Speak the input text + } else { + alert('Please enter some text.'); // Alert if no text is entered + } + }); +});