HTML5 web page recording and uploading to the server supports PC, Android, and IOS WeChat function

When preparing to make a web-based chat interface, you should have emoticons, pictures, and uploaded files. Forget video, voice is still required.

This article records online recording and uploading to the server using Recorder on GitHub on a web page.

This sample code supports use on PC, Android, and IOS (Safari only). If you use RecordApp, you can add support for IOS (WeChat browser, applet).

It is better to act once than to read the code thousands of times. Create a new HTML file, copy the following three pieces of code into the file, and double-click the browser to open it for testing.

 <!-- First load the js recording library. Note: You should clone js locally for use --><meta charset=utf-8 /><script src=https://xiangyuecn.github.io/Recorder/recorder. mp3.min.js></script><input type=button onclick=startRec() value=Start recording><hr><input type=button onclick=playRec() value=End and play><input type=button onclick=uploadRec() value=End and upload><script>var rec;function startRec(){ rec=Recorder();//Use default configuration, mp3 format//Open Microphone authorization to obtain related resources rec.open(function(){ //Start recording rec.start(); },function(msg,isUserNotAllow){ //The user denied permission or the browser does not support alert((isUserNotAllow? The user denied permission, :)+unable to record:+msg); });};</script>

 <script>function uploadRec(){ //Stop recording and get the recording file blob binary object. You can do whatever you want rec.stop(function(blob,duration){ /* blob file object, which can be read out with FileReader Content, or upload using FormData. In this example, the binary file is uploaded directly. For ordinary application/x-www-form-urlencoded form upload, please refer to the example in github*/ var form=new FormData(); form.append(upfile,blob,recorder.mp3); //It is no different from the ordinary form form. The backend receives the file with the upfile parameter and the file name is recorder.mp3 //Use ajax to upload directly var xhr=new XMLHttpRequest (); xhr.open(POST, http://baidu.com/, change it to your upload address);//This fake address can see the request data and format in the console network, the request result is irrelevant xhr.onreadystatechange=function( ){ if(xhr.readyState==4){ alert(xhr.status==200?Upload successful: To test, please open the browser console first, and then record again. In the network tab, you can see the upload request data and formatted); } } xhr.send(form); },function(msg){ alert(recording failed:+msg); });};</script>

 <script>function playRec(){ //Stop recording, get the recording file blob binary object, do whatever you want rec.stop(function(blob,duration){ var audio=document.createElement(audio); audio. controls=true; document.body.appendChild(audio); //It is very simple to get the blob audio url audio.src=URL.createObjectURL(blob); audio.play(); },function(msg){ alert(recording failed:+msg); });};</script>

-------------------------------------------------- ----------------------------------

GitHub address: https://github.com/xiangyuecn/Recorder

Online test: Click here to test

Recorder is used for HTML5 recording. It is a pure js library that supports most mobile and PC browsers that have implemented getUserMedia, including Tencent Android X5 kernel (QQ, WeChat).

The recording output is in mp3 format by default, and wav format is optional (the recording file in this format is very large); limited support for ogg, webm, and amr formats; support for any format expansion (provided there is a corresponding encoder).

Compact: If there are no special requirements for the size of the recording file, you can just use the recording core + wav encoder. The source code is less than 300 lines, and the compressed recorder.wav.min.js is less than 4kb. MP3 is encoded using lamejs, and the compressed recorder.mp3.min.js is 54kb after gzip is turned on.

Since only Safari supports getUserMedia on IOS (11. Browser, mini program web-view), and RecordApp also provides better support for Hybrid App.

Since RecordApp requires WeChat public (subscription) account to provide JsSDK recording support, development will be more difficult, but it supports more environments. Recorder can be used right out of the box. Please refer to the table below for which one to use:

* You can check the RecordApp source code in github, which is in the directory xiangyuecn/Recorder/app-support-sample .

The above is the HTML5 webpage recording and uploading to the server introduced by the editor. It supports PC, Android, and IOS WeChat function. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. of. I would also like to thank everyone for your support of the VeVb martial arts website!

If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!