Maison > Java > javaDidacticiel > le corps du texte

Comment implémenter la lecture vocale dynamique basée sur SpringBoot et Vue

王林
Libérer: 2023-05-12 19:13:11
avant
1543 Les gens l'ont consulté

1. L'interface d'arrière-plan renvoie l'octet[]

1 Ajoutez une interface dans le contrôleur et renvoie l'octet[]

  • . Définir produit = "application/octet-stream"

  • Définir le type de retour ResponseEntity

@PostMapping(value = "/v/voice", produces = "application/octet-stream")
public ResponseEntity<byte[]> voice(@RequestBody JSONObject param, HttpServletResponse response) throws IOException {
    String text = param.getString("text");
    // 以下代码调用阿里云接口,把文字转语音
    byte[] voice = SpeechRestfulUtil.text2voice(text);
    // 返回音频byte[]
    return ResponseEntity.ok().body(voice);
}
Copier après la connexion
# 🎜🎜 #Cet exemple consiste à appeler l'interface tts d'Alibaba Cloud pour convertir du texte en parole

2 Ajoutez un analyseur dans configureMessageConverters

ByteArrayHttpMessageConverter

@Override
public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
    MappingJackson2HttpMessageConverter jackson2HttpMessageConverter = new MappingJackson2HttpMessageConverter(objectMapper());
    converters.add(jackson2HttpMessageConverter);
    converters.add(new ByteArrayHttpMessageConverter());
}
Copier après la connexion
#. 🎜🎜 #2. Le front-end de Vue appelle l'interface pour lire la voix

Utilisez axios pour appeler l'interface back-end et définissez responseType=blob

1) Obtenez le navigateur contrôle de lecture audioContext

#🎜 🎜#2) Utilisez FileReader pour lire l'octet obtenu[]

3) FileReader lie l'événement de chargement et joue la voix après avoir terminé la lecture de l'octet[]# 🎜🎜#
function doVoice(){
  axios({
    method:&#39;post&#39;,
    url:req.voice,
    responseType:&#39;blob&#39;,
    data:{text:data.info} // 需要播放的文本
  }).then(function (response) {
        console.log(response);
        if(response.status===200){
          // 1)得到浏览器播放控件 audioContext
          let audioContext = new (window.AudioContext || window.webkitAudioContext)();
          let reader = new FileReader();
          reader.onload = function(evt) {
            if (evt.target.readyState === FileReader.DONE) {
              // 3)FileReader绑定load事件,读取byte[]完成后播放语音
              audioContext.decodeAudioData(evt.target.result,
                  function(buffer) {
                    // 解码成pcm流
                    let audioBufferSouceNode = audioContext.createBufferSource();
                    audioBufferSouceNode.buffer = buffer;
                    audioBufferSouceNode.connect(audioContext.destination);
                    audioBufferSouceNode.start(0);
                  }, function(e) {
                    console.log(e);
                  });
            }
          };
          //  2)使用FileReader读取得到的byte[]
          reader.readAsArrayBuffer(response.data);
        }
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
      .finally(function () {
        // always executed
      });
}
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:yisu.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal