L'enregistrement et le téléchargement de pages Web HTML5 sur le serveur prennent en charge la fonction WeChat sur PC, Android et IOS.

Lorsque vous vous préparez à créer une interface de discussion Web, vous devez disposer d'émoticônes, d'images et de fichiers téléchargés. Oubliez les vidéos, vous avez toujours besoin de voix.

Cet article enregistre l'enregistrement en ligne et le téléchargement sur le serveur à l'aide de Recorder sur GitHub sur une page Web.

Cet exemple de code prend en charge l'utilisation sur PC, Android et IOS (Safari uniquement). Si vous utilisez RecordApp, vous pouvez ajouter la prise en charge d'IOS (navigateur WeChat, applet).

Il est préférable d'agir une fois plutôt que de lire le code des milliers de fois. Créez un nouveau fichier HTML, copiez les trois morceaux de code suivants dans le fichier et double-cliquez sur le navigateur pour l'ouvrir à des fins de test.

 <!-- Chargez d'abord la bibliothèque d'enregistrement js Remarque : vous devez cloner js localement pour l'utiliser --><meta charset=utf-8 /><script src=https://xiangyuecn.github.io/Recorder/recorder. mp3.min.js></script><input type=button onclick=startRec() value=Démarrer l'enregistrement><hr><input type=button onclick=playRec() value=Fin et lecture><input type=button onclick=uploadRec() value=Fin et téléchargement><script>var rec;function startRec(){ rec=Recorder();//Utiliser la configuration par défaut, format mp3//Ouvrir Autorisation du microphone pour obtenir les ressources associées rec.open(function(){ //Démarrer l'enregistrement rec.start(); },function(msg,isUserNotAllow){ //L'utilisateur a refusé l'autorisation ou le navigateur ne prend pas en charge alert((isUserNotAllow? L'utilisateur a refusé l'autorisation, :)+impossible d'enregistrer:+msg });};</script>

 <script>function uploadRec(){ //Arrêtez l'enregistrement et obtenez l'objet binaire blob du fichier d'enregistrement Vous pouvez faire ce que vous voulez rec.stop(function(blob,duration){ /* objet fichier blob, qui peut être lu avec. Contenu FileReader ou téléchargement à l'aide de FormData. Dans cet exemple, le fichier binaire est téléchargé directement pour le téléchargement de formulaire application/x-www-form-urlencoded ordinaire, veuillez vous référer à l'exemple dans github*/ var form=new FormData(); form.append(upfile,blob,recorder.mp3); //Ce n'est pas différent du formulaire ordinaire. Le backend reçoit le fichier avec le paramètre upfile et le nom du fichier est recorder.mp3 //Utilisez ajax pour télécharger directement var. xhr=nouveau XMLHttpRequest (); xhr.open(POST, http://baidu.com/, remplacez-la par votre adresse de téléchargement);//Cette fausse adresse peut voir les données et le format de la demande dans le réseau de la console, le résultat de la demande n'est pas pertinent xhr.onreadystatechange=function ( ){ if(xhr.readyState==4){ alert(xhr.status==200?Téléchargement réussi : pour tester, veuillez d'abord ouvrir la console du navigateur, puis enregistrer à nouveau. Dans l'onglet Réseau, vous pouvez voir le téléchargement demander des données et formatées); } } xhr.send(form); },function(msg){ alert(enregistrement échoué :+msg });};</script>

 <script>function playRec(){ //Arrêtez l'enregistrement, récupérez l'objet binaire blob du fichier d'enregistrement, faites ce que vous voulez rec.stop(function(blob,duration){ var audio=document.createElement(audio); audio. CONTROLS= true; document.body.appendChild(audio); //Il est très simple d'obtenir l'URL audio du blob audio.src=URL.createObjectURL(blob); },function(msg){ alert(échec de l'enregistrement :+msg });};</script>

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

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

Test en ligne : Cliquez ici pour tester

Recorder est utilisé pour l'enregistrement HTML5. Il s'agit d'une bibliothèque purement js qui prend en charge la plupart des navigateurs mobiles et PC qui ont implémenté getUserMedia, y compris le noyau Tencent Android X5 (QQ, WeChat).

La sortie d'enregistrement est au format mp3 par défaut et le format wav est facultatif (le fichier d'enregistrement dans ce format est très volumineux). Prise en charge limitée des formats ogg, webm et amr ; prise en charge de toute extension de format (à condition qu'il existe un encodeur correspondant) ; ).

Compact : s'il n'y a pas d'exigences particulières concernant la taille du fichier d'enregistrement, vous pouvez simplement utiliser l'encodeur core + wav. Le code source fait moins de 300 lignes et le recorder.wav.min.js compressé fait moins de 4 Ko. . Le MP3 est codé à l'aide de lamejs et le recorder.mp3.min.js compressé fait 54 Ko après l'activation de gzip.

Étant donné que seul Safari prend en charge getUserMedia sur IOS (11. Navigateur, mini-programme d'affichage Web), RecordApp offre également une meilleure prise en charge de l'application hybride.

Étant donné que RecordApp nécessite un compte public (abonnement) WeChat pour fournir la prise en charge de l'enregistrement JsSDK, le développement sera plus difficile, mais il prend en charge davantage d'environnements. L'enregistreur peut être utilisé dès la sortie de la boîte. Veuillez vous référer au tableau ci-dessous pour savoir lequel utiliser :

* Vous pouvez vérifier le code source RecordApp dans github, qui se trouve dans le répertoire xiangyuecn/Recorder/app-support-sample .

Ce qui précède est l'enregistrement et le téléchargement de la page Web HTML5 sur le serveur introduit par l'éditeur. Il prend en charge la fonction PC, Android et IOS WeChat. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et le. l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !

Si vous pensez que cet article vous est utile, n'hésitez pas à le réimprimer, veuillez indiquer la source, merci !