JavaScript Audio player with visualizer plus full source code | Quick programming tutorial

Veröffentlicht am: 10 Mai 2021
auf dem Kanal: Quick Programming

3,682

learn to make an audio player that has a visualizer from scratch using the Javascript Audio API and a little PHP

playlist:
00:00 - Intro
00:56 - Adding HTML
07:25 - Control with JS
15:00 - Creating a playlist
20:00 - Controlling the playlist
28:32 - Direct click on playlist
34:35 - Volume control
41:52 - Seek control
50:10 - Adding a Visualizer
54:25 - Audio API overview
58:50 - Creating audio nodes
01:12:19 - Getting visualizer data
01:15:30 - SVG Visualizer
01:33:00 - Encapsulate the code
01:53:20 - CSS Make it pretty
01:58:10 - Add index page
02:10:00 - Add player as plugin
02:19:00 - Mute button
02:30:00 - Volume level info
02:32:10 - Organizing files
02:35:30 - Final player

icons file:
https://drive.google.com/file/d/1w_C1...

source code:
https://drive.google.com/file/d/16052...

More tutorials:
make a social website from scratch:
   • Social Website from scratch - Intro - Begi...

all crash courses:
   • JSON Crash Course in PHP and JavaScript | ...

code a live chat app in PHP and JavaScript:
   • Live chat app from scratch | intro | Javas...

make an eCommerce website from template:
   • #00 PHP Ecommerce website development | In...

convert an HTML template to PHP website:
   • HTML Template to PHP Website & Login in OO...

simple signup and login system & security:
   • Simple signup and login system with PHP an...

crop images with PHP:
   • PHP - Web Design - How to resize images du...

PHP Object Oriented Programming basics:
   • #00 PHP Object Oriented Programming Basics...

Chart or graph using SVG:
   • HTML Chart using SVG, CSS & PHP tutorial -...

Responsive web design:
   • Responsive Web Design tutorial using HTML,...

clean pretty URLs:
   • PHP - How to get pretty or clean urls/link...

support me on patreon:
  / quickcode

my facebook:
www.facebook.com/quickcode

Auf dieser Seite können Sie das Online-Video JavaScript Audio player with visualizer plus full source code | Quick programming tutorial mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Quick Programming 10 Mai 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 3,682 Mal angesehen und es wurde von 78 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

132