Rumah > Java > javaTutorial > Cara melaksanakan main balik suara dinamik berdasarkan SpringBoot dan Vue

Cara melaksanakan main balik suara dinamik berdasarkan SpringBoot dan Vue

王林
Lepaskan: 2023-05-12 19:13:11
ke hadapan
1661 orang telah melayarinya

1. Antara muka latar belakang mengembalikan bait[]

1. Tambahkan antara muka dalam pengawal dan kembalikan bait[]

  • Set menghasilkan = “aplikasi/oktet. -strim ”

  • Tetapkan jenis pulangan 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);
}
Salin selepas log masuk

Contoh ini adalah untuk memanggil antara muka Alibaba Cloud tts ke tukar teks kepada pertuturan

2. Tambah penghurai dalam configureMessageConverters

ByteArrayHttpMessageConverter

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

2. Bahagian hadapan Vue memanggil antara muka untuk memainkan suara

Gunakan axios untuk memanggil antara muka bahagian belakang Set responseType=blob

1) Dapatkan audio kawalan main balik penyemak imbas

2) Gunakan FileReader untuk membaca bait yang diperolehi[]

3) FileReader mengikat acara muat dan membaca Mainkan suara selepas mengambil bait[]

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
      });
}
Salin selepas log masuk

Atas ialah kandungan terperinci Cara melaksanakan main balik suara dinamik berdasarkan SpringBoot dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan