亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2023年04月26日 09:04:53   作者:頑石九變  
本文介紹如何使用SpringBoot和Vue實現(xiàn)音頻文件的動態(tài)播放,包括前端頁面設(shè)計、后端接口開發(fā)、音頻文件存儲和調(diào)用等方面。通過該實現(xiàn),用戶可以在網(wǎng)頁上直接播放音頻,增強用戶體驗,提高網(wǎng)站互動性

SpringBoot+Vue實現(xiàn)動態(tài)語音播放。實現(xiàn)效果:

  • 頁面點擊播報語音按鈕,調(diào)用后臺接口獲取二進制byte[]
  • 前端得到返回數(shù)據(jù),調(diào)用瀏覽器控件AudioContext解碼音頻流,實現(xiàn)播放。

一、后臺接口返回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)語音播放實現(xiàn)的文章就介紹到這了,更多相關(guān)SpringBoot動態(tài)語音播放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Java線性結(jié)構(gòu)中棧、隊列和串的基本概念和特點詳解

    Java線性結(jié)構(gòu)中棧、隊列和串的基本概念和特點詳解

    前幾天小編給大家介紹了Java線性結(jié)構(gòu)中的鏈表,除了鏈表這種結(jié)構(gòu)之外,實際上還有棧、隊列、串等結(jié)構(gòu),那么這些結(jié)構(gòu)又有哪些特點呢,本文就給大家詳細的介紹一下,感興趣的小伙伴跟著小編一起來看看吧
    2023-07-07
  • Java防止頻繁請求、重復(fù)提交的操作代碼(后端防抖操作)

    Java防止頻繁請求、重復(fù)提交的操作代碼(后端防抖操作)

    在客戶端網(wǎng)絡(luò)慢或者服務(wù)器響應(yīng)慢時,用戶有時是會頻繁刷新頁面或重復(fù)提交表單的,這樣是會給服務(wù)器造成不小的負擔(dān)的,同時在添加數(shù)據(jù)時有可能造成不必要的麻煩,今天通過本文給大家介紹下Java防止頻繁請求、重復(fù)提交的操作代碼,一起看看吧
    2022-04-04
  • SpringMVC中的幾個模型對象

    SpringMVC中的幾個模型對象

    這篇文章主要介紹了SpringMVC中的幾個模型對象,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2021-12-12
  • java開發(fā)AOP面向切面編程入門

    java開發(fā)AOP面向切面編程入門

    這篇文章主要介紹了java開發(fā)的AOP面向切面編程入門的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步學(xué)有所得
    2021-10-10
  • spring boot 下對JSON返回值去除null和空字段操作

    spring boot 下對JSON返回值去除null和空字段操作

    這篇文章主要介紹了spring boot 下對JSON返回值去除null和空字段操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • 教你如何在Intellij IDEA中集成Gitlab

    教你如何在Intellij IDEA中集成Gitlab

    今天來簡單說下,如何在IDEA中集成gitlab項目,默認情況下IDEA中的 VCS => Checkout From Version Control 選項中是沒有g(shù)itlab這一項的,本文通過圖文并茂的形式給大家介紹的非常詳細,需要的朋友參考下吧
    2023-10-10
  • java基礎(chǔ)之類初始化順序示例解析

    java基礎(chǔ)之類初始化順序示例解析

    這篇文章主要為大家介紹了java基礎(chǔ)之類初始化順序示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-10-10
  • Activiti流程圖查看實例

    Activiti流程圖查看實例

    這篇文章主要介紹了Activiti流程圖查看實例,需要的朋友可以參考下
    2014-08-08
  • 關(guān)于Java實現(xiàn)HttpServer模擬前端接口調(diào)用

    關(guān)于Java實現(xiàn)HttpServer模擬前端接口調(diào)用

    這篇文章主要介紹了關(guān)于Java實現(xiàn)Http?Server模擬前端接口調(diào)用,Http?協(xié)議是建立在?TCP?協(xié)議之上的協(xié)議,所以能用?TCP?來自己模擬一個簡單的?Http?Server?當(dāng)然是可以的,需要的朋友可以參考下
    2023-04-04
  • 必須了解的高階JAVA枚舉特性!

    必須了解的高階JAVA枚舉特性!

    這篇文章主要介紹了必須了解的高階JAVA枚舉特性!幫助大家更好的理解和學(xué)習(xí)Java枚舉的相關(guān)知識,感興趣的朋友可以了解下
    2021-01-01

最新評論