(1) مقدمة
في البوست السابق اتكلمنا عن الـaudio format اللي الواحد يستخدمه وهو بيعمل فيتشر فويس نوت .. ووصلنا لـconclusion إننا هنحتاج نحول من WebM لـM4A، أو عامةً من WebM لأي فورمات تاني supported في الموبايل وكويس.
البوست ده بيجاوب على سؤال: هل ينفع أعمل التحويل ده في الـfrontend، ولا لازم أعمله في الـbackend؟
أو حتى: هل فيه أي frontend library بتـrecord وتطلع أي حاجة غير WebM؟
فخلونا كده نعدي على الـbrowser-based npm libraries في الحتة دي ونشوف إيه الـconclusion.
(اللينك في اسم الـlibrary، بالمناسبة)
دي library استعمالها جميل وكل حاجة. بس للأسف حالياً مابتـsupportـش غير التحويل لـWAV.
ده للأسف بيخليها - حالياً - مش مفيدة أوي لإن الـWAV حجمه كبير جداً وبياخد وقت كبير في الـupload، عن تجربة.
(3) Kagami/vmsg
الـlibrary دي بتـrecord وتطلع لك MP3 — وده فورمات widely-supported وحجمه كويس فعلاً.
ميزاتها:
مشهورة.
حجمها صغير فينفع تستعمل في الـfrontend.
عيوبها:
الواحد مش حاسسها نضيفة وisolated وكده .. هي جاية بالـUI بتاعها وده مش ألطف حاجة. ماجربتش أستعملها الحقيقة.
للعلم بالشئ .. هي شغالة عن طريقة إنها بتستعمل مشروع LAME (an MP3 encoder) — مـcompileـة LAME لـWebAssembly وبتستعمله.
وعامةً هتلاقي أغلبية الـlibraries اللي ليها علاقة بالـmedia conversion (أو الـMP3)،في أي لغة برمجة، هتلاقيها معتمدة في الآخر إما على ffmpeg أو LAME.
الـlibrary دي بتستعمل Kagami/vmsg (الـlibrary السابقة)، وبتديك API مش مربوط بـUI.
للأسف بالتبعية هتبقى وارثة نفس عيوب Kagami/vmsg إن بقى عندك في الـdependencies library حاسسها مش نضيفة ومش isolated.
وفيها عيب كمان ماعرفش موجود في Kagami/vmsg ولا لأ: إنها شكلها محتاجة حوارات تبع الـWebWorkers، ومش عارف الـsetup بتاع الكلام ده هيبقى سهل في React (أو غيرها) ولا لأ.
(5) Kagami/ffmpeg.js
نفس الراجل (أو الست) اللي عامل Kagami/vmsg، المرة دي مـcompile ffmpeg لـWebAssembly وبيستعمله.
للأسف حجمها يبدو كبير عن إني أستعملها في الـfrontend، والله أعلم.
+ إن استعمالها يبدو مش سلس أوي..
(6) ffmpeg & similar
دي node libraries مش browser-based && معتمدة إن برنامج ffmpeg يكون installed عالـmachine وهي بتندهه كـCLI.
وبالمناسبة، نفس الموضوع هتلاقيه في أغلب لغات البرمجة. ماظنش هتلاقي libraries بتحول مكتوبة من الصفر، هتلاقي أغلبها أو كلها بتنده ffmpeg كـcommandline.
(7) الصورة الكبيرة/الملخص
فالصورة الكبيرة لتحويل الـaudio formats أو تطليع حاجة غير WebM كالتالي:
مفيش حاجة built-in في الـbrowser APIs بتطلع حاجة غير WebM أو بتحول الـaudio formats.
أي frontend library في الحتة دي هتلاقيها في الآخر معتمدة على compiled WebAssembly libraries من لغات تانية، اللي هما LAME وffmpeg.
Kagami/vmsg: بتستعمل LAME. عيبها إنها جاية بالـUI بتاعها ومش isolated كده.
mp3-mediarecorder: بتستعمل Kagami/vmsg، فالواحد مش عايز عدم الـisolation ده في الـdependencies عامةً && فيه حوارات WebWorker.
Kagami/ffmpeg.js: حجمه كبير والله أعلم وتحسه مش سلس أوي برده في التعامل.
ffmpeg & similar: دول أصلاً لـnode مش للـbrowser (ومعتمدين على وجود ffmpeg كـCLI tool عالـmachine، مش WebAssembly)
mp3-mediarecorder: قلنا إنه مابيـsupportـش حالياً غير WAV فمالهاش لزمة لإن حجمه كبير جداً.
(8) Conclusion
فالـconclusion إني الحقيقة مالقيتش حاجة تبدو best practice وحل standard كده في الـfrontend لتحويل الـaudio formats، أو recording في حاجة غير WebM.
لو زنقت معايا خالص، ساعتها ممكن أستعمل Kagami/vmsg (وربما حتى mp3-mediarecorder) (وده بعد مذاكرتهم ومراجعتهم أكتر) .. بس يعني لو عندي بديل إني أحول في الـbackend، هاعمل كده.
فبس .. الـconclusion يعني إن لأ الـecosystem مش كويس في التحويل في الـfrontend أو التسجيل لحاجة غير الـWebM.
البوست القادم، إن شاء الله، ممكن أكتب عن كيفية التحويل في الـbackend. (spoiler: عن طريق أي ffmpeg wrapper library في أي لغة).
طبعاً مش محتاج أقول إن في الغالب فيه كلام مش دقيق أو غلط في البوست ده. أنا مجرد بصيت عالـlibraries من برا ماجربتهمش بنفسي، بسبب الـconclusion اللي فوق.
شكراً لقرايتكم.
سؤال.. هل صح (أو "يُفضل" يعني لأن مفيش صح وغلط في الشغلانة دي) إن التحويل دا يحصل في الباك إند بدل الفرونت إند؟ بالذات إن دي حاجة هتعتمد على بروسيسور الجهاز اللي بيعمل التاسك دي، ففي الحالة دي هيبقا موبايل العميل ودي حاجة مفيش عليها أي ضمانات من أي نوع.