استخدام الوسائط المتعددة Html5 لتنفيذ وظيفة WeChat الصوتية

الكاتب：Eve Cole وقت التحديث：2025-02-05 19:00:03

مع ظهور التطبيقات الاجتماعية مثل WeChat، أصبحت الدردشة الصوتية ميزة لا بد منها للعديد من التطبيقات، بدءًا من التطبيقات الاجتماعية التي تستخدم الدردشة الصوتية كوظيفتها الرئيسية إلى تطبيقات التجارة الإلكترونية مع خدمة العملاء الصوتية ووظائف النادل الصوتي أصبحت الدردشة وسيلة لا غنى عنها.

ومع ذلك، يشعر الكثير من الناس أن الصوت على جانب الويب بعيد عنا، وأن هذا هو عمل التطبيقات المحلية. في الواقع، ليس هذا هو الحال مع تطور Html5، أصبحت الوظيفة الصوتية تدريجيًا واحدة من هذه الوظائف وظائف يجب أن تكون في الواجهة الأمامية.

لماذا يجب أن نتعلم صوت HTML5؟

1. تتقدم مواصفات Html5، وقد أدت تحديثات الهاتف المحمول إلى تسريع تحديثات نظام التشغيل، وستصبح الوظيفة الصوتية إحدى المهام الرئيسية للواجهة الأمامية، تمامًا مثل اللوحة القماشية الحالية. يعد التنفيذ الأمامي لتطوير الوظيفة الصوتية أسرع ويوفر المزيد من القوى العاملة (وهذا يعني توفير المال للرئيس، وتوفير المال للرئيس يمنحك زيادة في الراتب)

2. حتى لو كانت التطبيقات المحلية تحتوي الآن على وظائف صوتية، فإن التعرف على المخاطر المختلفة للتفاعل الصوتي الأمامي يمكن أن يجعل علاقة زملائك أكثر انسجامًا وتعاونًا أكثر سلاسة بدلاً من قتال بعضهم البعض.

3. إن فهم التقنيات الجديدة يمكن أن يمنع المقابلات، وثانيًا، يمكنك التنبؤ بالاتجاهات التكنولوجية، بحيث لا تتعلم مجموعة من مهارات قتل التنين أو تلتزم بالقواعد، وهو أكثر ملاءمة للحفاظ على معرفتك وقدرتك التنافسية الأساسية المهنية الجزء العلوي من السلسلة الغذائية.

4. لدى معظم الأشخاص في الواجهة الأمامية سوء فهم بشأن الوظيفة الصوتية، حيث يعتقدون أن الوظيفة الصوتية هي مجرد علامة صوت HTML5. في الواقع، الأمر ليس بهذه البساطة.

ليس هناك الكثير من الحبر، فلنقم فقط بتطوير مشروع صغير وسيكون كل شيء واضحًا، فلنلقِ نظرة على التصميمات أولاً.

الحافظة.png

منطق العمل بسيط للغاية،

إنها تمامًا نفس طريقة WeChat الخاصة بنا. عندما تضغط لأسفل، سيتم تحرير الكلمة حتى النهاية، وسيتم تسجيل الخطاب. عندما تتركها، سيتم الضغط عليها للإنهاء، وسيتم إرسال الصوت إلى الطرف الآخر في نفس الوقت.

دعونا نفعل ذلك خطوة بخطوة أولا، دعونا نكمل صفحة HTML.

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, virtual-scale=1.0> <meta http-equiv=X-UA -المحتوى المتوافق=ie=edge> <title>WeChat Voice</title> <link rel=stylesheet href=css/record.css></head><body> <div id=wrap> <header id=header> <div id=left> <i class=material-icons> chevron_left </i> WeChat(184) </div> <div id=mid>عايدة · وانغ </div > <div id=right> <i class=material-icons> more_horiz </i> </div> </header> <div id=contentWrap> <ul id=chatList> <li class=item_me> <div class=chatContent>هل أنا أكثر شخص تحبه <span class=bot></span> <span class=top></span> </div> <div class=avatar > <img src=images/ava1.png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>اركض يا أخي! (عجل متدحرج) <span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>لن أقول الكثير هنا حسنًا، إليك مجموعة من الأكواد... <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1. png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>الأخ دابين، لماذا أنت جيد جدًا؟ أشعر وكأنني المحيط عندما أراك<span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>قديم أيتها الفتاة يا بني، هل وقعت في حبي... <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1.png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>لا، أنا كذلك دوار البحر، أشعر بالرغبة في التقيؤ عندما أراك... <span class=bot></span> <span class=top></span> </div> </li> </ul> </div> <تذييل id=footer> <div id=keyboard> <i class=material-icons> لوحة المفاتيح </i> </div> <div id=sayBtn> <span id=sendBtn class=sendBtn>اضغط للتحدث</span> < /div> <div id=icon><i class=material-icons> مشاعر_راضية </i></div> <div id=add><i class=material-icons> add_circle_outline </i></div> </footer> </div></body></html>

