ژوپین
  1. خانه
  2. بلاگ
  3. آموزش
  4. فرانت اند(اhtml-css-javascript)
  5. ضبط و رکورد صدا در سایت با html و javascript و ذخیره در هاست

ضبط و رکورد صدا در سایت با html و javascript و ذخیره در هاست

آموزشفرانت اند(اhtml-css-javascript)

نکات مهم این مطلب

ضبط صدا در سایت و ذخیره در هاست

وویس گذاشتن در سایت 

رکورد یا ضبط صدا در وب سایت با html - javascript - jquery و ذخیره در هاست یا سرور به کمک ایجکس (Ajax)

در این آموزش از navigator.mediaDevices.getUserMedia و MediaRecorder در جاوااسکریپت استفاده میکنیم


در بسایری از نرم افزارها مانند تلگرام و وانس اپ و ... مشاهده کردید دکمه ای موجود است که میتوان صدای خود را ضبط کنید و برای مخاطب ارسال کنید.


خبر خوبی هست و اون اینه که در وب سایت خود که ساختار ui آن با html 5 و جکوئری یا جاوااسکریپت هست (البته jquery با javascript متفاوت است و یک کتابخانه سهل الستفاده از جاوااسکریپت محسوب میشود) میتوان به راحتی صدا ضبط کرد و آن را در هاست یا سرور خود مانند آپلود یک فایل ذخیره کرد . دقیقا مانند آپلود یک فایل .


ژوپین از این پس تمام کد های آموزشی را در codepen تایپ میکند زیرا نوشتن کد ها در این مکان بسیار باعث به هم خوردن ux و زیبایی نوشته میشود. پس برای مشاهده کد ها کافیست لینک مربوطه را بزنید و کد ها را تمیز و مرتب ببینید و گاها تست هم کنید.


 


در ابتدا توجه کنید لازم است وب سایت شما کتابخانه jquery را داشته باشد که 99 درصد وب سایت ها این کتابخانه را دارند. 


 


لینک زیر را بزنید و تمام کدهای html و css و javascript را ببینید و در پروژه خود استفاده کنید.


 


https://codepen.io/zhupin/pen/abPvMdx


 


همچنین کل پروژه آماده نوشته شده در یک فایل html را در لینک زیر دریافت کنید . فایل زیپ است و پس از استخراج کافیست فایل html را اجرا کنید (به صورت خودکار با مرورگر باز میشود نیاز به کار خاصی نیست) . فقط بخش آپلود آن کار نخواهد کرد زیرا برای مبحث آپلود باید در پروژه ای استفاده شود و آدرس محل آپلود داده شود که نیاز به هاست یا xampp و اینگونه موارد است و به صورت استاتیک قسمت آپلود کار نمیکند. هرچند همه شما عزیزان در پروژه وب سایت خود قرار است استفاده کنید نه استاتیک.


 


دانلود فایل آماده


 


لطفا دیدگاه خود را بیان کنید و پست را لایک کنید تا برای ما دلگرمی باشد. 


 


 


نظرات



ارسال نظر

جهت قرار دادن کد در متن کامنت ، متن مورد نظر را انتخاب کنید و دکمه بالا را بزنید

گفتگو با پشتیبان