1. Add the interface in the controller and return byte[]
Set produces = “application/octet-stream ”
Set the return type 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); }
This example is to call the Alibaba Cloud tts interface to convert text to speech
2. Add a parser in configureMessageConverters
ByteArrayHttpMessageConverter
@Override public void configureMessageConverters(List<HttpMessageConverter<?>> converters) { MappingJackson2HttpMessageConverter jackson2HttpMessageConverter = new MappingJackson2HttpMessageConverter(objectMapper()); converters.add(jackson2HttpMessageConverter); converters.add(new ByteArrayHttpMessageConverter()); }
Use axios call Backend interface, set responseType=blob
1) Get the browser playback control audioContext
2) Use FileReader to read the obtained byte[]
3) FileReader binding load event, play the voice after reading byte[] is completed
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 }); }
The above is the detailed content of How to implement dynamic voice playback based on SpringBoot and Vue. For more information, please follow other related articles on the PHP Chinese website!