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

Links

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

Links

Made with

  • HTML / CSS / JS

About a code

JS Audio Player

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

Responsive: no

Dependencies: -

Author

  • hossein_ghanbari

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

Made with

  • HTML / CSS / JS

About a code

Audio Player

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

Responsive: no

Dependencies: -

Author

  • Bradley Treweek

Links

Made with

  • HTML / CSS / JS

About a code

Better Audio Player

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -