{"id":3951,"date":"2022-12-29T18:21:23","date_gmt":"2022-12-29T18:21:23","guid":{"rendered":"http:\/\/kevinbk.com\/?p=3951"},"modified":"2022-12-29T18:37:30","modified_gmt":"2022-12-29T18:37:30","slug":"customizando-codigo-do-responsivevoice","status":"publish","type":"post","link":"https:\/\/kevinbk.com\/es\/personalizar-responsivevoice-code\/","title":{"rendered":"Personalizaci\u00f3n del c\u00f3digo ResponsiveVoice"},"content":{"rendered":"

ResponsiveVoice es una popular herramienta API de texto de voz gratuita que permite a los usuarios agregar texto de lectura, palabras y fragmentos a su sitio web. Pero, \u00bfc\u00f3mo personalizar estos c\u00f3digos para que funcionen de la manera que desea? <\/p>\n\n\n\n

ResponsiveVoice a pesar de ser gratuito, tiene un plan pago que lo respalda. El gran problema es que los usuarios gratuitos no reciben atenci\u00f3n. Ninguna documentaci\u00f3n de la API actualizar\u00e1 lo que proporciona el servicio. <\/p>\n\n\n\n

Al tratar de usar y editar varios c\u00f3digos, no pude hacer que funcionara como yo quer\u00eda. Afortunadamente, con la ayuda de AI, despu\u00e9s de varias horas, logr\u00e9 editar de la manera que quer\u00eda con JavaScript. <\/p>\n\n\n\n

C\u00f3mo agregar ResponsiveVoice a su sitio web<\/h2>\n\n\n\n

Para agregar ResponsiveVoice a su sitio web, debe crear una cuenta y generar una clave API para su sitio web. Luego simplemente coloque el siguiente Script en el encabezado de su proyecto. <\/p>\n\n\n\n

<script src=\"https:\/\/code.responsivevoice.org\/responsivevoice.js?key=YOUR_UNIQUE_KEY\"><\/script><\/code><\/pre>\n\n\n\n
Despu\u00e9s de agregar este script, puede crear otro javascript para que funcione en su sitio. Puede llamar a la API para pronunciar el texto de su elecci\u00f3n, utilizando cadenas, variables o textos predeterminados. <\/p>\n\n\n\n
Es posible hacer que el Script pronuncie etiquetas espec\u00edficas, texto seleccionado o incluso toda la p\u00e1gina. Para eso, solo necesita crear el javascript y llamar a responsivevoice con el siguiente c\u00f3digo: <\/p>\n\n\n\n
responsiveVoice.speak(\"text-or-var\");<\/code><\/pre>\n\n\n\n
Agregar par\u00e1metros en responsiveVoice.Speak<\/h2>\n\n\n\n
Para personalizar el c\u00f3digo de ResponsiveVoice, puede usar las opciones de configuraci\u00f3n disponibles en la documentaci\u00f3n de ResponsiveVoice. Algunas de las opciones m\u00e1s comunes incluyen:<\/p>\n\n\n\n
    \n
  1. voz<\/code>: Le permite especificar la voz que se utilizar\u00e1 para reproducir el texto (el idioma). Puede elegir entre las voces disponibles para el idioma seleccionado.<\/li>\n\n\n\n
  2. Velocidad<\/code>: Le permite controlar la velocidad del habla. Los valores m\u00e1s altos dar\u00e1n como resultado un habla m\u00e1s r\u00e1pida, mientras que los valores m\u00e1s bajos dar\u00e1n como resultado un habla m\u00e1s lenta.<\/li>\n\n\n\n
  3. tono<\/code>: Le permite controlar el tono del discurso. Los valores m\u00e1s altos dar\u00e1n como resultado un tono de voz m\u00e1s alto, mientras que los valores m\u00e1s bajos dar\u00e1n como resultado un tono de voz m\u00e1s bajo.<\/li>\n\n\n\n
  4. volumen<\/code>: Le permite controlar el volumen de voz. Los valores m\u00e1s altos dar\u00e1n como resultado un habla m\u00e1s fuerte, mientras que los valores m\u00e1s bajos dar\u00e1n como resultado un habla m\u00e1s baja.<\/li>\n<\/ol>\n\n\n\n
    Para usar estas opciones, simplemente agr\u00e9guelas como par\u00e1metros al llamar a la funci\u00f3n responsiveVoice.speak()<\/code>.<\/p>\n\n\n
    \n
    \"-\"<\/figure><\/div>\n\n\n
    Agregar bot\u00f3n para pronunciar un elemento HTML<\/h2>\n\n\n\n
    En caso de que desee pronunciar el contenido de una etiqueta, puede hacerlo con javascript a continuaci\u00f3n. En este caso, el Script agrega un bot\u00f3n en cada
     del sitio, elimina algunas etiquetas HTML con expresiones regulares (en mi caso y otros) y pronunciar el contenido de la etiqueta
     . <\/p>\n\n\n\n
    function adicionarBotoesPlay() {\n  \/\/ Obt\u00e9m todas as tags <pre> da p\u00e1gina\n  var tagsPre = document.getElementsByTagName(\"pre\");\n  \/\/ Para cada tag <pre>...\n  for (var i = 0; i < tagsPre.length; i++) {\n    \/\/ Cria um novo bot\u00e3o de play\n    var botaoPlay = document.createElement(\"button\");\n\t\tbotaoPlay.setAttribute(\"class\", \"playbt\");\n    botaoPlay.innerHTML = \"\u25b7\";\n    \/\/ Adiciona o bot\u00e3o de play \u00e0 tag <pre>\n    tagsPre[i].appendChild(botaoPlay);\n    \/\/ Configura o evento de clique do bot\u00e3o para chamar a fun\u00e7\u00e3o de pron\u00fancia do ResponsiveVoice\n    botaoPlay.addEventListener(\"click\", function() { \n      \/\/ Obt\u00e9m o conte\u00fado da tag <pre>\n      \/\/ Obt\u00e9m o elemento HTML que voc\u00ea deseja selecionar\n      var conteudoPre = this.parentNode.innerHTML;\n      \/\/ Substitui todas as tags <rt> e seu conte\u00fado pelo texto vazio\n      var textoSemRt = conteudoPre.replace(\/<rt>([\\s\\S]*?)<\\\/rt>\/g, \"\").replace(\/<button[^>]*>.*?<\\\/button>\/g, \"\");\n\t\t\tvar textoSemHtml = textoSemRt.replace(\/<[^>]*>\/g, \"\");\n      \/\/ Solicita a pron\u00fancia do conte\u00fado sem as tags <rt> pelo ResponsiveVoice Text To Speech\n\t\t\t\/\/ Cria um novo elemento de texto com o texto selecionado\n\t\t\tresponsiveVoice.speak(\" \");\n \u00a0 \u00a0 \u00a0responsiveVoice.speak(textoSemHtml, \"Japanese Female\", {\n\t\t  rate: 0.8,\n  \t\tonend: function() {\n    \/\/ Executa alguma a\u00e7\u00e3o depois que a pron\u00fancia \u00e9 conclu\u00edda\n  }\n});\n    });\n  }\n}\n\/\/ Executa a fun\u00e7\u00e3o quando a p\u00e1gina terminar de carregar\nwindow.addEventListener(\"load\", adicionarBotoesPlay);<\/code><\/pre>\n\n\n\n
    El c\u00f3digo anterior comienza agregando los botones y obteniendo las etiquetas.
     , luego configura un evento para que si se hace clic en el bot\u00f3n, obtenga el contenido de la etiqueta
     junto con HTML, eliminar\u00e1 usando "reemplazar" las etiquetas y otras etiquetas, incluido el contenido del propio bot\u00f3n. <\/p>\n\n\n\n
    Luego, utilizando la variable de texto limpio, realiza la pronunciaci\u00f3n del idioma japon\u00e9s a una velocidad de 0,8. El c\u00f3digo al final es necesario para crear los botones. <\/p>\n\n\n\n
    Los c\u00f3digos de este art\u00edculo se pueden a\u00f1adir entre dentro de la etiqueta principal o del cuerpo de su sitio. <\/pre>\n\n\n\n
    Leer el contenido de la pantalla seleccionada<\/h2>\n\n\n\n
    De forma nativa, ResponsiveVoice tiene una opci\u00f3n para habilitar la lectura del contenido de la p\u00e1gina seleccionada. Puede usar su propio Javascript y personalizarlo. En mi caso solo hice pronunciar letras japonesas. <\/p>\n\n\n\n
    responsiveVoice.setDefaultVoice(\"Japanese Female\");\ndocument.addEventListener(\"mouseup\", function() {\n  \/\/ Obt\u00e9m o texto selecionado pelo usu\u00e1rio\n  var selecao = window.getSelection().toString();\n  \/\/ Verifica se o texto selecionado n\u00e3o est\u00e1 vazio\n  if (selecao) {\n    \/\/ Verifica se o texto selecionado s\u00f3 cont\u00e9m caracteres japoneses\n    var caracteresJaponeses = \/^[\\u3041-\\u3096\\u30A0-\\u30FF\\u4E00-\\u9FFF]+$\/;\n    if (caracteresJaponeses.test(selecao)) {\n      \/\/ Solicita a pron\u00fancia do texto selecionado pelo ResponsiveVoice Text To Speech\n      responsiveVoice.speak(selecao, \"Japanese Female\", {\n        onend: function() {\n          \/\/ Executa alguma a\u00e7\u00e3o depois que a pron\u00fancia \u00e9 conclu\u00edda\n}\n      });\n    }\n  }\n});<\/code><\/pre>\n\n\n\n
      Espero que estos c\u00f3digos te ayuden a resolver tu problema con ResponsiveVoice. Si necesita personalizar a\u00fan m\u00e1s el c\u00f3digo, solo solicite ayuda a una Inteligencia Artificial. <\/p>","protected":false},"excerpt":{"rendered":"
    ResponsiveVoice es una popular herramienta API de texto de voz gratuita que permite a los usuarios<\/p>","protected":false},"author":1,"featured_media":3832,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/kevinbk.com\/wp-content\/uploads\/2022\/11\/javascript.jpg","_links":{"self":[{"href":"https:\/\/kevinbk.com\/es\/wp-json\/wp\/v2\/posts\/3951"}],"collection":[{"href":"https:\/\/kevinbk.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kevinbk.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/es\/wp-json\/wp\/v2\/comments?post=3951"}],"version-history":[{"count":4,"href":"https:\/\/kevinbk.com\/es\/wp-json\/wp\/v2\/posts\/3951\/revisions"}],"predecessor-version":[{"id":3956,"href":"https:\/\/kevinbk.com\/es\/wp-json\/wp\/v2\/posts\/3951\/revisions\/3956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/es\/wp-json\/wp\/v2\/media\/3832"}],"wp:attachment":[{"href":"https:\/\/kevinbk.com\/es\/wp-json\/wp\/v2\/media?parent=3951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kevinbk.com\/es\/wp-json\/wp\/v2\/categories?post=3951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}