|

Convierta texto a voz usando Web Speech API en JavaScript

PorTareas Wiki
FacebookTwitterPinterestEmailWhatsAppReddit

Los datos de voz se incorporan a las aplicaciones en línea utilizando Web Speech API . En este artículo, crearemos una página web simple que implemente la conversión de texto a voz mediante Web Speech API . 

Por el bien de esta demostración, creemos un nuevo directorio y creemos dos nuevos archivos: index.htmlytext-to-speech.js

El archivo HTML

En el archivo HTML, configuremos los siguientes elementos:

  • Un selectmenú sin opciones. selectUsando JavaScript, llenaremos el menú vacío con una lista de posibles voces
  • Controles deslizantes de rango para volumen, tono y velocidad
  • A textareapara escribir
  • Botones de control para el discurso

En esta demostración, usaremos Bootstrap 5 para el estilo. Aquí hay algo de código:

				
					<html lang="en">

<head>
    <link data-optimized="1" href="https://tareaswiki.com/wp-content/litespeed/css/d8b240d7d4f6b2e9db3b3c40bd2e6d12.css?ver=e6d12" rel="stylesheet" />
    <title>Text to Speech</title>

    <style>.card{padding:1rem 1.5rem;border-radius:7px;box-shadow:rgb(45 46 46/35%) 0px 4px 32px 0px,rgb(45 46 46/8%) 0px 4px 16px 0px,rgb(45 46 46/10%) 0px 0px 4px 0px}</style>
</head>

<body data-rsssl=1 class="container mt-5 bg-light">
    <div class="card">
        <h2><span class="ez-toc-section" id="Convert_Text_to_Speech"></span>Convert Text to Speech<span class="ez-toc-section-end"></span></h2>
        <h5><span class="ez-toc-section" id="Listen_to_those_words"></span>Listen to those words!<span class="ez-toc-section-end"></span></h5>
        <p class="lead mt-4">Select Voice</p>

        <!-- Select Menu for Voice -->
        <select id="voices" class="form-select"></select>

        <!-- Range Slliders for Volume, Rate & Pitch -->
        <div class="d-flex mt-4">
            <div>
                <p class="lead">Volume</p>
                <input type="range" min="0" max="1" value="1" step="0.1" id="volume" />
                <span id="volume-label" class="ms-2">1</span>
            </div>
            <div class="mx-5">
                <p class="lead">Rate</p>
                <input type="range" min="0.1" max="10" value="1" id="rate" step="0.1" />
                <span id="rate-label" class="ms-2">1</span>
            </div>
            <div>
                <p class="lead">Pitch</p>
                <input type="range" min="0" max="1" value="1" step="0.1" id="pitch" />
                <span id="pitch-label" class="ms-2">1</span>
            </div>
        </div>

        <!-- Text Area  for the User to Type -->
        <textarea class="form-control mt-5" cols="30" rows="10" placeholder="Type here..."></textarea>

        <!-- Control Buttons -->
        <div class="mb-5">
            <button id="start" class="btn btn-success mt-5 me-3">Start</button>
            <button id="pause" class="btn btn-warning mt-5 me-3">Pause</button>
            <button id="resume" class="btn btn-info mt-5 me-3">Resume</button>
            <button id="cancel" class="btn btn-danger mt-5 me-3">Cancel</button>
        </div>
    </div>
<script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script></body>
<script data-optimized="1" src="https://tareaswiki.com/wp-content/litespeed/js/127d8b74d45a2fcac1cc72d0d0229090.js?ver=29090"></script>

</html>

Así es como se verá en el navegador:

El archivo JavaScript

En el archivo JavaScript, vamos a utilizar principalmente tres interfaces: SpeechSynthesis, window.speechSynthesisy SpeechSynthesisUtterance. Entonces, entendámoslos brevemente.

Interfaz JavaScript

Esta es la interfaz principal para el servicio de síntesis de voz, que controla la síntesis o producción de voz basada en la entrada de texto. Esta interfaz se utiliza para iniciar, detener, pausar y reiniciar el habla, así como para acceder a las voces admitidas por el dispositivo.

