1637319720
Convertir du texte en parole en HTML CSS & JavaScript
dans cet article, vous apprendrez à créer un convertisseur de texte en parole en HTML CSS & JavaScript
Text To Speech (TTS) est une technologie qui convertit votre texte en son vocal. Dans ce projet (Text to Speech App), vous pouvez convertir votre texte en parole avec différentes voix. L'option Pause et reprise est également disponible si la longueur de votre texte est supérieure à 80.
Convertir du texte en parole en JavaScript [Code source]
Pour créer cette application Text To Speech (TTS). Tout d'abord, vous devez créer trois fichiers : des fichiers HTML, CSS et JavaScript. Après avoir créé ces fichiers, collez simplement les codes donnés dans votre fichier.
Tout d'abord, créez un fichier HTML avec le nom index.html et collez les codes donnés dans votre fichier HTML. N'oubliez pas que vous devez créer un fichier avec l'extension .html.
<!DOCTYPE html>
<!-- Coding By Codequs - youtube.com/codequs -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Text To Speech in JavaScript | Codequs</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<header>Text To Speech</header>
<form action="#">
<div class="row">
<label>Enter Text</label>
<textarea></textarea>
</div>
<div class="row">
<label>Select Voice</label>
<div class="outer">
<select></select>
</div>
</div>
<button>Convert To Speech</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
Deuxièmement, créez un fichier CSS avec le nom style.css et collez les codes donnés dans votre fichier CSS. N'oubliez pas que vous devez créer un fichier avec l'extension .css.
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #5256AD;
}
::selection{
color: #fff;
background: #5256AD;
}
.wrapper{
width: 370px;
padding: 25px 30px;
border-radius: 7px;
background: #fff;
box-shadow: 7px 7px 20px rgba(0,0,0,0.05);
}
.wrapper header{
font-size: 28px;
font-weight: 500;
text-align: center;
}
.wrapper form{
margin: 35px 0 20px;
}
form .row{
display: flex;
margin-bottom: 20px;
flex-direction: column;
}
form .row label{
font-size: 18px;
margin-bottom: 5px;
}
form .row:nth-child(2) label{
font-size: 17px;
}
form :where(textarea, select, button){
outline: none;
width: 100%;
height: 100%;
border: none;
border-radius: 5px;
}
form .row textarea{
resize: none;
height: 110px;
font-size: 15px;
padding: 8px 10px;
border: 1px solid #999;
}
form .row textarea::-webkit-scrollbar{
width: 0px;
}
form .row .outer{
height: 47px;
display: flex;
padding: 0 10px;
align-items: center;
border-radius: 5px;
justify-content: center;
border: 1px solid #999;
}
form .row select{
font-size: 14px;
background: none;
}
form .row select::-webkit-scrollbar{
width: 8px;
}
form .row select::-webkit-scrollbar-track{
background: #fff;
}
form .row select::-webkit-scrollbar-thumb{
background: #888;
border-radius: 8px;
border-right: 2px solid #ffffff;
}
form button{
height: 52px;
color: #fff;
font-size: 17px;
cursor: pointer;
margin-top: 10px;
background: #675AFE;
transition: 0.3s ease;
}
form button:hover{
background: #4534fe;
}
@media(max-width: 400px){
.wrapper{
max-width: 345px;
width: 100%;
}
}
Enfin, créez un fichier JavaScript avec le nom script.js et collez les codes donnés dans votre fichier JavaScript. N'oubliez pas que vous devez créer un fichier .js.
const textarea = document.querySelector("textarea"),
voiceList = document.querySelector("select"),
speechBtn = document.querySelector("button");
let synth = speechSynthesis,
isSpeaking = true;
voices();
function voices(){
for(let voice of synth.getVoices()){
let selected = voice.name === "Google US English" ? "selected" : "";
let option = `<option value="${voice.name}" ${selected}>${voice.name} (${voice.lang})</option>`;
voiceList.insertAdjacentHTML("beforeend", option);
}
}
synth.addEventListener("voiceschanged", voices);
function textToSpeech(text){
let utterance = new SpeechSynthesisUtterance(text);
for(let voice of synth.getVoices()){
if(voice.name === voiceList.value){
utterance.voice = voice;
}
}
synth.speak(utterance);
}
speechBtn.addEventListener("click", e =>{
e.preventDefault();
if(textarea.value !== ""){
if(!synth.speaking){
textToSpeech(textarea.value);
}
if(textarea.value.length > 80){
setInterval(()=>{
if(!synth.speaking && !isSpeaking){
isSpeaking = true;
speechBtn.innerText = "Convert To Speech";
}else{
}
}, 500);
if(isSpeaking){
synth.resume();
isSpeaking = false;
speechBtn.innerText = "Pause Speech";
}else{
synth.pause();
isSpeaking = true;
speechBtn.innerText = "Resume Speech";
}
}else{
speechBtn.innerText = "Convert To Speech";
}
}
});Ça y est, vous avez maintenant créé avec succès l'application Text to Speech en HTML CSS & JavaScript.
What is GEEK
Buddha Community
1628189100
How to Image Uploader with Preview || Html CSS JavaScript
Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding
1677108125
Creating a Responsive Blog with HTML, CSS, and JavaScript
Are you looking to build a professional-looking blog with HTML, CSS, and JavaScript? In this video
tutorial, we'll walk you through the process of designing and developing a blog from scratch, step-by-step.
From creating the layout of your blog with HTML and CSS to adding interactivity and functionality with JavaScript,
we'll cover everything you need to know to create a fully functional blog. Whether you're a blogger,
web developer, or simply looking to learn new skills, this tutorial is for you!
We'll also provide some tips and tricks along the way to help you optimize your blog for search engines, improve your website's accessibility, and enhance the user experience.
🔔 Subscribe for more!
https://www.youtube.com/channel/UCHI9Mo7HCSlqum1UMP2APFQ
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🔗 Source code
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
☝ Start developing the project (base files + images)
- Click on the UpFiles link
- Click the green button (code)
- Click Download ZIP
- Extract the project to the desired location
📂Assets
Icons: https://boxicon.com/
Fonts: https://fonts.google.com/
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🔥 Follow me!
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tags:
#responsiveportfolio #portfoliohtmlcssjs #webmonster #html #css #javascript #webdesign #website #react #blog, #HTML #CSS #JavaScript #web_development #responsive_design #accessibility #user_experience #tutorial.
So, if you're ready to start building your own blog, this video is the perfect place to start. Be sure to like this video and subscribe to our channel for more web development tutorials and tips!
Link of The Video :
https://youtu.be/BqgWIel4uuU
1650870267
Navigating Between DOM Nodes in JavaScript
In the previous chapters you've learnt how to select individual elements on a web page. But there are many occasions where you need to access a child, parent or ancestor element. See the JavaScript DOM nodes chapter to understand the logical relationships between the nodes in a DOM tree.
DOM node provides several properties and methods that allow you to navigate or traverse through the tree structure of the DOM and make changes very easily. In the following section we will learn how to navigate up, down, and sideways in the DOM tree using JavaScript.
Accessing the Child Nodes
You can use the firstChild and lastChild properties of the DOM node to access the first and last direct child node of a node, respectively. If the node doesn't have any child element, it returns null.
Example
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p>
</div>
<script>
var main = document.getElementById("main");
console.log(main.firstChild.nodeName); // Prints: #text
var hint = document.getElementById("hint");
console.log(hint.firstChild.nodeName); // Prints: SPAN
</script>Note: The
nodeNameis a read-only property that returns the name of the current node as a string. For example, it returns the tag name for element node,#textfor text node,#commentfor comment node,#documentfor document node, and so on.
If you notice the above example, the nodeName of the first-child node of the main DIV element returns #text instead of H1. Because, whitespace such as spaces, tabs, newlines, etc. are valid characters and they form #text nodes and become a part of the DOM tree. Therefore, since the <div> tag contains a newline before the <h1> tag, so it will create a #text node.
To avoid the issue with firstChild and lastChild returning #text or #comment nodes, you could alternatively use the firstElementChild and lastElementChild properties to return only the first and last element node, respectively. But, it will not work in IE 9 and earlier.
Example
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p>
</div>
<script>
var main = document.getElementById("main");
alert(main.firstElementChild.nodeName); // Outputs: H1
main.firstElementChild.style.color = "red";
var hint = document.getElementById("hint");
alert(hint.firstElementChild.nodeName); // Outputs: SPAN
hint.firstElementChild.style.color = "blue";
</script>Similarly, you can use the childNodes property to access all child nodes of a given element, where the first child node is assigned index 0. Here's an example:
Example
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p>
</div>
<script>
var main = document.getElementById("main");
// First check that the element has child nodes
if(main.hasChildNodes()) {
var nodes = main.childNodes;
// Loop through node list and display node name
for(var i = 0; i < nodes.length; i++) {
alert(nodes[i].nodeName);
}
}
</script>The childNodes returns all child nodes, including non-element nodes like text and comment nodes. To get a collection of only elements, use children property instead.
Example
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p>
</div>
<script>
var main = document.getElementById("main");
// First check that the element has child nodes
if(main.hasChildNodes()) {
var nodes = main.children;
// Loop through node list and display node name
for(var i = 0; i < nodes.length; i++) {
alert(nodes[i].nodeName);
}
}
</script>
1671267560
Personal Portfolio Website Using Html Css and Javascript
In this tutorial we are going to make a personal Portfolio in this website there are six section Home, About, Services,Portfolio , Skills, and Contact the main features of this is dark/light mode function
∎ Download Source codes - https://www.thesimplifieddev.com/make-a-personal-portfolio-website
Features : -
- Fully Responsive
- Dark mode/light mode
- Browser compatibility
- Social Media Icon
- and many more
1630506330
Product landing page using HTML CSS & JavaScript | web design
Knowledge
This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform those powerful animations we use the GSAP a JavaScript animation library for work done.
In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.
Don't forget to join the channel for more videos like this. Code Savvy
📁 Assets
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/
Outline ⏱
0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations
Click to Watch Full tutorial on YOUTUBE