您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“基于SpringBoot和Vue的動(dòng)態(tài)語(yǔ)音播放怎么實(shí)現(xiàn)”,感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“基于SpringBoot和Vue的動(dòng)態(tài)語(yǔ)音播放怎么實(shí)現(xiàn)”吧!
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)語(yǔ)音 byte[] voice = SpeechRestfulUtil.text2voice(text); // 返回音頻byte[] return ResponseEntity.ok().body(voice); }
本例是調(diào)用阿里云tts接口,把文字轉(zhuǎn)語(yǔ)音
2、在configureMessageConverters中添加解析器
ByteArrayHttpMessageConverter
@Override public void configureMessageConverters(List<HttpMessageConverter<?>> converters) { MappingJackson2HttpMessageConverter jackson2HttpMessageConverter = new MappingJackson2HttpMessageConverter(objectMapper()); converters.add(jackson2HttpMessageConverter); converters.add(new ByteArrayHttpMessageConverter()); }
使用axios調(diào)用后端接口,設(shè)置 responseType=blob
1)得到瀏覽器播放控件 audioContext
2)使用FileReader讀取得到的byte[]
3)FileReader綁定load事件,讀取byte[]完成后播放語(yǔ)音
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[]完成后播放語(yǔ)音 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 }); }
到此,相信大家對(duì)“基于SpringBoot和Vue的動(dòng)態(tài)語(yǔ)音播放怎么實(shí)現(xiàn)”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。