Coisas que eu quero fazer
Na página seguinte, utilizei o SpeechSynthesis, uma função básica de JavaScript, para realizar a conversão de texto em fala, mas a pronúncia não ficou muito boa.
Portanto, usaremos o AivisSpeech, que possui uma pronúncia mais clara, para ler o texto em voz alta.
premissa
Desta vez, trata- se de uma aplicação web local (http://localhost/Isso pressupõe acesso de[a specific location]O caminho File:// não pode ser usado. Usaremos[a specific example]Por exemplo, isso se deve a um problema de política CORS. Parece que o acesso de outros PCs pode ser possível alterando as configurações, mas eu não testei isso.
Ambiente
AivisSpeech Engine versão 1.0.0
Iniciando o AivisSpeech-Engine (servidor)
Caso ainda não tenha instalado o AivisSpeech, consulte a página seguinte para obter instruções sobre como instalá-lo.
Inicie o servidor executando o seguinte comando na linha de comando.
C:\Program Files\AivisSpeech\AivisSpeech-Engine¥run.exeSe você realizar uma instalação específica para o usuário, o caminho será o seguinte:
\AppData\Local\Programs\AivisSpeech\AivisSpeech-Engine\run.exeO download inicial levará algum tempo, pois o modelo será baixado. (Mesmo que você já tenha executado o AivisSpeech antes, se esta for a primeira vez que você está executando o AivisSpeech-Engine diretamente, um download ocorrerá.)
[2025/01/27 09:02:52] INFO: Started server process [19536]
[2025/01/27 09:02:52] INFO: Waiting for application startup.
[2025/01/27 09:02:52] INFO: Application startup complete.
[2025/01/27 09:02:52] INFO: Uvicorn running on http://localhost:10101 (Press CTRL+C to quit)Caso o registro acima seja exibido, utilize um navegador como o Chrome.http://localhost:10101Abra-o.
Se a seguinte mensagem for exibida, o servidor está funcionando corretamente.
Obtenção do ID do palestrante
Acesse o seguinte URL.
http://localhost:10101/speakersVou verificar a opção ‘Formatar Impressão’ para facilitar a visualização.
Anote o ID da configuração que deseja usar (observe que este não é o speaker_uuid).
Aqui, usaremos 888753760 para usar a versão normal de Anneli.
código
Criaremos arquivos HTML e JS. No entanto, como as requisições para o AivisSpeech-Engine a partir de File:// falharão, você precisará iniciar um servidor local usando Node.js ou LiveServer.
Veja abaixo as instruções de como usar o LiveServer.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>TEST</title>
</head>
<body>
<input type="text" id="text" class="txt" value="読み上げます" required><br><br>
<input type="button" value="読み上げ" id="execute"><br><br>
<script type="module" src="/src/main.js"></script>
</body>
</html>Em HTML, criei uma caixa de texto para ser lida em voz alta e um botão para leitura em voz alta.
main.js(Substitua 888753760 no código pelo valor obtido ao recuperar o SpeakerID.)
document.getElementById("execute").onclick = function (event) {
readText(document.getElementById("text").value)
};
function readText(text) {
const xhr = new XMLHttpRequest();
const url = 'http://localhost:10101/audio_query?speaker=888753760&text=' + text;
xhr.open("POST", url, false);
xhr.send();
const res_str = xhr.responseText;
const xhr_synth = new XMLHttpRequest();
const url_synth = 'http://localhost:10101/synthesis?speaker=888753760';
xhr_synth.open("POST", url_synth);
xhr_synth.setRequestHeader("Content-Type", "application/json");
xhr_synth.responseType = "arraybuffer";
xhr_synth.onreadystatechange = async () => {
if (xhr_synth.readyState === XMLHttpRequest.DONE && xhr_synth.status === 200) {
const context = new AudioContext();
const audioBuffer = await (new Promise((res, rej) => {
context.decodeAudioData(xhr_synth.response, res, rej);
}));
const source = context.createBufferSource();
source.buffer = audioBuffer;
source.connect(context.destination);
source.start(0);
}
}
xhr_synth.send(res_str);
}
O fluxo geral é o seguinte:
As informações a serem lidas em voz alta são enviadas ao servidor por meio de uma solicitação POST para http://localhost:10101/audio_query.
const xhr = new XMLHttpRequest();
const url = 'http://localhost:10101/audio_query?speaker=888753760&text=' + text;
xhr.open("POST", url, false);
xhr.send();
const res_str = xhr.responseText;Utilizando o JSON obtido da solicitação acima, um arquivo WAV será criado enviando uma solicitação POST para http://localhost:10101/synthesis.
const xhr_synth = new XMLHttpRequest();
const url_synth = 'http://localhost:10101/synthesis?speaker=888753760';
xhr_synth.open("POST", url_synth);
xhr_synth.setRequestHeader("Content-Type", "application/json");
xhr_synth.responseType = "arraybuffer";
xhr_synth.send(res_str);Após o término do download do arquivo WAV, reproduza-o usando o seguinte código.
const context = new AudioContext();
const audioBuffer = await (new Promise((res, rej) => {
context.decodeAudioData(xhr_synth.response, res, rej);
}));
const source = context.createBufferSource();
source.buffer = audioBuffer;
source.connect(context.destination);
source.start(0);
}Resultado
Consegui usar o AivisSpeech para que o texto fosse lido em voz alta.
コメント