يدعم تسجيل صفحة الويب بتنسيق HTML5 وتحميلها إلى الخادم وظيفة WeChat للكمبيوتر الشخصي وAndroid وIOS

عند التحضير لإنشاء واجهة دردشة على شبكة الإنترنت، يجب أن يكون لديك رموز تعبيرية وصور وملفات تم تحميلها، ولا داعي للقلق بشأن مقاطع الفيديو، فأنت لا تزال بحاجة إلى الصوت.

تسجل هذه المقالة التسجيل والتحميل عبر الإنترنت إلى الخادم باستخدام Recorder على GitHub على صفحة ويب.

يدعم نموذج التعليمات البرمجية هذا الاستخدام على أجهزة الكمبيوتر الشخصية وAndroid وIOS (Safari فقط). إذا كنت تستخدم RecordApp، فيمكنك إضافة دعم لنظام IOS (متصفح WeChat، التطبيق الصغير).

من الأفضل التصرف مرة واحدة بدلاً من قراءة التعليمات البرمجية آلاف المرات. قم بإنشاء ملف HTML جديد، وانسخ الأجزاء الثلاثة التالية من التعليمات البرمجية في الملف، ثم انقر نقرًا مزدوجًا فوق المتصفح لفتحه للاختبار.

 <!-- قم أولاً بتحميل مكتبة تسجيل js ملاحظة: يجب عليك استنساخ js محليًا للاستخدام --><meta charset=utf-8 /><script src=https://xiangyuecn.github.io/Recorder/recorder. mp3.min.js></script><نوع الإدخال=زر onclick=startRec() value=بدء التسجيل><hr><input type=button onclick=playRec() value=النهاية والتشغيل><نوع الإدخال=زر عند النقر=uploadRec() value=النهاية والتحميل><script>var rec;function startRec(){ rec=Recorder();// استخدم التكوين الافتراضي، تنسيق mp3//فتح ترخيص الميكروفون للحصول على الموارد ذات الصلة rec.open(function(){ //بدء التسجيل rec.start(); },function(msg,isUserNotAllow){ // رفض المستخدم الإذن أو أن المتصفح لا يدعم التنبيه((isUserNotAllow؟ المستخدم رفض الإذن، :)+غير قادر على التسجيل:+msg });};</script>

 <script>function uploadRec(){ // أوقف التسجيل واحصل على كائن ثنائي كبير الحجم لملف التسجيل، يمكنك فعل ما تريد rec.stop(function(blob,duration){ /* كائن ملف ثنائي كبير الحجم، والذي يمكن قراءته باستخدامه. محتوى FileReader، أو التحميل باستخدام FormData. في هذا المثال، يتم تحميل الملف الثنائي مباشرةً لتحميل النموذج العادي للتطبيق/x-www-form-urlencoded، يرجى الرجوع إلى المثال الموجود في github*/ var form=new FormData(); form.append(upfile,blob,recorder.mp3); // لا يختلف عن النموذج العادي، تتلقى الواجهة الخلفية الملف بمعلمة upfile واسم الملف هو Recorder.mp3 // استخدم ajax للتحميل مباشرة var xhr=new XMLHttpRequest (); xhr.open(POST, http://baidu.com/, قم بتغييره إلى عنوان التحميل الخاص بك);// يمكن لهذا العنوان المزيف رؤية بيانات الطلب وتنسيقه في شبكة وحدة التحكم، وتكون نتيجة الطلب غير ذات صلة xhr.onreadystatechange=function ( ){ if(xhr.readyState==4){ تنبيه(xhr.status==200?تم التحميل بنجاح: للاختبار، يرجى فتح وحدة تحكم المتصفح أولاً، ثم التسجيل مرة أخرى. في علامة تبويب الشبكة، يمكنك رؤية التحميل بيانات الطلب وتنسيقها)؛ xhr.send(form); },function(msg){ تنبيه(فشل التسجيل:+msg });};</script>

 <script>function playRec(){ // أوقف التسجيل، واحصل على كائن ثنائي كبير الحجم لملف التسجيل، وافعل ما تريد rec.stop(function(blob,duration){ var audio=document.createElement(audio); audio.controls= true; document.body.appendChild(audio); // من السهل جدًا الحصول على عنوان URL للصوت الثنائي audio.src=URL.createObjectURL(blob); },function(msg){ تنبيه(فشل التسجيل:+msg });};</script>

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

عنوان جيثب: https://github.com/xiangyuecn/Recorder

الاختبار عبر الإنترنت: انقر هنا للاختبار

يتم استخدام المسجل لتسجيل HTML5، وهو عبارة عن مكتبة js خالصة تدعم معظم متصفحات الأجهزة المحمولة وأجهزة الكمبيوتر التي طبقت getUserMedia، بما في ذلك Tencent Android X5 kernel (QQ، WeChat).

يكون إخراج التسجيل بتنسيق mp3 بشكل افتراضي، ويكون تنسيق wav اختياريًا (ملف التسجيل بهذا التنسيق كبير جدًا)؛ ودعم محدود لتنسيقات ogg وwebm وamr؛ ).

مضغوط: إذا لم تكن هناك متطلبات خاصة لحجم ملف التسجيل، فيمكنك فقط استخدام أداة التشفير الأساسية للتسجيل + wav، ويكون كود المصدر أقل من 300 سطر، والمسجل المضغوط wav.min.js أقل من 4 كيلو بايت. . يتم ترميز MP3 باستخدام lamejs، ويبلغ حجم الملف المضغوط Recorder.mp3.min.js 54 كيلو بايت بعد تشغيل gzip.

نظرًا لأن Safari فقط هو الذي يدعم getUserMedia على نظام التشغيل IOS (متصفح 11، وعرض الويب لبرنامج صغير)، كما يوفر RecordApp دعمًا أفضل للتطبيق الهجين.

نظرًا لأن RecordApp يتطلب حساب WeChat العام (الاشتراك) لتوفير دعم تسجيل JsSDK، فسيكون التطوير أكثر صعوبة، ولكنه يدعم المزيد من البيئات. يمكن استخدام المُسجل فور إخراجه من العلبة، يرجى الرجوع إلى الجدول أدناه لمعرفة أي جهاز يجب استخدامه:

* يمكنك التحقق من كود مصدر RecordApp في github، الموجود في الدليل xiangyuecn/Recorder/app-support-sample .

ما ورد أعلاه هو تسجيل صفحة الويب بتنسيق HTML5 وتحميلها على الخادم الذي قدمه المحرر، وهو يدعم وظيفة WeChat للكمبيوتر الشخصي وAndroid وIOS، وآمل أن يكون ذلك مفيدًا لك سوف يقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!

إذا كنت تعتقد أن هذه المقالة مفيدة لك، فنحن نرحب بإعادة طبعها، يرجى الإشارة إلى المصدر، شكرًا لك!