快捷導(dǎo)航

基于SpringBoot和Vue的動態(tài)語音播放實(shí)現(xiàn)

更新時間：2023年04月26日 09:04:53 作者：頑石九變

本文介紹如何使用SpringBoot和Vue實(shí)現(xiàn)音頻文件的動態(tài)播放，包括前端頁面設(shè)計(jì)、后端接口開發(fā)、音頻文件存儲和調(diào)用等方面。通過該實(shí)現(xiàn)，用戶可以在網(wǎng)頁上直接播放音頻，增強(qiáng)用戶體驗(yàn)，提高網(wǎng)站互動性

一、后臺接口返回byte[]

1、在controller中添加接口，返回byte[]

設(shè)置 produces = “application/octet-stream”
設(shè)置返回類型 ResponseEntity<byte[]>

@PostMapping(value = "/v/voice", produces = "application/octet-stream")
public ResponseEntity<byte[]> voice(@RequestBody JSONObject param, HttpServletResponse response) throws IOException {
    String text = param.getString("text");
    // 以下代碼調(diào)用阿里云接口，把文字轉(zhuǎn)語音
    byte[] voice = SpeechRestfulUtil.text2voice(text);
    // 返回音頻byte[]
    return ResponseEntity.ok().body(voice);
}

本例是調(diào)用阿里云tts接口，把文字轉(zhuǎn)語音

2、在configureMessageConverters中添加解析器

ByteArrayHttpMessageConverter

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

二、Vue前端調(diào)用接口播放語音

使用axios調(diào)用后端接口，設(shè)置 responseType=blob

1）得到瀏覽器播放控件 audioContext

2）使用FileReader讀取得到的byte[]

3）FileReader綁定load事件，讀取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
      });
}

到此這篇關(guān)于基于SpringBoot和Vue的動態(tài)語音播放實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)SpringBoot動態(tài)語音播放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: