So implementieren Sie eine dynamische Sprachwiedergabe basierend auf SpringBoot und Vue

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

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

2. Fügen Sie einen Parser in configureMessageConverters hinzu

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

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:'post',
    url:req.voice,
    responseType:'blob',
    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
      });
}

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!