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

Published: 10 May 2021
on channel: 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

On this page of the site you can watch the video online JavaScript Audio player with visualizer plus full source code | Quick programming tutorial with a duration of hours minute second in good quality, which was uploaded by the user Quick Programming 10 May 2021, share the link with friends and acquaintances, this video has already been watched 3,682 times on youtube and it was liked by 78 viewers. Enjoy your viewing!

132