{"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\/vi\/tuy-bien-dap-ung-ma-giong-noi\/","title":{"rendered":"T\u00f9y ch\u1ec9nh ResponsiveVoice Code"},"content":{"rendered":"

ResponsiveVoice l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 Speech Text API mi\u1ec5n ph\u00ed ph\u1ed5 bi\u1ebfn cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng th\u00eam v\u0103n b\u1ea3n \u0111\u1ecdc, t\u1eeb v\u00e0 \u0111o\u1ea1n tr\u00edch v\u00e0o trang web c\u1ee7a h\u1ecd. Nh\u01b0ng l\u00e0m c\u00e1ch n\u00e0o \u0111\u1ec3 t\u00f9y ch\u1ec9nh c\u00e1c m\u00e3 n\u00e0y \u0111\u1ec3 th\u1ef1c hi\u1ec7n theo c\u00e1ch b\u1ea1n mu\u1ed1n? <\/p>\n\n\n\n

ResponsiveVoice m\u1eb7c d\u00f9 mi\u1ec5n ph\u00ed nh\u01b0ng c\u00f3 g\u00f3i tr\u1ea3 ph\u00ed h\u1ed7 tr\u1ee3 n\u00f3. V\u1ea5n \u0111\u1ec1 l\u1edbn l\u00e0 ng\u01b0\u1eddi d\u00f9ng mi\u1ec5n ph\u00ed kh\u00f4ng nh\u1eadn \u0111\u01b0\u1ee3c s\u1ef1 ch\u00fa \u00fd. C\u1ea3 t\u00e0i li\u1ec7u API s\u1ebd kh\u00f4ng c\u1eadp nh\u1eadt nh\u1eefng g\u00ec d\u1ecbch v\u1ee5 cung c\u1ea5p. <\/p>\n\n\n\n

Khi c\u1ed1 g\u1eafng s\u1eed d\u1ee5ng v\u00e0 ch\u1ec9nh s\u1eeda c\u00e1c m\u00e3 kh\u00e1c nhau, t\u00f4i kh\u00f4ng th\u1ec3 l\u00e0m cho n\u00f3 ho\u1ea1t \u0111\u1ed9ng theo c\u00e1ch m\u00ecnh mu\u1ed1n. May m\u1eafn thay v\u1edbi s\u1ef1 tr\u1ee3 gi\u00fap c\u1ee7a AI, sau v\u00e0i gi\u1edd, t\u00f4i \u0111\u00e3 c\u00f3 th\u1ec3 ch\u1ec9nh s\u1eeda theo c\u00e1ch m\u00ecnh mu\u1ed1n b\u1eb1ng JavaScript. <\/p>\n\n\n\n

C\u00e1ch th\u00eam ResponsiveVoice v\u00e0o trang web c\u1ee7a b\u1ea1n<\/h2>\n\n\n\n

\u0110\u1ec3 th\u00eam ResponsiveVoice v\u00e0o trang web c\u1ee7a m\u00ecnh, b\u1ea1n c\u1ea7n t\u1ea1o t\u00e0i kho\u1ea3n v\u00e0 t\u1ea1o kh\u00f3a API cho trang web c\u1ee7a m\u00ecnh. Sau \u0111\u00f3, ch\u1ec9 c\u1ea7n \u0111\u1eb7t T\u1eadp l\u1ec7nh sau v\u00e0o ti\u00eau \u0111\u1ec1 d\u1ef1 \u00e1n c\u1ee7a b\u1ea1n. <\/p>\n\n\n\n

<script src=\"https:\/\/code.responsivevoice.org\/responsivevoice.js?key=YOUR_UNIQUE_KEY\"><\/script><\/code><\/pre>\n\n\n\n
Sau khi th\u00eam T\u1eadp l\u1ec7nh n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o javascript kh\u00e1c \u0111\u1ec3 l\u00e0m cho n\u00f3 ho\u1ea1t \u0111\u1ed9ng tr\u00ean trang web c\u1ee7a m\u00ecnh. B\u1ea1n c\u00f3 th\u1ec3 g\u1ecdi API \u0111\u1ec3 ph\u00e1t \u00e2m v\u0103n b\u1ea3n b\u1ea1n ch\u1ecdn, s\u1eed d\u1ee5ng chu\u1ed7i, bi\u1ebfn ho\u1eb7c v\u0103n b\u1ea3n \u0111\u1ecbnh tr\u01b0\u1edbc. <\/p>\n\n\n\n
C\u00f3 th\u1ec3 l\u00e0m cho T\u1eadp l\u1ec7nh ph\u00e1t \u00e2m c\u00e1c th\u1ebb c\u1ee5 th\u1ec3, v\u0103n b\u1ea3n \u0111\u00e3 ch\u1ecdn ho\u1eb7c th\u1eadm ch\u00ed to\u00e0n b\u1ed9 trang. \u0110\u1ec3 l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u \u0111\u00f3, b\u1ea1n ch\u1ec9 c\u1ea7n t\u1ea1o javascript v\u00e0 g\u1ecdi responsivevoice b\u1eb1ng \u0111o\u1ea1n m\u00e3 sau: <\/p>\n\n\n\n
responsiveVoice.speak(\"text-or-var\");<\/code><\/pre>\n\n\n\n
Th\u00eam tham s\u1ed1 trong responsiveVoice.Speak<\/h2>\n\n\n\n
\u0110\u1ec3 t\u00f9y ch\u1ec9nh m\u00e3 ResponsiveVoice, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c t\u00f9y ch\u1ecdn c\u1ea5u h\u00ecnh c\u00f3 s\u1eb5n trong t\u00e0i li\u1ec7u ResponsiveVoice. M\u1ed9t s\u1ed1 t\u00f9y ch\u1ecdn ph\u1ed5 bi\u1ebfn nh\u1ea5t bao g\u1ed3m:<\/p>\n\n\n\n
    \n
  1. gi\u1ecdng n\u00f3i<\/code>: Cho ph\u00e9p b\u1ea1n ch\u1ec9 \u0111\u1ecbnh gi\u1ecdng n\u00f3i s\u1ebd \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ph\u00e1t v\u0103n b\u1ea3n (ng\u00f4n ng\u1eef). B\u1ea1n c\u00f3 th\u1ec3 ch\u1ecdn t\u1eeb c\u00e1c gi\u1ecdng n\u00f3i c\u00f3 s\u1eb5n cho ng\u00f4n ng\u1eef \u0111\u00e3 ch\u1ecdn.<\/li>\n\n\n\n
  2. t\u1ef7 l\u1ec7<\/code>: Cho ph\u00e9p b\u1ea1n ki\u1ec3m so\u00e1t t\u1ed1c \u0111\u1ed9 n\u00f3i. Gi\u00e1 tr\u1ecb cao h\u01a1n s\u1ebd d\u1eabn \u0111\u1ebfn b\u00e0i ph\u00e1t bi\u1ec3u nhanh h\u01a1n, trong khi gi\u00e1 tr\u1ecb th\u1ea5p h\u01a1n s\u1ebd d\u1eabn \u0111\u1ebfn b\u00e0i ph\u00e1t bi\u1ec3u ch\u1eadm h\u01a1n.<\/li>\n\n\n\n
  3. s\u00e2n c\u1ecf<\/code>: Cho ph\u00e9p b\u1ea1n ki\u1ec3m so\u00e1t cao \u0111\u1ed9 l\u1eddi n\u00f3i. Gi\u00e1 tr\u1ecb cao h\u01a1n s\u1ebd d\u1eabn \u0111\u1ebfn gi\u1ecdng n\u00f3i c\u00f3 \u00e2m v\u1ef1c cao h\u01a1n, trong khi gi\u00e1 tr\u1ecb th\u1ea5p h\u01a1n s\u1ebd d\u1eabn \u0111\u1ebfn gi\u1ecdng n\u00f3i c\u00f3 \u00e2m v\u1ef1c th\u1ea5p h\u01a1n.<\/li>\n\n\n\n
  4. \u00e2m l\u01b0\u1ee3ng<\/code>: Cho ph\u00e9p b\u1ea1n ki\u1ec3m so\u00e1t \u00e2m l\u01b0\u1ee3ng n\u00f3i. Gi\u00e1 tr\u1ecb cao h\u01a1n s\u1ebd d\u1eabn \u0111\u1ebfn l\u1eddi n\u00f3i to h\u01a1n, trong khi gi\u00e1 tr\u1ecb th\u1ea5p h\u01a1n s\u1ebd d\u1eabn \u0111\u1ebfn l\u1eddi n\u00f3i \u00eam h\u01a1n.<\/li>\n<\/ol>\n\n\n\n
    \u0110\u1ec3 s\u1eed d\u1ee5ng c\u00e1c t\u00f9y ch\u1ecdn n\u00e0y, ch\u1ec9 c\u1ea7n th\u00eam ch\u00fang l\u00e0m tham s\u1ed1 khi g\u1ecdi h\u00e0m \u0111\u00e1p \u1ee9ngVoice.speak()<\/code>.<\/p>\n\n\n
    \n
    \"-\"<\/figure><\/div>\n\n\n
    Th\u00eam n\u00fat \u0111\u1ec3 ph\u00e1t \u00e2m m\u1ed9t ph\u1ea7n t\u1eed HTML<\/h2>\n\n\n\n
    Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n ph\u00e1t \u00e2m n\u1ed9i dung c\u1ee7a m\u1ed9t th\u1ebb, b\u1ea1n c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n \u0111i\u1ec1u \u0111\u00f3 b\u1eb1ng javascript b\u00ean d\u01b0\u1edbi. Trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y, Script th\u00eam m\u1ed9t n\u00fat tr\u00ean m\u1ed7i
     c\u1ee7a trang web, x\u00f3a m\u1ed9t s\u1ed1 th\u1ebb HTML b\u1eb1ng regex (trong tr\u01b0\u1eddng h\u1ee3p c\u1ee7a t\u00f4i v\u00e0 nh\u1eefng ng\u01b0\u1eddi kh\u00e1c) v\u00e0 ph\u00e1t \u00e2m n\u1ed9i dung c\u1ee7a th\u1ebb
     . <\/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
    \u0110o\u1ea1n m\u00e3 tr\u00ean b\u1eaft \u0111\u1ea7u b\u1eb1ng c\u00e1ch th\u00eam c\u00e1c n\u00fat v\u00e0 nh\u1eadn c\u00e1c th\u1ebb
     , sau \u0111\u00f3 \u0111\u1ecbnh c\u1ea5u h\u00ecnh m\u1ed9t s\u1ef1 ki\u1ec7n \u0111\u1ec3 n\u1ebfu ng\u01b0\u1eddi d\u00f9ng nh\u1ea5p v\u00e0o n\u00fat, n\u00f3 s\u1ebd nh\u1eadn \u0111\u01b0\u1ee3c n\u1ed9i dung c\u1ee7a th\u1ebb
     c\u00f9ng v\u1edbi HTML, s\u1ebd x\u00f3a b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng \u201cthay th\u1ebf\u201d c\u00e1c th\u1ebb v\u00e0 c\u00e1c th\u1ebb kh\u00e1c, bao g\u1ed3m c\u1ea3 n\u1ed9i dung c\u1ee7a ch\u00ednh n\u00fat \u0111\u00f3. <\/p>\n\n\n\n
    Sau \u0111\u00f3, s\u1eed d\u1ee5ng bi\u1ebfn v\u0103n b\u1ea3n s\u1ea1ch, n\u00f3 th\u1ef1c hi\u1ec7n ph\u00e1t \u00e2m ti\u1ebfng Nh\u1eadt \u1edf t\u1ed1c \u0111\u1ed9 0,8. M\u00e3 \u1edf cu\u1ed1i l\u00e0 c\u1ea7n thi\u1ebft \u0111\u1ec3 t\u1ea1o c\u00e1c n\u00fat. <\/p>\n\n\n\n
    M\u00e3es. <\/pre>\n\n\n\n
    \u0110\u1ecdc n\u1ed9i dung m\u00e0n h\u00ecnh \u0111\u00e3 ch\u1ecdn<\/h2>\n\n\n\n
    V\u1ec1 b\u1ea3n ch\u1ea5t, ResponsiveVoice c\u00f3 t\u00f9y ch\u1ecdn cho ph\u00e9p \u0111\u1ecdc n\u1ed9i dung trang \u0111\u00e3 ch\u1ecdn. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Javascript c\u1ee7a ri\u00eang m\u00ecnh v\u00e0 t\u00f9y ch\u1ec9nh. Trong tr\u01b0\u1eddng h\u1ee3p c\u1ee7a t\u00f4i, t\u00f4i ch\u1ec9 ph\u00e1t \u00e2m c\u00e1c ch\u1eef c\u00e1i ti\u1ebfng Nh\u1eadt. <\/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
      Hy v\u1ecdng nh\u1eefng m\u00e3 n\u00e0y s\u1ebd gi\u00fap b\u1ea1n gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 c\u1ee7a m\u00ecnh v\u1edbi ResponsiveVoice. N\u1ebfu b\u1ea1n c\u1ea7n t\u00f9y ch\u1ec9nh th\u00eam m\u00e3, ch\u1ec9 c\u1ea7n y\u00eau c\u1ea7u Tr\u00ed tu\u1ec7 nh\u00e2n t\u1ea1o tr\u1ee3 gi\u00fap. <\/p>","protected":false},"excerpt":{"rendered":"
    ResponsiveVoice l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 Speech Text API mi\u1ec5n ph\u00ed ph\u1ed5 bi\u1ebfn cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng<\/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\/vi\/wp-json\/wp\/v2\/posts\/3951"}],"collection":[{"href":"https:\/\/kevinbk.com\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kevinbk.com\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/vi\/wp-json\/wp\/v2\/comments?post=3951"}],"version-history":[{"count":4,"href":"https:\/\/kevinbk.com\/vi\/wp-json\/wp\/v2\/posts\/3951\/revisions"}],"predecessor-version":[{"id":3956,"href":"https:\/\/kevinbk.com\/vi\/wp-json\/wp\/v2\/posts\/3951\/revisions\/3956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/vi\/wp-json\/wp\/v2\/media\/3832"}],"wp:attachment":[{"href":"https:\/\/kevinbk.com\/vi\/wp-json\/wp\/v2\/media?parent=3951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kevinbk.com\/vi\/wp-json\/wp\/v2\/categories?post=3951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}