Shulou(Shulou.com)06/02 Report--

This article is to share with you about how uniapp calls Baidu voice to achieve recording to text function. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

After three days of various difficulties, I finally realized this function. After referring to many articles on the Internet, I found a method that can be realized normally. The examples that can be found on the Internet do not work. I believe that many people are confused here. In order to avoid this situation in others, I share my code, which is absolutely available, including the use of recorderManager in the front end of uniapp and the call of Baidu voice to text in Java. I'm sure a lot of people need what I write. I've only tested Android phones, html5 +.

Do not use plus.speech this way, it is not easy to use. When you call Baidu's voice recognition, you will see an error in the parameter dev_id in Baidu's management console, and you have not found a place to add this parameter, so you do not need to select the app module configuration of the current project in hbuildx.

1. A very important step is to add the permission of android.permission.RECORD_AUDIO to manifest.json. Whether you want to debug a real machine, you must pack it online if you use a custom pedestal, so that the pedestal contains this permission, and then you must see the recording permission in the permission management of the current app in the mobile phone system.

two。 In order to be able to use recorderManager to ask if recording is allowed on the page where you want to use the recording feature, you must call a hardware permission request before using recorderManager. In the plug-in market, there is a https://ext.dcloud.net.cn/plugin?id=594 address App permission judgment and prompt such js, which is used to judge or apply for a certain hardware permission using the function of native.js. After the plug-in is introduced into the project, it will be in a folder like js_sdk in the current project directory. There will be a permission.js under the wa-permission folder.

3. Related code

Uniapp side code

{{msg}} you are saying {{voicetext}} release and stop playing the recording import permision from "@ / js_sdk/wa-permission/permission.js" const recorderManager = uni.getRecorderManager (); const innerAudioContext = uni.createInnerAudioContext () Export default {data () {return {voicetext: ", msg:", voicepath: "}}, onLoad () {this.initaudio ()}, methods: {async initaudio () {/ / Note here must be await because an asynchronous event will be triggered The permission application dialog box will pop up on the phone before you can go to the next step of recording let recordauth= await permision.requestAndroidPermission ("android.permission.RECORD_AUDIO") console.log ("determine whether you have recording permission >" + recordauth) if (recordauth==1) {recorderManager.onStart ((res) = > { Console.log ("start recording >...")}) RecorderManager.onStop ((res) = > {console.log ("recorderstop....res.tempFilePath >" + res.tempFilePath) this.voicepath = res.tempFilePath this.uploadvoicefile () / / upload to the server using uni.uploadFile Now it is in mp3 format}) RecorderManager.onError ((res) = > {console.log ('onError'+JSON.stringify (res));}) }}, / / initaudio method ends startvoice () {console.log ("start recording") recorderManager.start ({format: "mp3", sampleRate: 16000 / / must be set as a parameter set by the background Otherwise Baidu speech recognition will not be able to}) }, endvoice () {console.log ("end recording") / / pay attention to add some delay setTimeout (() = > {recorderManager.stop ()}, 1000)} to avoid the bug appearance of this api caused by too short speaking time. Playvoice () {console.log ("click playvoice") if (this.voicepath) {console.log ("play sound") innerAudioContext.src = this.voicepath InnerAudioContext.play () }}, uploadvoicefile () {/ / this.msg = "calling java service file path" + this.voicepath uni.uploadFile ({url: 'http://ip: port / uploadFile (Java side receives file interface name)', filePath: this.voicepath / / temporary path returned after recording Name: 'file', formData: {dev_id:1537 / / Chinese punctuation}, success: (uploadFileRes) = > {let word = uploadFileRes.data console.log ("upload audio successfully" + word) }, fail: (res) = > {console.log ("failed to upload audio" + JSON.stringify (res));}}) } ```/ Note the url attribute of uploadFile. The ip cannot be localhost or 127.If your own computer starts the java service, it must be a local real ip, such as 192.xxx, or a domain name, and the java interface must support cross-domain. Many people are stuck on this ip. I am also very difficult to find problem-solving posts on the Internet. Note that the path filePath is the path at the beginning of the onStop event of recorderManager, such as _ doc. There is no need to add any file: it is not such a thing as some people on the Internet say.

Java end

Two packages need to be referenced in pom

Com.baidu.aip java-sdk 4.16.3 com.googlecode.soundlibs mp3spi 1.9.5.4 ```import com.baidu.aip.speech.AipSpeech; import javazoom.spi.mpeg.sampled.file.MpegAudioFileReader; import org.apache.commons.io.IOUtils; import org.json.JSONArray; import org.json.JSONObject Import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import javax.sound.sampled.AudioFormat; import javax.sound.sampled.AudioInputStream; import javax.sound.sampled.AudioSystem; import java.io.IOException; import java.io.InputStream; import java.util.HashMap; @ RestController @ CrossOrigin (origins = "*") public class BaiduSpeech {/ / set APPID/AK/SK public static final String APP_ID = "" / / go to Baidu voice service application public static final String API_KEY = ""; / / go to Baidu voice service application public static final String SECRET_KEY = ""; / / go to Baidu voice service application @ RequestMapping (value = "/ uploadFile") public String uploadFile (@ RequestParam ("dev_id") int dev_id, @ RequestParam ("file") MultipartFile file) throws Exception {byte [] pcmbytedata = mp3Convert2pcm (file.getInputStream ()) HashMap options = new HashMap (); options.put ("dev_pid", dev_id); / / JSONObject jsonfrombaidu = basicBydata (pcmbytedata, "pcm", options); JSONArray jsonArray = jsonfrombaidu.getJSONArray ("result"); String result = jsonArray.getString (0); System.out.println (result); / / the parsed result return result } / / get AipSpeech object. It is recommended to use public static AipSpeech getClient () {AipSpeech client = new AipSpeech (APP_ID, API_KEY, SECRET_KEY); / / optional: set network connection parameters client.setConnectionTimeoutInMillis (2000); client.setSocketTimeoutInMillis (60000); return client } / / speech recognition (from file) public static JSONObject basicBydata (byte [] voicedata, String fileType,HashMap options) {AipSpeech client = getClient (); return client.asr (voicedata, fileType, 16000, options) } / * MP3 transform PCM * @ param inputStream MP3 input stream * @ throws Exception * / public static byte [] mp3Convert2pcm (InputStream inputStream) throws Exception {/ / convert PCM audioInputStream data AudioInputStream audioInputStream = getPcmAudioInputStream (inputStream); byte [] pcmBytes = IOUtils.toByteArray (audioInputStream); return pcmBytes } / * get PCM AudioInputStream data * @ param inputStream MP3 input stream * @ return AudioInputStream PCM input stream * / private static AudioInputStream getPcmAudioInputStream (InputStream inputStream) {AudioInputStream audioInputStream = null; AudioFormat targetFormat = null; try {AudioInputStream in = null; MpegAudioFileReader mp = new MpegAudioFileReader () In = mp.getAudioInputStream (inputStream); AudioFormat baseFormat = in.getFormat (); targetFormat = new AudioFormat (AudioFormat.Encoding.PCM_SIGNED, baseFormat.getSampleRate (), 16, baseFormat.getChannels (), baseFormat.getChannels () * 2, baseFormat.getSampleRate (), false); audioInputStream = AudioSystem.getAudioInputStream (targetFormat, in) } catch (Exception e) {e.printStackTrace ();} return audioInputStream;}} ```Thank you for reading! This is the end of the article on "how uniapp calls Baidu voice to realize recording to text". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.