Collection of free vanilla JavaScript music player code examples. Update of January 2020 collection. 12 new items.

Related Articles

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

Author

  • Christine Banlawi

Made with

  • HTML / CSS / JS

About a code

Mini Music Player

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

Responsive: yes

Dependencies: font-awesome.js

Author

  • khalil

Made with

  • HTML / CSS / JS

About a code

Vanilla JS Audio Player

Vanilla JavaS3cript version of music player.

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

Responsive: yes

Dependencies: -

Author

  • abxlfazl khxrshidi

Made with

  • HTML / CSS / JS

About a code

Music Player Widget

Animated music player widget.

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

Responsive: no

Dependencies: -

Author

  • Nate Northway

Made with

  • HTML / CSS (SCSS) / JS

About a code

My Favorite Things

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

Responsive: no

Dependencies: -

Author

  • Vaishnav Chandurkar

Made with

  • HTML / CSS / JS

About a code

Zen Lo-Fi Beats Player

Music player built with vanilla JavaScript.

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

Responsive: yes

Dependencies: -

Author

  • Ricardo Oliva Alonso

Made with

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

About a code

Victrola

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

Responsive: yes

Dependencies: -

Author

  • Ricardo Oliva Alonso

Made with

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

About a code

3D Radio

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

Responsive: yes

Dependencies: -

Author

  • Shahid Shaikh

Made with

  • HTML / CSS / JS

About a code

Music App Interaction GSAP

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

Responsive: yes

Dependencies: gsap.js

Author

  • Opher Vishnia

Made with

  • HTML / CSS / JS

About a code

Sonorous Track Mixer

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

Responsive: no

Dependencies: sonorous.js

Author

  • Opher Vishnia

Made with

  • HTML / CSS (SCSS) / JS

About a code

Sonorous Boombox

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

Responsive: yes

Dependencies: sonorous.js

Author

  • Derya Tanriverdi

Made with

  • HTML / CSS / JS

About a code

Cassette Tape SVG Animation

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Andrew Canham

Made with

  • HTML / CSS (SCSS) / JS

About a code

Soft UI Music Player

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

Responsive: no

Dependencies: -

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: -