So implementieren Sie eine dynamische Sprachwiedergabe basierend auf SpringBoot und Vue-javaLernprogramm-php.cn

So implementieren Sie eine dynamische Sprachwiedergabe basierend auf SpringBoot und Vue

王林

Freigeben： 2023-05-12 19:13:11

nach vorne

1543 Leute haben es durchsucht

1. Die Hintergrundschnittstelle gibt Byte[] zurück

1. Fügen Sie die Schnittstelle im Controller hinzu und geben Sie Byte[] zurück []> ;

@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);
}

Nach dem Login kopieren

In diesem Beispiel wird die Alibaba Cloud tts-Schnittstelle aufgerufen, um Text in Sprache umzuwandeln

@Override
public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
    MappingJackson2HttpMessageConverter jackson2HttpMessageConverter = new MappingJackson2HttpMessageConverter(objectMapper());
    converters.add(jackson2HttpMessageConverter);
    converters.add(new ByteArrayHttpMessageConverter());
}

Nach dem Login kopieren

2. Das Vue-Frontend ruft die Schnittstelle auf, um Sprache abzuspielen

Verwenden Sie axios, um die Backend-Schnittstelle aufzurufen, legen Sie „responseType=blob“ fest.

1) Rufen Sie die Browser-Wiedergabesteuerung „audioContext“ ab Stimme nach Abschluss des Lesens von Byte[]

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
      });
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine dynamische Sprachwiedergabe basierend auf SpringBoot und Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!