{"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\/fr\/personnalisation-responsivevoice-code\/","title":{"rendered":"Personnalisation du code ResponsiveVoice"},"content":{"rendered":"

ResponsiveVoice est un outil gratuit et populaire de l'API Speech Text qui permet aux utilisateurs d'ajouter du texte de lecture, des mots et des extraits \u00e0 leur site Web. Mais comment personnaliser ces codes pour qu'ils fonctionnent comme vous le souhaitez ? <\/p>\n\n\n\n

ResponsiveVoice, bien qu'il soit gratuit, a un plan payant qui le prend en charge. Le gros probl\u00e8me est que les utilisateurs gratuits n'attirent pas l'attention. Aucune documentation de l'API ne mettra \u00e0 jour ce que le service fournit. <\/p>\n\n\n\n

Lorsque j'essayais d'utiliser et de modifier divers codes, je n'arrivais pas \u00e0 le faire fonctionner comme je le souhaitais. Heureusement avec l'aide de l'IA, apr\u00e8s plusieurs heures, j'ai r\u00e9ussi \u00e0 \u00e9diter comme je veux avec JavaScript. <\/p>\n\n\n\n

Comment ajouter ResponsiveVoice \u00e0 votre site Web<\/h2>\n\n\n\n

Pour ajouter ResponsiveVoice \u00e0 votre site Web, vous devez cr\u00e9er un compte et g\u00e9n\u00e9rer une cl\u00e9 API pour votre site Web. Ensuite, placez simplement le script suivant dans l'en-t\u00eate de votre projet. <\/p>\n\n\n\n

<script src=\"https:\/\/code.responsivevoice.org\/responsivevoice.js?key=YOUR_UNIQUE_KEY\"><\/script><\/code><\/pre>\n\n\n\n
Apr\u00e8s avoir ajout\u00e9 ce script, vous pouvez cr\u00e9er un autre javascript pour le faire fonctionner sur votre site. Vous pouvez appeler l'API pour prononcer le texte de votre choix, en utilisant des cha\u00eenes, des variables ou des textes pr\u00e9d\u00e9termin\u00e9s. <\/p>\n\n\n\n
Il est possible de faire en sorte que le script prononce des balises sp\u00e9cifiques, du texte s\u00e9lectionn\u00e9 ou m\u00eame la page enti\u00e8re. Pour cela, il vous suffit de cr\u00e9er le javascript et d'appeler le responsivevoice avec le code suivant : <\/p>\n\n\n\n
responsiveVoice.speak(\"text-or-var\");<\/code><\/pre>\n\n\n\n
Ajout de param\u00e8tres dans responsiveVoice.Speak<\/h2>\n\n\n\n
Pour personnaliser le code ResponsiveVoice, vous pouvez utiliser les options de configuration disponibles dans la documentation ResponsiveVoice. Certaines des options les plus courantes incluent\u00a0:<\/p>\n\n\n\n
    \n
  1. voix<\/code>: permet de sp\u00e9cifier la voix qui sera utilis\u00e9e pour lire le texte (la langue). Vous pouvez choisir parmi les voix disponibles pour la langue s\u00e9lectionn\u00e9e.<\/li>\n\n\n\n
  2. fr\u00e9quence<\/code>: Vous permet de contr\u00f4ler le d\u00e9bit de parole. Des valeurs plus \u00e9lev\u00e9es entra\u00eeneront une parole plus rapide, tandis que des valeurs inf\u00e9rieures entra\u00eeneront une parole plus lente.<\/li>\n\n\n\n
  3. terrain<\/code>: Vous permet de contr\u00f4ler la hauteur de la parole. Des valeurs plus \u00e9lev\u00e9es entra\u00eeneront un discours plus aigu, tandis que des valeurs inf\u00e9rieures entra\u00eeneront un discours plus grave.<\/li>\n\n\n\n
  4. volume<\/code>: Vous permet de contr\u00f4ler le volume d'\u00e9locution. Des valeurs plus \u00e9lev\u00e9es se traduiront par un discours plus fort, tandis que des valeurs inf\u00e9rieures se traduiront par un discours plus silencieux.<\/li>\n<\/ol>\n\n\n\n
    Pour utiliser ces options, ajoutez-les simplement en tant que param\u00e8tres lors de l'appel de la fonction responsiveVoice.speak()<\/code>.<\/p>\n\n\n
    \n
    \"-\"<\/figure><\/div>\n\n\n
    Ajout d'un bouton pour prononcer un \u00e9l\u00e9ment HTML<\/h2>\n\n\n\n
    Si vous souhaitez prononcer le contenu d'un tag, vous pouvez le faire avec le javascript ci-dessous. Dans ce cas, le script ajoute un bouton sur chaque
     du site, supprime certaines balises HTML avec regex (dans mon cas et autres) et prononcer le contenu de la balise
     . <\/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
    Le code ci-dessus commence par ajouter les boutons et obtenir les balises
     , puis configure un \u00e9v\u00e9nement pour que si le bouton est cliqu\u00e9, il obtienne le contenu de la balise
     avec HTML, supprimera en utilisant "remplacer" les balises et d'autres balises, y compris le contenu du bouton lui-m\u00eame. <\/p>\n\n\n\n
    Ensuite, en utilisant la variable de texte propre, il effectue la prononciation de la langue japonaise \u00e0 une vitesse de 0,8. Le code \u00e0 la fin est n\u00e9cessaire pour cr\u00e9er les boutons. <\/p>\n\n\n\n
    Les codes de cet article peuvent \u00eatre ajout\u00e9s entre \u00e0 l\u2019int\u00e9rieur de la balise body ou head de votre site Web. <\/pre>\n\n\n\n
    Lire le contenu de l'\u00e9cran s\u00e9lectionn\u00e9<\/h2>\n\n\n\n
    Nativement, ResponsiveVoice a une option pour activer la lecture du contenu de la page s\u00e9lectionn\u00e9e. Vous pouvez utiliser votre propre Javascript et le personnaliser. Dans mon cas je n'ai fait prononcer que des lettres japonaises. <\/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
      J'esp\u00e8re que ces codes vous aideront \u00e0 r\u00e9soudre votre probl\u00e8me avec ResponsiveVoice. Si vous avez besoin de personnaliser davantage le code, demandez simplement de l'aide \u00e0 une intelligence artificielle. <\/p>","protected":false},"excerpt":{"rendered":"
    ResponsiveVoice est un outil gratuit et populaire de l'API Speech Text qui permet aux utilisateurs de<\/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\/fr\/wp-json\/wp\/v2\/posts\/3951"}],"collection":[{"href":"https:\/\/kevinbk.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kevinbk.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/fr\/wp-json\/wp\/v2\/comments?post=3951"}],"version-history":[{"count":4,"href":"https:\/\/kevinbk.com\/fr\/wp-json\/wp\/v2\/posts\/3951\/revisions"}],"predecessor-version":[{"id":3956,"href":"https:\/\/kevinbk.com\/fr\/wp-json\/wp\/v2\/posts\/3951\/revisions\/3956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/fr\/wp-json\/wp\/v2\/media\/3832"}],"wp:attachment":[{"href":"https:\/\/kevinbk.com\/fr\/wp-json\/wp\/v2\/media?parent=3951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kevinbk.com\/fr\/wp-json\/wp\/v2\/categories?post=3951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}