La grabación y carga de páginas web HTML5 en el servidor admite la función WeChat para PC, Android e IOS

Cuando te prepares para crear una interfaz de chat basada en web, debes tener emoticones, imágenes y archivos cargados. Olvídate de los vídeos, todavía necesitas voz.

Este artículo registra la grabación en línea y la carga al servidor usando Recorder en GitHub en una página web.

Este código de muestra admite el uso en PC, Android e IOS (solo Safari). Si usa RecordApp, puede agregar compatibilidad con IOS (navegador WeChat, subprograma).

Es mejor actuar una vez que leer el código miles de veces. Cree un nuevo archivo HTML, copie los siguientes tres fragmentos de código en el archivo y haga doble clic en el navegador para abrirlo y probarlo.

 <!-- Primero cargue la biblioteca de grabación js. Nota: debe clonar js localmente para usarlo --><meta charset=utf-8 /><script src=https://xiangyuecn.github.io/Recorder/recorder. mp3.min.js></script><tipo de entrada=botón onclick=startRec() valor=Iniciar grabación><hr><tipo de entrada=botón onclick=playRec() value=Finalizar y reproducir><tipo de entrada=botón onclick=uploadRec() value=Finalizar y cargar><script>var rec;function startRec(){ rec=Recorder();//Usar configuración predeterminada, formato mp3//Abrir Autorización del micrófono para obtener recursos relacionados rec.open(function(){ //Iniciar grabación rec.start(); },function(msg,isUserNotAllow){ //El usuario denegó el permiso o el navegador no admite alert((isUserNotAllow? El usuario denegó el permiso, :)+no se puede grabar:+msg });};</script>

 <script>function uploadRec(){ //Detener la grabación y obtener el objeto binario blob del archivo de grabación. Puedes hacer lo que quieras rec.stop(function(blob,duration){ /* objeto de archivo blob, que se puede leer en voz alta. Contenido de FileReader, o cárguelo usando FormData. En este ejemplo, el archivo binario se carga directamente. Para la carga del formulario ordinario application/x-www-form-urlencoded, consulte el ejemplo en github*/ var form=new FormData(); form.append(upfile,blob,recorder.mp3); //No es diferente del formulario normal. El backend recibe el archivo con el parámetro upfile y el nombre del archivo es recorder.mp3 //Use ajax para cargar directamente var. xhr=nueva XMLHttpRequest (); xhr.open(POST, http://baidu.com/, cámbielo a su dirección de carga);// Esta dirección falsa puede ver los datos y el formato de la solicitud en la red de la consola, el resultado de la solicitud es irrelevante xhr.onreadystatechange=function ( ){ if(xhr.readyState==4){ alert(xhr.status==200?Carga exitosa: para probar, primero abra la consola del navegador y luego grabe nuevamente. En la pestaña de red, puede ver la carga solicitar datos y formatear); xhr.send(formulario); },función(msg){ alerta(error de grabación:+msg });};</script>

 <script>function playRec(){ //Detener la grabación, obtener el objeto binario blob del archivo de grabación, hacer lo que quieras rec.stop(function(blob,duration){ var audio=document.createElement(audio); audio. controles= true; document.body.appendChild(audio); //Es muy sencillo obtener la URL de audio del blob audio.src=URL.createObjectURL(blob()); },función(msg){ alerta(error de grabación:+msg });};</script>

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

Dirección de GitHub: https://github.com/xiangyuecn/Recorder

Prueba en línea: haga clic aquí para probar

Recorder se utiliza para la grabación HTML5. Es una biblioteca js pura que admite la mayoría de los navegadores móviles y de PC que han implementado getUserMedia, incluido el kernel Tencent Android X5 (QQ, WeChat).

La salida de la grabación está en formato mp3 de forma predeterminada y el formato wav es opcional (el archivo de grabación en este formato es muy grande y admite formatos ogg, webm y amr para cualquier expansión de formato (siempre que haya un codificador correspondiente); ).

Compacto: si no hay requisitos especiales para el tamaño del archivo de grabación, puede usar el núcleo de grabación + codificador wav. El código fuente tiene menos de 300 líneas y el recorder.wav.min.js comprimido tiene menos de 4 kb. . MP3 está codificado usando lamejs y el recorder.mp3.min.js comprimido es de 54 kb después de activar gzip.

Dado que solo Safari admite getUserMedia en IOS (11. Navegador, vista web del mini programa), RecordApp también brinda un mejor soporte para la aplicación híbrida.

Dado que RecordApp requiere una cuenta pública (suscripción) de WeChat para proporcionar soporte de grabación JsSDK, el desarrollo será más difícil, pero admite más entornos. La grabadora se puede utilizar nada más sacarla de la caja. Consulte la siguiente tabla para saber cuál utilizar:

* Puedes consultar el código fuente RecordApp en github, que se encuentra en el directorio xiangyuecn/Recorder/app-support-sample .

Lo anterior es la grabación y carga de la página web HTML5 en el servidor presentada por el editor. Es compatible con la función WeChat para PC, Android e IOS. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje. El editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!

Si cree que este artículo le resulta útil, puede reimprimirlo. Indique la fuente, ¡gracias!