جزء المغلق,

 *{ هامش: 0؛ الحشو: 0؛}ul li{ list-style: none;}html,body{ height: 100% width: 100%; -face { عائلة الخط: 'أيقونات المواد'؛ url(../css/iconfont/MaterialIcons-Regular.eot); /* بالنسبة إلى IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(../css/ تنسيق Iconfont/MaterialIcons-Regular.woff('woff2')، url(../css/iconfont/MaterialIcons-Regular.woff2) format('woff'), url(../css/iconfont/MaterialIcons-Regular.ttf) format('truetype'); عائلة الخط: "أيقونات المواد"؛ وزن الخط: عادي؛ 32 بكسل ؛ /* حجم الرمز المفضل */ العرض: كتلة مضمّنة؛ /* ارتفاع الخط: 0.01rem؛ الاتجاه: لتر /* دعم جميع متصفحات WebKit */ -webkit-font-smoothing: antialiased; optimlegibility; /* دعم Firefox.*/ -moz-osx-font-smoothing: Grayscale; : عمود ضبط المحتوى: المسافة بين الارتفاع: 100%؛}#header{ الارتفاع: 46 بكسل؛ #363539؛ العرض: محاذاة العناصر: المركز؛ اللون: #fff؛ حجم الخط: 14 بكسل العرض: 100px;}#header #right{ العرض: flex; align-items: center width: 100px; justify-content: flex-end;}#header #right i{ الحشو لليمين: 6px;}#header #mid{ text-align: center; : flex-start; justify-content:flex-end; justify-content:flex-start; : 1 بكسل صلب #6fb44d؛ الهامش الأيمن: 15 بكسل؛ 5px; الموضع: نسبي;}.chatContentspan{الارتفاع:0; حجم الخط:0; الموضع:مطلق;}.item_me .chatContentspan.bot{ border-width:8px; النمط: متقطع صلب؛ لون الحدود: شفاف شفاف #6fb44d؛ اليمين: -17px؛ الأعلى: 10px؛}.item_me .chatContentspan.top{ border-width:8px; border-style:solid متقطع; border-color:transparent شفافة #a0e75a ; #a0e75a؛ الحد: 1 بكسل صلب #6fb44d؛ 15px; border-radius: 5px; الموضع: نسبي;} .item_you .chatContentspan.bot{ border-width:8px; border-style:solid متقطع; border-color: شفاف #6fb44d شفاف يسار:-17px; top:10px;}.item_you .chatContentspan.top{ border-width:8px; border-style:solid متقطع؛ لون الحدود: شفاف #a0e75a شفاف؛ اليسار: -15 بكسل؛} #footer{ height: 46px; : محاذاة العناصر: اللون: #7f8389؛ space-around;}#sayBtn{ flex: 1; العرض: flex; الهامش: 0 5px; #f4f5f6؛ الحدود: 1 بكسل صلب #bec2c1؛ نصف قطر الحدود: 5 بكسل؛ مركز؛}.activeBtn{ العرض: كتلة؛ محاذاة النص: 1؛ الخلفية: #c6c7ca؛ الحدود: 1px حدود نصف القطر: 5px؛ }. 6px الخلفية: #fff الحدود: 1px الصلبة #999؛ الهامش الأيمن: 15 بكسل؛ الموضع: العرض النسبي: 120 بكسل؛ الحد الأدنى للارتفاع: 20 بكسل؛}.item_audio .chatContentspan.bot{ border-width:8px; border-style: Solid متقطع; #999؛ اليمين:-17 بكسل؛ الأعلى: 10 بكسل؛}.item_audio .chatContentspan.top{ border-width:8px; border-style:solid متقطع; border-color:transparent شفافة right:-15px; top:10px;} .material-icons_wifi{ تحويل: تدوير(90deg); حجم الخط: 22 بكسل;}.redDot{ الخلفية: #f45454; 8 بكسل؛ الارتفاع: 8 بكسل؛ الهامش الأيمن: 10 بكسل؛}

وهنا أود أن أشير إلى نقطتين مهمتين:

1.جزء أتش تي أم أل:

لتوفير المتاعب، لم أقطع الصورة على مستوى البكسل، ولتوفير المتاعب، استخدمت أيقونات svg مباشرة

https://material.io/tools/icons/?style=outline

2. جزء css: استخدم التخطيط المرن. أريد فقط أن أشرح وظيفة Html5، لذلك لا يكتب flex طريقة الكتابة المتوافقة، بالإضافة إلى ذلك، يرجى الانتباه إلى طريقة الكتابة الخاصة بجزء رأس التطبيق، والتي يتم استخدامها بشكل شائع جدًا.

دعونا نتحدث عن الجزء الرئيسي من js.

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, virtual-scale=1.0> <meta http-equiv=X-UA -المحتوى المتوافق=ie=edge> <title>WeChat Voice</title> <link rel=stylesheet href=css/record.css> <script> document.addEventListener('DOMContentLoaded', function () { var oSendBtn = document.getElementById('sendBtn'); var soundClips = document.querySelector('.sound-clips'); var mediaRecorder; var oChatList = document.getElementById(' chatList'); navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia( // القيود - الصوت فقط مطلوب لهذا التطبيق { الصوت: صحيح }) // رد الاتصال الناجح .then(function (stream) { rec(stream }) // رد اتصال خطأ .catch(function (err) { } } else { } function rec(stream) { mediaRecorder = new MediaRecorder(stream); ', function (ev) { ev.preventDefault(); this.innerHTML = 'الإصدار حتى النهاية'; this.classList.add('activeBtn'); mediaRecorder.start(); }, false); oSendBtn.addEventListener('touchend', function (ev) { ev.preventDefault(); this.innerHTML = 'اضغط للتحدث' ; this.classList.remove('activeBtn'); mediaRecorder.stop() }, false); = function (e) { var clipContainer = document.createElement('li'); var audio = document.createElement('audio'); clipContainer.classList.add('item_audio'); clipContainer.innerHTML = ` <div class = redDot></div> <div class=chatContent> <i class=material-icons Material-icons_wifi>wifi</i> <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1.png </div>`; , ''); oChatList.appendChild(clipContainer); var audioURL = window.URL.createObjectURL(e.data); oChatList.addEventListener('touchstart', function (ev) { if (ev.srcElement.parentNode.className!== 'item_audio') return; audio.play(); ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode .children[0]) }, false }; } }, false); id=wrap> <header id=header> <div id=left> <i class=material-icons> chevron_left </i> WeChat(184) </div> <div id=mid>عايدة · وانغ </div > <div id=right> <i class=material-icons> more_horiz </i> </div> </header> <div id=contentWrap> <ul id=chatList> <li class=item_me> <div class=chatContent>هل أنا أكثر شخص تحبه <span class=bot></span> <span class=top></span> </div> <div class=avatar > <img src=images/ava1.png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>اركض يا أخي! (عجل متدحرج) <span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>لن أقول الكثير هنا حسنًا، إليك مجموعة من الأكواد... <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1. png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>الأخ دابين، لماذا أنت جيد جدًا؟ أشعر وكأنني المحيط عندما أراك<span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>قديم أيتها الفتاة يا بني، هل وقعت في حبي... <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1.png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>لا، أنا كذلك دوار البحر، أشعر بالرغبة في التقيؤ عندما أراك... <span class=bot></span> <span class=top></span> </div> </li> </ul> </div> <تذييل id=footer> <div id=keyboard> <i class=material-icons> لوحة المفاتيح </i> </div> <div id=sayBtn> <span id=sendBtn class=sendBtn>اضغط للتحدث</span> < /div> <div id=icon><i class=material-icons> مشاعر_راضية </i></div> <div id=add><i class=material-icons> add_circle_outline </i></div> </footer> </div></body></html>

هناك العديد من النقاط التي يجب الانتباه إليها عند تنفيذ وظيفة تسجيل الفيديو هنا، فلنتحدث عنها واحدة تلو الأخرى.

أول شيء،

 navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia( { audio: true }); // رد الاتصال الناجح .then(function (stream) { rec(stream); }) // رد اتصال خطأ .catch(function (err) { } } else { } ؛

عندما تنظر إلى بعض واجهات HTML5 للتسجيل، ترى هذا

Navigator.getUserMedia()

كن حذرا هذا هو المعيار القديم وقد تم إلغاؤه

navigator.mediaDevices.getUserMedia

لقد تغير الجانب الصوتي في الوسائط المتعددة بتنسيق HTML5 عدة مرات، وهو فوضوي للغاية ولم يتم تنفيذ بعض العلامات في المتصفح، وقد ذبلت قبل أن تزدهر كل ما عليك فعله هو معرفة ما أقوله، لأنك تعلم أن الماضي المهجور ليس له أي فائدة. إذا كان لديك الوقت، فمن الأفضل أن تلعب لعبة LOL أو King of Glory (على الرغم من أنني لا أملك ذلك). لا أفهم الفرق بين الاثنين، لكن هاتين اللعبتين يجب أن تكونا ممتعتين) حسنًا، لم ألعبها من قبل لذا لا أفهم ذلك).

لا تحتاج إلى فهم ما بداخلها، ولا تحتاج إلى معرفة ما هي الوعود وما هي تدفقات الوسائط، كل ما تحتاجه هو معرفة هذا الشيء الوحيد.

الكود أعلاه يعادل تشغيل الصنبور (أو الضغط على زر التسجيل الخاص بالمسجل)، ثم يجب أن يكون لدينا شيء لالتقاط الماء، يمكننا استخدام جهاز طبخ الأرز (أو الشريط في حالة المسجل) لوضعه تحت الصنبور وشاهده وهو يدخل. ci (بمعنى التصوير في مسقط رأسنا)، الكود التالي

mediaRecorder = new MediaRecorder(stream);

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

 mediaRecorder.ondataavailable = function (e) { var clipContainer = document.createElement('li'); var audio = document.createElement('audio'); clipContainer.classList.add('item_audio'); clipContainer.innerHTML = ` < فئة div = redDot></div> <div class=chatContent> <i class=material-icons Material-icons_wifi>wifi</i> <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1.png </ div>`; audio.setAttribute('controls', ''); oChatList.appendChild(clipContainer); window.URL.createObjectURL(e.data); audio.src = audioURL; oChatList.addEventListener('touchstart', function (ev) { if (ev.srcElement.parentNode.className!== 'item_audio') return; play(); ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode.children[0]) }, خطأ شنيع)؛ }؛

في الواقع، يتم تسجيله وبثه.

حسنًا، هل الأمر بسيط جدًا؟ دعني أتحدث عن بعض النقاط حول المشروع بأكمله:

1. يعد وجود بنية معقولة في مخطط القطع شرطًا أساسيًا للقيام بالوظائف لاحقًا. إذا تم تنفيذ البنية بشكل جيد، فسيوفر ذلك المتاعب لاحقًا. فكر في Zhuge Liang، الذي قام ببناء بنية HTML5 قبل أن يكون مجرد ناشئ هناك ثلاثة أقسام.

2. يمكن أن يوفر لك الأساس المتين لـ js وES6 الأصليين أفكارًا مختلفة، على سبيل المثال، أستخدم تفويض الأحداث ومحرك قوالب ES6 هنا. خاصة بالنسبة لتفويض الأحداث، سيكون من الصعب العثور على العقد إذا لم يتم استخدامها. بالإضافة إلى ذلك، سيكون من السهل إفساد الكود إذا تكرر.

3. المعرفة والتكنولوجيا الجديدة ليست معقدة في الواقع، فهي في الواقع بسيطة للغاية. إذا لم تكن التكنولوجيا الجديدة تعمل على تحسين الوظائف وحل مشاكلنا، فلماذا نطور تقنيات جديدة؟ لأن هؤلاء الرجال الكبار ذوي اللحى الكبيرة يشعرون بالقلق من أن يخبرهم رؤسائهم بأن عبء عملهم ليس كافيًا عندما لا يكون لديهم ما يفعلونه؟ التكنولوجيا موجودة لحل المشاكل وجعل حياتنا أفضل.

4. لن يعمل هذا المشروع ضمن نظام IOS 11 أو أقل، لأن هذه الطريقة غير مدعومة قبل IOS 11.2، وتحتاج إلى مطوري تطبيقات IOS المحليين لتقديم الدعم، ولكن لا بأس بذلك في نظام Android. ومن المتوقع أنه في غضون سنوات قليلة سيتم دعم نظام التشغيل IOS محليًا دون تقديم الدعم لك، وبالتالي ستكون كفاءة التطوير لديك أعلى بكثير. لا تعتقد أن هذه التقنيات بعيدة جدًا. HTML5 لن يكون متاحًا تجاريًا إلا لمدة 15 عامًا تقريبًا (كم سنة سيستغرق استخدام vue وreact وangular على نطاق واسع؟). الذين هم على استعداد.

لا يزال هناك العديد من التفاصيل والنقاط التي يجب الانتباه إليها في المشروع بأكمله، وآمل أن تتمكن من كتابتها بنفسك، لأنك تفهم مقالتي وقدرتك على استخدام هذه التكنولوجيا هما شيئان مختلفان أبعد على الطريق المؤدي إلى الواجهة الأمامية (تذكر أن تعود كثيرًا لقراءة انظر ^_^).

تلخيص

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

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