Tùy chỉnh ResponsiveVoice Code

ResponsiveVoice là một công cụ Speech Text API miễn phí phổ biến cho phép người dùng thêm văn bản đọc, từ và đoạn trích vào trang web của họ. Nhưng làm cách nào để tùy chỉnh các mã này để thực hiện theo cách bạn muốn?

ResponsiveVoice mặc dù miễn phí nhưng có gói trả phí hỗ trợ nó. Vấn đề lớn là người dùng miễn phí không nhận được sự chú ý. Cả tài liệu API sẽ không cập nhật những gì dịch vụ cung cấp.

Khi cố gắng sử dụng và chỉnh sửa các mã khác nhau, tôi không thể làm cho nó hoạt động theo cách mình muốn. May mắn thay với sự trợ giúp của AI, sau vài giờ, tôi đã có thể chỉnh sửa theo cách mình muốn bằng JavaScript.

Cách thêm ResponsiveVoice vào trang web của bạn

Để thêm ResponsiveVoice vào trang web của mình, bạn cần tạo tài khoản và tạo khóa API cho trang web của mình. Sau đó, chỉ cần đặt Tập lệnh sau vào tiêu đề dự án của bạn.

<script src="https://code.responsivevoice.org/responsivevoice.js?key=YOUR_UNIQUE_KEY"></script>

Sau khi thêm Tập lệnh này, bạn có thể tạo javascript khác để làm cho nó hoạt động trên trang web của mình. Bạn có thể gọi API để phát âm văn bản bạn chọn, sử dụng chuỗi, biến hoặc văn bản định trước.

Có thể làm cho Tập lệnh phát âm các thẻ cụ thể, văn bản đã chọn hoặc thậm chí toàn bộ trang. Để làm được điều đó, bạn chỉ cần tạo javascript và gọi responsivevoice bằng đoạn mã sau:

responsiveVoice.speak("text-or-var");

Thêm tham số trong responsiveVoice.Speak

Để tùy chỉnh mã ResponsiveVoice, bạn có thể sử dụng các tùy chọn cấu hình có sẵn trong tài liệu ResponsiveVoice. Một số tùy chọn phổ biến nhất bao gồm:

1. giọng nói: Cho phép bạn chỉ định giọng nói sẽ được sử dụng để phát văn bản (ngôn ngữ). Bạn có thể chọn từ các giọng nói có sẵn cho ngôn ngữ đã chọn.
2. tỷ lệ: Cho phép bạn kiểm soát tốc độ nói. Giá trị cao hơn sẽ dẫn đến bài phát biểu nhanh hơn, trong khi giá trị thấp hơn sẽ dẫn đến bài phát biểu chậm hơn.
3. sân cỏ: Cho phép bạn kiểm soát cao độ lời nói. Giá trị cao hơn sẽ dẫn đến giọng nói có âm vực cao hơn, trong khi giá trị thấp hơn sẽ dẫn đến giọng nói có âm vực thấp hơn.
4. âm lượng: Cho phép bạn kiểm soát âm lượng nói. Giá trị cao hơn sẽ dẫn đến lời nói to hơn, trong khi giá trị thấp hơn sẽ dẫn đến lời nói êm hơn.

Để sử dụng các tùy chọn này, chỉ cần thêm chúng làm tham số khi gọi hàm đáp ứngVoice.speak().

Thêm nút để phát âm một phần tử HTML

Trong trường hợp bạn muốn phát âm nội dung của một thẻ, bạn có thể thực hiện điều đó bằng javascript bên dưới. Trong trường hợp này, Script thêm một nút trên mỗi

 của trang web, xóa một số thẻ HTML bằng regex (trong trường hợp của tôi và những người khác) và phát âm nội dung của thẻ
 . 

function adicionarBotoesPlay() {
  // Obtém todas as tags <pre> da página
  var tagsPre = document.getElementsByTagName("pre");
  // Para cada tag <pre>...
  for (var i = 0; i < tagsPre.length; i++) {
    // Cria um novo botão de play
    var botaoPlay = document.createElement("button");
		botaoPlay.setAttribute("class", "playbt");
    botaoPlay.innerHTML = "▷";
    // Adiciona o botão de play à tag <pre>
    tagsPre[i].appendChild(botaoPlay);
    // Configura o evento de clique do botão para chamar a função de pronúncia do ResponsiveVoice
    botaoPlay.addEventListener("click", function() { 
      // Obtém o conteúdo da tag <pre>
      // Obtém o elemento HTML que você deseja selecionar
      var conteudoPre = this.parentNode.innerHTML;
      // Substitui todas as tags <rt> e seu conteúdo pelo texto vazio
      var textoSemRt = conteudoPre.replace(/<rt>([\s\S]*?)<\/rt>/g, "").replace(/<button[^>]*>.*?<\/button>/g, "");
			var textoSemHtml = textoSemRt.replace(/<[^>]*>/g, "");
      // Solicita a pronúncia do conteúdo sem as tags <rt> pelo ResponsiveVoice Text To Speech
			// Cria um novo elemento de texto com o texto selecionado
			responsiveVoice.speak(" ");
      responsiveVoice.speak(textoSemHtml, "Japanese Female", {
		  rate: 0.8,
  		onend: function() {
    // Executa alguma ação depois que a pronúncia é concluída
  }
});
    });
  }
}
// Executa a função quando a página terminar de carregar
window.addEventListener("load", adicionarBotoesPlay);
Đoạn mã trên bắt đầu bằng cách thêm các nút và nhận các thẻ
 , sau đó định cấu hình một sự kiện để nếu người dùng nhấp vào nút, nó sẽ nhận được nội dung của thẻ
 cùng với HTML, sẽ xóa bằng cách sử dụng “thay thế” các thẻ và các thẻ khác, bao gồm cả nội dung của chính nút đó. 

Sau đó, sử dụng biến văn bản sạch, nó thực hiện phát âm tiếng Nhật ở tốc độ 0,8. Mã ở cuối là cần thiết để tạo các nút. 
Các mã cho bài viết này có thể được thêm vào giữa bên trong thẻ body hoặc head của trang web của bạn. 
Đọc nội dung màn hình đã chọn



Về bản chất, ResponsiveVoice có tùy chọn cho phép đọc nội dung trang đã chọn. Bạn có thể sử dụng Javascript của riêng mình và tùy chỉnh. Trong trường hợp của tôi, tôi chỉ phát âm các chữ cái tiếng Nhật. 
responsiveVoice.setDefaultVoice("Japanese Female");
document.addEventListener("mouseup", function() {
  // Obtém o texto selecionado pelo usuário
  var selecao = window.getSelection().toString();
  // Verifica se o texto selecionado não está vazio
  if (selecao) {
    // Verifica se o texto selecionado só contém caracteres japoneses
    var caracteresJaponeses = /^[\u3041-\u3096\u30A0-\u30FF\u4E00-\u9FFF]+$/;
    if (caracteresJaponeses.test(selecao)) {
      // Solicita a pronúncia do texto selecionado pelo ResponsiveVoice Text To Speech
      responsiveVoice.speak(selecao, "Japanese Female", {
        onend: function() {
          // Executa alguma ação depois que a pronúncia é concluída
}
      });
    }
  }
});
 Hy vọng những mã này sẽ giúp bạn giải quyết vấn đề của mình với ResponsiveVoice. Nếu bạn cần tùy chỉnh thêm mã, chỉ cần yêu cầu Trí tuệ nhân tạo trợ giúp.