Los métodos proporcionados en esta interfaz son los siguientes:

  • speak(): Para agregar el enunciado (objeto de SpeechSynthesisUtterance) en la cola, que se pronunciará cuando no haya ningún enunciado pendiente antes, esta es la función que usaremos para
  • pause(): Para pausar el discurso actual en curso
  • resume(): para reanudar el discurso en pausa
  • cancel(): Para cancelar todos los enunciados pendientes o el discurso creado, que aún no se reproducen
  • getVoices(): para obtener la lista de todas las voces admitidas que admite el dispositivo

Propiedad JavaScript

window.speechSynthesis

El speak()método se llama en la interfaz del controlador de síntesis de voz, a la que hace referencia esta propiedad del windowobjeto JavaScript.

Entenderemos esto más cuando saltemos al código.

Publicaciones Similares

Curso de Introducción al Desarrollo Web HTML y CSS
|

Curso de Introducción al Desarrollo Web HTML y CSS

PorTareas Wiki

FacebookTwitterPinterestEmailWhatsAppReddit Aprende a crear tus propias páginas web profesionales adaptables a distintos dispositivos de la mano de la Universidad de Alicante. A través de este curso gratuito, aprenderás sobre diseño web de forma profesional. En la primera parte del curso, aprenderá cómo nació la Web y cómo se convirtió en lo que es hoy. Podrá…

7 sitios web que todo desarrollador debería seguir

7 sitios web que todo desarrollador debería seguir

PorTareas Wiki

FacebookTwitterPinterestEmailWhatsAppReddit Una vez que empiece a aprender a programar, se le abrirá un mundo completamente nuevo. No importa cuánto tiempo haya estado haciendo, la industria se está desarrollando tan rápido que siempre hay algo nuevo que aprender. Puede ser abrumador al principio, pero una vez que acepto el hecho de que menos del 1% de…

Flutter está a punto de conquistar la Web

Flutter está a punto de conquistar la Web

PorTareas Wiki

FacebookTwitterPinterestEmailWhatsAppReddit El marco multiplataforma ofrece la experiencia de desarrollo web más convincente Si ha oído hablar de Flutter , es probable que haya oído hablar de él en el contexto del desarrollo de aplicaciones telefónicas. Entonces, ¿cómo diablos se aplica a los sitios web? Bueno, con una página web HTML normal, se trata la página…

Cómo aprender a Programar

Cómo aprender a Programar

PorTareas Wiki

FacebookTwitterPinterestEmailWhatsAppReddit 10 consejos para mejorar tus habilidades de Programación El desarrollo de software es una habilidad increíblemente gratificante que puede ser extremadamente valiosa. Es amigable con el trabajo remoto, y no importa dónde viva en el mundo, si obtiene lo suficientemente bueno, puede calificar para un excelente trabajo remunerado que oscila entre $ 100k / año…

¿Las matemáticas son útiles en la programación?
|

¿Las matemáticas son útiles en la programación?

PorTareas Wiki

FacebookTwitterPinterestEmailWhatsAppReddit He aquí por qué debería dejar de quejarse de la cantidad de matemáticas requeridas en las carreras de ciencia de datos e ingeniería informática. “¿No era esto un curso de TI? ¿Por qué los maestros nos llenan de proyectos de matemáticas? ¡No tiene ningún sentido!” Lo que no te están diciendo Además de escribir y estudiar…

Introducción a la programación de Python
|

Introducción a la programación de Python

PorTareas Wiki

FacebookTwitterPinterestEmailWhatsAppReddit Curso Gratuito de Python Si necesita comenzar rápidamente a aprender Python por primera vez, este es el curso para ti.   Sorprendentemente, el propio profesor es un estudiante de 17 años, y este curso de Python ha atraído a más de 130.000 estudiantes de Udemy para inscribirse, entre los que se imparten muchos cursos. Este…