How to implement dynamic voice playback based on SpringBoot and Vue
1. The background interface returns byte[]
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()); }
2. Vue front-end call interface to play voice
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!

JVM'sperformanceiscompetitivewithotherruntimes,offeringabalanceofspeed,safety,andproductivity.1)JVMusesJITcompilationfordynamicoptimizations.2)C offersnativeperformancebutlacksJVM'ssafetyfeatures.3)Pythonisslowerbuteasiertouse.4)JavaScript'sJITisles

JavaachievesplatformindependencethroughtheJavaVirtualMachine(JVM),allowingcodetorunonanyplatformwithaJVM.1)Codeiscompiledintobytecode,notmachine-specificcode.2)BytecodeisinterpretedbytheJVM,enablingcross-platformexecution.3)Developersshouldtestacross

TheJVMisanabstractcomputingmachinecrucialforrunningJavaprogramsduetoitsplatform-independentarchitecture.Itincludes:1)ClassLoaderforloadingclasses,2)RuntimeDataAreafordatastorage,3)ExecutionEnginewithInterpreter,JITCompiler,andGarbageCollectorforbytec

JVMhasacloserelationshipwiththeOSasittranslatesJavabytecodeintomachine-specificinstructions,managesmemory,andhandlesgarbagecollection.ThisrelationshipallowsJavatorunonvariousOSenvironments,butitalsopresentschallengeslikedifferentJVMbehaviorsandOS-spe

Java implementation "write once, run everywhere" is compiled into bytecode and run on a Java virtual machine (JVM). 1) Write Java code and compile it into bytecode. 2) Bytecode runs on any platform with JVM installed. 3) Use Java native interface (JNI) to handle platform-specific functions. Despite challenges such as JVM consistency and the use of platform-specific libraries, WORA greatly improves development efficiency and deployment flexibility.

JavaachievesplatformindependencethroughtheJavaVirtualMachine(JVM),allowingcodetorunondifferentoperatingsystemswithoutmodification.TheJVMcompilesJavacodeintoplatform-independentbytecode,whichittheninterpretsandexecutesonthespecificOS,abstractingawayOS

Javaispowerfulduetoitsplatformindependence,object-orientednature,richstandardlibrary,performancecapabilities,andstrongsecurityfeatures.1)PlatformindependenceallowsapplicationstorunonanydevicesupportingJava.2)Object-orientedprogrammingpromotesmodulara

The top Java functions include: 1) object-oriented programming, supporting polymorphism, improving code flexibility and maintainability; 2) exception handling mechanism, improving code robustness through try-catch-finally blocks; 3) garbage collection, simplifying memory management; 4) generics, enhancing type safety; 5) ambda expressions and functional programming to make the code more concise and expressive; 6) rich standard libraries, providing optimized data structures and algorithms.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version
Visual web development tools

Atom editor mac version download
The most popular open source editor

WebStorm Mac version
Useful JavaScript development tools
