آموزش ساخت یک پخش کننده موسیقی با استفاده از HTML، CSS، جاوا اسکریپت

Making A Music Player Using HTML,CSS, JavaScript

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:

سلام، این Nishant است و من معلم شما برای این کلاس خواهم بود.

برای طراحی یا توسعه وب، 3 فناوری ضروری وجود دارد، HTML، CSS، و جاوا اسکریپت.

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

شروع فایل‌ها: https://github.com/nishant0811/MusicPLayer

پروژه ای که در این دوره خواهیم ساخت، یک پخش کننده موسیقی جاوا اسکریپت خواهد بود.

همه ابزارهای مورد نیاز برای دانلود رایگان هستند، من از موارد زیر استفاده خواهم کرد:

Atom: https://atom.io/

مرورگر وب کروم: 

ما با ایجاد رابط کاربری با HTML شروع می کنیم. سپس با استفاده از CSS یک استایل را اعمال می کنیم.

سپس جاوا اسکریپت را اضافه می کنیم، اینجاست که جادوی واقعی اتفاق می افتد!

شما به مواردی مانند:

متمایل خواهید شد
  • ایجاد رابط های HTML
  • یک ظاهر طراحی با Css
  • ترکیب جاوا اسکریپت و پیوند دادن فایل های خارجی
  • دستکاری DOM
  • انجام محاسبات و ذخیره سازی در متغیرها
  • آرایه های جاوا اسکریپت
  • حلقه
  • پخش کننده صوتی HTML5
  • نحوه ایجاد عناصر سفارشی برای کنترل صدا
  • تنظیم منبع صدا و تصویر به صورت پویا
  • محاسبه مقدار عنصر پیشرفت HTML
  • تابع تصادفی
  • عملکرد کف
  • چگونه کد خود را اشکال زدایی کنیم
  • مخلوط کردن لیست پخش
  • و خیلی بیشتر

بنابراین اگر به دنبال ادامه دادن و به کارگیری مهارت های خود با استفاده از پروژه های واقعی هستید، شما را در کلاس خواهم دید!

سلام،

پروژه شما این خواهد بود:

  1. پخش کننده موسیقی تدریس شده در کلاس را بسازید
  2. تصویر را دایره ای کنید و آن را در مرکز تراز کنید
  3. عنوان آهنگ را از راست حرکت دهید و آن را بالای کنترلرها قرار دهید
  4. عنوان باید فقط زمانی نشان داده شود که موسیقی پخش شود
  5. هنگام پخش موسیقی، تصویر باید بچرخد

من حدس می‌زنم همین باشد.

اگر قادر به انجام آن نیستید، مشکلی وجود ندارد، فقط به من اطلاع دهید. من یک سخنرانی در مورد آن خواهم داشت. فقط هر چیزی را که دوست دارید بسازید. منتظر پروژه های شما

هستیم

سرفصل ها و درس ها

درس ها Lessons

  • جزئیات پروژه (بعدی چیست) Project Details (What's next)

  • HTML برای پروژه HTML For Project

  • پرونده پایان آهنگ Song Ending Case

  • عملکرد نوار پیشرفت Progress Bar Function

  • مبانی اصلی سازی DOM Basics of DOM mainpulation

  • توابع مکث را پخش کنید Play Pause Functions

  • توابع بعدی و قبلی Next And Previous Functions

  • عملکرد قطع و وصل کردن Mute And Shuffle Function

  • استایل دادن به صفحه Styling the Page

  • مقدمه Introduction

نمایش نظرات

Skillshare (اسکیل شیر)

اسکیل‌شر یک پلتفرم آموزشی آنلاین است که به میلیون‌ها افراد در سراسر جهان امکان یادگیری مهارت‌های جدید را فراهم می‌کند. این پلتفرم با ارائه دوره‌های متنوع در زمینه‌هایی از جمله هنر و طراحی، فناوری، کسب و کار، و زندگی موفق، به کاربران خود این امکان را می‌دهد تا به صورت آنلاین به یادگیری بپردازند.

یکی از ویژگی‌های منحصر به فرد سکیل‌شر، ارائه دوره‌های تدریس شده توسط صاحبان مهارت‌ها و افراد موفق در زمینه‌های مختلف است. این امر باعث می‌شود که کاربران از تجربیات و دانش عملی افرادی که در حوزه‌های مورد نظرشان موفق عمل کرده‌اند، بهره‌مند شوند و بهترین اطلاعات را برای بهبود مهارت‌های خود دریافت کنند. به این ترتیب، سکیل‌شر نه تنها یک پلتفرم آموزشی است، بلکه یک جامعه آموزشی است که افراد را به اشتراک گذاری دانش و تجربیات تشویق می‌کند و به آنها کمک می‌کند تا در مسیر پیشرفت و موفقیت خود ادامه دهند.

آموزش ساخت یک پخش کننده موسیقی با استفاده از HTML، CSS، جاوا اسکریپت
جزییات دوره
1h 30m
10
Skillshare (اسکیل شیر) Skillshare (اسکیل شیر)
(آخرین آپدیت)
18
4 از 5
دارد
دارد
دارد
Nishant Raj
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Nishant Raj Nishant Raj

بهترین نسخه از خودت باش

سلام، من Nishant هستم.

من یک دانشجوی کالج و یک توسعه دهنده وب آزاد هستم. من واقعا عاشق کدنویسی و آموزش هستم. من از کلاس 8 کدنویسی می کنم.

مهارت هایی که می دانم:

python

html

css

javascript

node.js

mongodb

c++

c

جاوا

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

بهترین ها!

متشکرم!