Code With Harsh
Code With Harsh
  • 77
  • 21 281
Build a Custom Music Player with Waveform using JavaScript | WaveSurfer API Tutorial | Part 2
Learn to create a stunning custom music player with waveform visualization using JavaScript and the powerful WaveSurfer API. In this tutorial, we'll build a feature-rich music player with:
- Waveform Visualization
- Play/Pause
- Next/Previous
- Music List
- Loop, Repeat, Shuffle
- Volume Management
►Part 1 - ua-cam.com/video/U8ALc2RPkzk/v-deo.htmlsi=q2RpuQhBaIB2YbrW
Source Code 👇
[Code will be available on buymeacoffee .com page soon]
Github:- github.com/webdevharsh
X:- webdevharsh
Instagram:- codewithharsh_
Timestamps
-----------------------
- Recap (0:00)
- Setting up Data.js file (0:20)
- Loading Music data from data.js (2:48)
- Creating Waveform using WaveSurfer API (8:57)
- Implementing Music Play/Pause Button (12:02)
- Updating Music Current Time and Total Duration (17:46)
- Adding Next Music Button Functionality (24:51)
- Adding Previous Music Button Functionality (31:20)
- Implementing Music Volume Control (33:54)
- Conclusion and Demo (45:30)
- Outro (47:03)
Keywords:
--------------------
Music Player Tutorial
JavaScript Music Player
WaveSurfer API
Custom Music Player
Music Player with Waveform
Web Development
Audio Player
HTML5 Music Player
CSS3 Music Player
Responsive Music Player
Mobile-Friendly Music Player
JavaScript Tutorial
Web Development Tutorial
Music Player Development
Audio Visualization
Waveform Visualization
Open-Source Music Player
Custom Music Player with Waveform Visualization
JavaScript Music Player Tutorial for Beginners
Build a Music Player with Playlist and Volume Control
Responsive Music Player with Waveform Visualization
Mobile-Friendly Music Player with JavaScript
Create a Custom Music Player with Wave Surfer API
Music Player Development with JavaScript and HTML5
JavaScript Audio Player with Waveform Visualization
Customizable Music Player with Waveform and Playlist
Waveform Visualization for Audio Players
JavaScript Waveform Visualization Library
Wave Surfer API Tutorial for Waveform Visualization
Custom Waveform Visualization for Music Players
Waveform Visualization for Mobile Devices
Responsive Waveform Visualization for Music Players
JavaScript Waveform Visualization for Audio Files
Waveform Visualization with Canvas and JavaScript
Customizable Waveform Visualization for Music Players
Waveform Visualization for Web Audio Players
JavaScript Music Player Development Tutorial
Web Development Tutorial for Music Players
JavaScript and HTML5 Music Player Development
Responsive Web Design for Music Players
JavaScript and CSS3 Music Player Styling
Web Audio API Tutorial for Music Players
JavaScript Music Player with API Integration
Custom Music Player with JavaScript and PHP
JavaScript Music Player with MySQL Database
Web Development Best Practices for Music Players
Audio Player Development with JavaScript
Music Streaming API Integration with JavaScript
Custom Audio Player with Waveform Visualization
JavaScript Audio Processing Tutorial
Music Information Retrieval with JavaScript
Audio Analysis with JavaScript and Web Audio API
Music Recommendation System with JavaScript
Audio Visualization with JavaScript and Canvas
Music Player with Equalizer and Waveform
JavaScript Audio Effects Tutorial
Mobile-Friendly Music Player with JavaScript
Responsive Music Player Design with CSS3
JavaScript Music Player for Android and iOS
Mobile Music Player Development with JavaScript
Responsive Waveform Visualization for Mobile
JavaScript Music Player with Touch Events
Mobile Music Player with Gesture Recognition
Responsive Music Player with jQuery Mobile
JavaScript Music Player for Windows Phone
Mobile Music Player Development with PhoneGap
Open-Source Music Player with JavaScript
Custom Music Player with API Integration
JavaScript Music Player with SoundCloud API
Music Player with Spotify Integration
JavaScript Music Player with UA-cam API
Custom Music Player with Facebook Login
Custom Music Player with Lyrics Display
Background Music Credits 🎶
----------------------------------------------
Song: Ehrling - You and Me (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
Video Link: ua-cam.com/video/8HJSl7AiJNg/v-deo.html
------
Track: Ikson - We Are Free [Official]
Music provided by Ikson®
Listen: ua-cam.com/video/DnPUq5qBZxk/v-deo.html
-------
A Magical Journey Through Space by Leonell Cassio
soundcloud.com/leonellcassio
Creative Commons - Attribution-ShareAlike 3.0 Unported - CC BY-SA 3.0
Free Download / Stream: bit.ly/a-magical-journey-through-space
Music promoted by Audio Library ua-cam.com/video/DRwYhxVNwzU/v-deo.html
----------------------------------------------
Переглядів: 97

Відео

Build a Custom Music Player with Waveform using JavaScript | WaveSurfer API Tutorial | Part 1
Переглядів 14914 днів тому
Learn to create a stunning custom music player with waveform visualization using JavaScript and the powerful WaveSurfer API. In this tutorial, we'll build a feature-rich music player with: - Waveform Visualization - Play/Pause - Next/Previous - Music List - Loop, Repeat, Shuffle - Volume Management Source Code 👇 [Code will be available on buymeacoffee .com page soon] Github:- github.com/webdevh...
Text to Speech Converter in HTML CSS & Javascript | Code With Harsh
Переглядів 33921 день тому
Text to Speech Converter in HTML CSS & Javascript | Text to Speech Converter in Javascript | Code With Harsh Source Code 👇 buymeacoffee.com/codewithharsh_/source-code-text-speech-converter-html-css-javascript Github:- github.com/webdevharsh X:- webdevharsh Instagram:- codewithharsh_ Queries:- Text to Speech Converter Using Js Text to Speech Converter Using Html Css Js...
Alarm Clock in HTML CSS & Javascript | Alarm Clock in Javascript | Code With Harsh
Переглядів 232Місяць тому
Alarm Clock in HTML CSS & Javascript | Alarm Clock in Javascript | Code With Harsh Source Code ▼ buymeacoffee.com/codewithharsh_/source-code-alarm-clock-html-css-javascript Github:- github.com/webdevharsh X:- webdevharsh Instagram:- codewithharsh_ Alarm Image link ▼ drive.google.com/file/d/19dkJgj5M_3PzBFnSbI5M0YDGByK8srRO/view?usp=drivesdk Beep Sound link ▼ drive.goo...
Whack a Mole Game in HTML CSS & Javascript | Whack a Mole Game in Javascript | Code With Harsh
Переглядів 152Місяць тому
Whack a Mole Game in HTML CSS & Javascript | Whack a Mole Game in Javascript | Code With Harsh Source Code 👇 buymeacoffee.com/codewithharsh_/source-code-whack-mole-game-html-css-javascript Github:- github.com/webdevharsh X:- webdevharsh Instagram:- codewithharsh_ Mole Image link 👇 drive.google.com/file/d/1sH5C1a_xPkdeGpJjzp4DH3koH_R_U6SG/view?usp=drivesdk Queries:- Wh...
Tic Tac Toe Game in HTML CSS & Javascript | Tic Tac Toe Game in Javascript | Code With Harsh
Переглядів 1,8 тис.2 місяці тому
Tic Tac Toe Game in HTML CSS & Javascript | Tic Tac Toe Game in Javascript | Code With Harsh Source Code 👇 buymeacoffee.com/codewithharsh_/source-code-tic-tac-toe-game-html-css-javascript Github:- github.com/webdevharsh X:- webdevharsh Instagram:- codewithharsh_ Queries:- Tic Tac Toe Game Using Js Tic Tac Toe Game Using Html Css Js Tic Tac Toe Game Cwh Tic Tac Toe Gam...
Weather App with 5 Day Forecast in HTML CSS & Javascript | Code With Harsh
Переглядів 2482 місяці тому
Weather App with 5 Day Forecast in HTML CSS & Javascript | Weather App with 5 Day Forecast in Javascript | Code With Harsh Source Code 👇 buymeacoffee.com/codewithharsh_/source-code-weather-app-5-day-forecast-html-css-javascript Github:- github.com/webdevharsh X:- webdevharsh Instagram:- codewithharsh_ Queries:- Weather App with 5 Day Forecast Using Js Weather App with...
Custom Music Player in HTML CSS & Javascript | Custom Music Player in Javascript | Code With Harsh
Переглядів 1542 місяці тому
Custom Music Player in HTML CSS & Javascript | Custom Music Player in Javascript | Code With Harsh Part - 1 👇 ua-cam.com/video/gbhCAYF0ZM8/v-deo.htmlsi=rTKcHkM3v_ruoNGU Source Code 👇 buymeacoffee.com/codewithharsh_/source-code-custom-music-player-html-css-javascript Github:- github.com/webdevharsh X:- webdevharsh Instagram:- codewithharsh_ Timecodes 0:00 - Intro 0:17 ...
Custom Music Player in HTML CSS & Javascript | Custom Music Player in Javascript | Code With Harsh
Переглядів 1572 місяці тому
Custom Music Player in HTML CSS & Javascript | Custom Music Player in Javascript | Code With Harsh Part - 2 👇 ua-cam.com/video/z-0uut70KTU/v-deo.html Source Code 👇 buymeacoffee.com/codewithharsh_/source-code-custom-music-player-html-css-javascript Github:- github.com/webdevharsh X:- webdevharsh Instagram:- codewithharsh_ Images Used in this Project ⬇ drive.google.com/...
Mini Music Player in HTML CSS & Javascript | Mini Music Player in Javascript | Code With Harsh
Переглядів 1992 місяці тому
Mini Music Player in HTML CSS & Javascript | Mini Music Player in Javascript | Code With Harsh Source Code 👇 buymeacoffee.com/codewithharsh_/source-code-mini-music-player-html-css-javascript Github:- github.com/webdevharsh X:- webdevharsh Instagram:- codewithharsh_ Images Used in this Project ⬇ drive.google.com/file/d/1sosvx9KRO0WVDvmzGq5DMpTUDo7xkrud/view?usp=drivesd...
Create a Random Color Palette Generator in HTML CSS & Javascript | Code With Harsh
Переглядів 1232 місяці тому
Create A Random Color Palette Generator in HTML CSS & Javascript | Code With Harsh Source Code 👇 buymeacoffee.com/codewithharsh_/source-code-random-color-palette-generator-html-css-javascript Github:- github.com/webdevharsh X:- webdevharsh Instagram:- codewithharsh_ Background Music Credits 🎶 Track: Ikson - We Are Free [Official] Music provided by Ikson® Listen: ua-ca...
Superhero Search App in HTML CSS & Javascript | Api Projects | Code With Harsh
Переглядів 2163 місяці тому
Superhero Search App in HTML CSS & Javascript | Api Projects | Code With Harsh Source Code 👇 buymeacoffee.com/codewithharsh_/source-code-superhero-search-app-html-css-javascript Github:- github.com/webdevharsh X:- webdevharsh Instagram:- codewithharsh_ Demo Image Used in this Project ⬇️ drive.google.com/file/d/1tlg91gSLrwZGhG8yEfWVlpbbRbGjssoh/view?usp=drivesdk Timeco...
Create a Netflix Login Page in HTML and CSS | Netflix Login Page Clone in HTML and CSS
Переглядів 1583 місяці тому
Create a Netflix Login Page in HTML and CSS | Netflix Login Page Clone in HTML and CSS | Code With Harsh Source Code 👇 buymeacoffee.com/codewithharsh_/source-code-netflix-login-page-html-css Github:- github.com/webdevharsh X:- webdevharsh Instagram:- codewithharsh_ Instagram:- javascriptpro_ Images Used in this Tutorial ⬇ drive.google.com/file/d/1tN-R5U...
Music Player with Waveform in HTML CSS & Javascript | Code With Harsh
Переглядів 2183 місяці тому
Music Player with Waveform in HTML CSS & Javascript | Code With Harsh Source Code 👇 buymeacoffee.com/codewithharsh_/source-code-music-player-waveform-html-css-javascript Github:- github.com/webdevharsh X:- webdevharsh Instagram:- codewithharsh_ Images Used in this Project ⬇ drive.google.com/file/d/1sosvx9KRO0WVDvmzGq5DMpTUDo7xkrud/view?usp=drivesdk Musics Used in this...
Pokemon Guide App in using HTML CSS & Javascript | Pokedex in Javascript | Code With Harsh
Переглядів 4443 місяці тому
Pokemon Guide App in using HTML CSS & Javascript | Pokedex in Javascript | Code With Harsh Source Code 👇 buymeacoffee.com/codewithharsh_/source-code-pokemon-guide-app-html-css-javascript Github:- github.com/webdevharsh X:- webdevharsh Instagram:- codewithharsh_ Queries:- Pokemon Guide App Using Js Pokemon Guide App Using Html Css Js Pokemon Guide App Cwh Pokemon Guide...
Email Validation in HTML CSS & Javascript | Email Validation in Javascript | Code With Harsh
Переглядів 2343 місяці тому
Email Validation in HTML CSS & Javascript | Email Validation in Javascript | Code With Harsh
Animated SignIn & SignUp Form using HTML CSS & Javascript | Code With Harsh
Переглядів 9583 місяці тому
Animated SignIn & SignUp Form using HTML CSS & Javascript | Code With Harsh
Confirm Password Validation Using Html Css And Javascript | Code With Harsh
Переглядів 3523 місяці тому
Confirm Password Validation Using Html Css And Javascript | Code With Harsh
Cool Movie Card using HTML & CSS | Cool Movie Card using Pure CSS | Code With Harsh
Переглядів 1233 місяці тому
Cool Movie Card using HTML & CSS | Cool Movie Card using Pure CSS | Code With Harsh
Loan Calculator using HTML CSS & Javascript | Loan Calculator using Javascript | Code With Harsh
Переглядів 3383 місяці тому
Loan Calculator using HTML CSS & Javascript | Loan Calculator using Javascript | Code With Harsh
Currency Converter using HTML CSS & Javascript | Currency Converter using Javascript | CodeWithHarsh
Переглядів 1 тис.4 місяці тому
Currency Converter using HTML CSS & Javascript | Currency Converter using Javascript | CodeWithHarsh
Pomodoro App using HTML CSS & Javascript | Pomodoro App using Javascript | Code With Harsh
Переглядів 3854 місяці тому
Pomodoro App using HTML CSS & Javascript | Pomodoro App using Javascript | Code With Harsh
Language Translator App using HTML CSS & Javascript | Code With Harsh
Переглядів 2874 місяці тому
Language Translator App using HTML CSS & Javascript | Code With Harsh
Todo List App using HTML CSS & Javascript | Todo List App using Javascript | Code With Harsh
Переглядів 4994 місяці тому
Todo List App using HTML CSS & Javascript | Todo List App using Javascript | Code With Harsh
Movie Guide App using HTML CSS & Javascript | Movie Guide App using Javascript | Code With Harsh
Переглядів 1844 місяці тому
Movie Guide App using HTML CSS & Javascript | Movie Guide App using Javascript | Code With Harsh
Digital Clock using HTML CSS & Javascript | Digital Clock using Javascript | Code With Harsh
Переглядів 8594 місяці тому
Digital Clock using HTML CSS & Javascript | Digital Clock using Javascript | Code With Harsh
Snake Game using HTML CSS & Javascript | Snake Game using Javascript | Code With Harsh
Переглядів 9364 місяці тому
Snake Game using HTML CSS & Javascript | Snake Game using Javascript | Code With Harsh
Analog Clock using HTML CSS & Javascript | Analog Clock using Javascript | Code With Harsh
Переглядів 2064 місяці тому
Analog Clock using HTML CSS & Javascript | Analog Clock using Javascript | Code With Harsh
Animated Login & Registration Form using HTML CSS & Javascript | Code With Harsh
Переглядів 5504 місяці тому
Animated Login & Registration Form using HTML CSS & Javascript | Code With Harsh
Snake Water Gun Game using HTML CSS & Javascript | Snake Water Gun Game using Javascript
Переглядів 2245 місяців тому
Snake Water Gun Game using HTML CSS & Javascript | Snake Water Gun Game using Javascript

КОМЕНТАРІ

  • @MissRedWine
    @MissRedWine 8 днів тому

    You inspire me to code. Great job on this 💜

  • @codewithharsh_
    @codewithharsh_ 11 днів тому

    So, to recap: in Part 1, we covered the design aspect of our music player. If you haven't checked it out yet, go watch it now, here's the link 👇 ►Part 1 - ua-cam.com/video/U8ALc2RPkzk/v-deo.htmlsi=q2RpuQhBaIB2YbrW In this video (Part 2), we're diving into the core features: - Waveform magic with WaveSurfer API - Play/Pause button functionality - Current and total time updates - Next/Prev music buttons - Volume management slider And, stay tuned for Part 3, where we'll tackle the advanced features: - Music list with select and play functionality - Loop, repeat, shuffle functionality Thanks for watching, and I'll catch you in the next video!"

  • @imranquran
    @imranquran 15 днів тому

    WOW what a thing IT's good

  • @hsanmyintoo7252
    @hsanmyintoo7252 24 дні тому

    How to make a code of speech to text in HTML,CSS

  • @vigneshdharani1334
    @vigneshdharani1334 25 днів тому

    Super bro

  • @hotsoles
    @hotsoles Місяць тому

    give source codeeee

    • @codewithharsh_
      @codewithharsh_ Місяць тому

      Source code link in the description 🙌🏻

  • @codewithandres
    @codewithandres Місяць тому

    Buen proyecto ❤

  • @ArmandoRamirez-yp9nn
    @ArmandoRamirez-yp9nn Місяць тому

    Can you make a project using the Yugioh API?

  • @nbfidly771
    @nbfidly771 Місяць тому

    Where can I download the demo image? Or what is the image size?

  • @devSackey
    @devSackey 2 місяці тому

    Nice Project

  • @codewithharsh_
    @codewithharsh_ 2 місяці тому

    Custom Music Player[Part - 2] ►ua-cam.com/video/z-0uut70KTU/v-deo.html

  • @John_conner17
    @John_conner17 2 місяці тому

    Wow🎉🎉🎉

  • @justalittledropofwater
    @justalittledropofwater 2 місяці тому

    This is really so underrated. I am really thankful to you I've searched for other videos too but I had to deal with a lot of problems. It was the first time it worked so THANK YOU so much! I hope you add why we used a couple coding lines so it gets better but it was perfect!

  • @codewithharsh_
    @codewithharsh_ 3 місяці тому

    So guys , in this tutorial I have used a few lines of javascript for password toggling Timestamp:- 30:23 to 33:02 If you face any problem related to this project then you can message me on Instagram, Instagram page link is in the description.

  • @mikhaildolgov
    @mikhaildolgov 3 місяці тому

    😎👍

  • @ClubMedia
    @ClubMedia 3 місяці тому

    رائع جداً استمر

  • @mikhaildolgov
    @mikhaildolgov 3 місяці тому

    😎👍super!

  • @mikhaildolgov
    @mikhaildolgov 3 місяці тому

    More )

  • @amroeoemar534
    @amroeoemar534 3 місяці тому

    Love it. If possible, creating a bulk password generator for more than 1000 accounts would be very interesting. Thank you for the inspiring guide...

  • @yolutobadi6820
    @yolutobadi6820 3 місяці тому

    Thanks a lot bro....i am from indonesia

  • @galaxythroughNASA
    @galaxythroughNASA 3 місяці тому

    Great video, It helped me to understand the fetching method of API.

  • @T2Dagent
    @T2Dagent 3 місяці тому

    ❤ nice brother 😊

  • @chandansahoo6642
    @chandansahoo6642 3 місяці тому

    Great 😊

  • @mr__mg5549
    @mr__mg5549 4 місяці тому

    Super bro ✨🩵

  • @amirhakimi7080
    @amirhakimi7080 4 місяці тому

    beautiful

  • @programming-zm2th
    @programming-zm2th 4 місяці тому

    keep going

  • @AstaDemi
    @AstaDemi 4 місяці тому

    Great Work❤

  • @saice605
    @saice605 4 місяці тому

    I just hate it when you post 😞 silent videos, I can't subscribe never, let me work with real professionals 😔

  • @VikramNYal
    @VikramNYal 5 місяців тому

    Can you teach me flexbox ❤

  • @Rocksolid583
    @Rocksolid583 5 місяців тому

    Nice but violate DRY rule

  • @MuhammadJunaid-d5w
    @MuhammadJunaid-d5w 5 місяців тому

    Good

  • @MuhammadJunaid-d5w
    @MuhammadJunaid-d5w 5 місяців тому

    Very informative Good

  • @gahal4076
    @gahal4076 5 місяців тому

    Probably one of the best JS projects for a beginner that I've seen on UA-cam. It actually showcases the basic but important things in the way literally anyone could understand. Great job!

  • @KenNel-qk7hh
    @KenNel-qk7hh 5 місяців тому

    Thanks, a lot for the lesson. that's interesting ❤❤💖💖

  • @ankanmukherjee5589
    @ankanmukherjee5589 5 місяців тому

    Can you share the source code?

    • @codewithharsh_
      @codewithharsh_ 5 місяців тому

      Bro my all javascript projects source codes available on my buymeacoffee. com page. Link in video description!! 🙌🏻💚

  • @sanchitsharma2793
    @sanchitsharma2793 6 місяців тому

    Thankyou for your hard work bro🙏

  • @bronoxpinto2966
    @bronoxpinto2966 6 місяців тому

    Hello, this is very cool, how can you put it on a website?

  • @studioak90
    @studioak90 6 місяців тому

    very nic tutorialss that was

  • @shivugg
    @shivugg 6 місяців тому

    ಹೌದು ಹುಲಿಯ

  • @AntyScan
    @AntyScan 6 місяців тому

    Nice Work Bro

  • @AshishGupta-899
    @AshishGupta-899 6 місяців тому

    Nice Work

  • @heidardotdev
    @heidardotdev 6 місяців тому

    hello my friend your content is amazing please continue and we'll support you. 💞💞

  • @twoy4637
    @twoy4637 6 місяців тому

    Thank you so much bro you are a life saver

  • @AshishGupta-899
    @AshishGupta-899 6 місяців тому

    Nice ❤

  • @gounimurali8688
    @gounimurali8688 6 місяців тому

    Make videos with explaination.plz give emphasis on css

    • @codewithharsh_
      @codewithharsh_ 6 місяців тому

      Thanks for your suggestion, next time i will try to explain every thing as much as possible 😊💚 If you have more such suggestions, you can share with me.

  • @manojkumardalal4859
    @manojkumardalal4859 6 місяців тому

    Make videos with explanation

    • @codewithharsh_
      @codewithharsh_ 6 місяців тому

      Thanks for your suggestion, next time i will try to explain every thing as much as possible 😊💚 If you have more such suggestions, you can share with me.