Collection of free vanilla JavaScript music player code examples.

16 JavaScript Music Players

Collection of free vanilla JavaScript music player code examples.


Related Articles

  1. CSS Music Players
  2. jQuery Music Players
  3. React Music Players
  4. Vue Music Players


Author

  • Rafaela Lucas

Made with

  • HTML / CSS (SCSS) / JS

About a code

Music Player App

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: swiper.css, swiper.js

Author

  • Zakari Abdessamad

Made with

  • HTML / CSS / JS

About a code

JS Audio Player

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • hossein_ghanbari

Made with

  • HTML / CSS (SCSS) / JS

About a code

Vanilla JS Music Player

Professional music player.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jake Whiteley

Made with

  • HTML / CSS (SCSS) / JS

About a code

Media Player Widget With Gooey Interactions

A GSAP-powered media player widget, using SVG filters to make the little goo drop gooey enough!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: tweenmax.js

Author

  • Ivor Padilla

Made with

  • HTML / CSS (SCSS) / JS

About a code

Podcast Player

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: mediaelementplayer.css, mediaelement-and-player.js

Author

  • Yuki

Made with

  • HTML / CSS (Sass) / JS (Babel)

About a code

Music Player

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mike Quinn

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Card Music Player

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: rx.js

Author

  • Shayan

Made with

  • HTML / CSS (SCSS) / JS

About a code

Music Player

UI music player with little JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Greg Hovanesyan

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Green Audio Player

Audio player JavaScript library.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Sean Free

Made with

  • HTML (Pug) / CSS (Sass) / JS (Babel)

About a code

Musical Particles

Music player in JavaScript with particles visualizer.

Compatible browsers: Chrome, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, dat.gui.js, vector2.js

Author

  • Ruslan Pivovarov

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Music APP Concept

Music app with animations concept.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css,

Author

  • Axel Michel

Made with

  • HTML / CSS (SCSS) / JS

About a code

Music Player

Created as a minimal Soundcloud player. Playing around with canvas to extract cover colors, and creating the background effect, viewport units and the soundcloud API to bring this to live.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, soundcloud-sdk.js, rebound.js

Author

  • Nerios Lamaj

Made with

  • HTML / CSS / JS

About a code

Interface Animation For Music Player

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Dario Fuzinato

Made with

  • HTML / CSS (SCSS) / JS

About a code

JavaScript Music Player With Hidden Controls

Hover/Click on album cover to show controls.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: soundcloud-sdk.js

Author

  • Alex Permyakov

Made with

  • HTML / CSS / JS

About a code

Audio Player

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Bradley Treweek

Made with

  • HTML / CSS / JS

About a code

Better Audio Player

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

back to top