SpringBoot 및 Vue를 기반으로 동적 음성 재생을 구현하는 방법-java지도 시간-php.cn

SpringBoot 및 Vue를 기반으로 동적 음성 재생을 구현하는 방법

王林

풀어 주다： 2023-05-12 19:13:11

앞으로

1595명이 탐색했습니다.

1. 백그라운드 인터페이스는 byte[]

1을 반환합니다. 컨트롤러에 인터페이스를 추가하고 byte[]

Set을 생성하면 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);
}

로그인 후 복사

이 예는 텍스트를 음성으로 변환하기 위해 Alibaba Cloud tts 인터페이스를 호출하는 것입니다

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

로그인 후 복사

2에 파서를 추가합니다.

ByteArrayHttpMessageConverteraxios를 사용하여 백엔드 인터페이스를 호출하고 responseType=blob을 설정합니다.

1) 브라우저 재생 제어 audioContext를 가져옵니다.

2) FileReader를 사용하여 획득한 바이트를 읽습니다.[]

3) FileReader는 로드 이벤트를 바인딩하고 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
      });
}

로그인 후 복사

위 내용은 SpringBoot 및 Vue를 기반으로 동적 음성 재생을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!