Audio Player with Playlist

01 your audio title

https://archive.org/download/calexico2006-12-02..flac16/calexico2006-12-02d1t02.mp3

https://archive.org/download/slac2002-02-15/slac2002-02-15d1t07_64kb.mp3

https://archive.org/download/ra2007-07-21/ra2007-07-21d1t05_64kb.mp3

https://archive.org/download/blitzentrapper2009-02-24.flac16/blitzentrapper2009-02-24t02_64kb.mp3

https://archive.org/download/samples2003-11-21.flac16/samples2003-11-21d2t04.mp3

https://archive.org/download/mikedoughty2004-06-16.flac16/d1t13.mp3

https://archive.org/download/glove2004-03-18.shnf/glove2004-03-18d1t05.mp3

https://archive.org/download/guster2005-11-12.flac16/guster2005-11-12d2t04.mp3

https://archive.org/download/oar2004-11-12.flac/oar2004-11-12d1t01.mp3

https://archive.org/download/mmj2003-09-26.shnf/mmj2003-09-26d2t08.mp3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Placeholder Picture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Placeholder Picture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Placeholder Picture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Placeholder Picture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Placeholder Picture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Placeholder Picture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Placeholder Picture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Placeholder Picture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Placeholder Picture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Placeholder Picture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

Audio Player w/Playlist

Many SD users have been asking for something like this. The component is relying on a javascript that fetches the tunes, plays them and shows some related information in the box to the right.

The information can be anything you like, maybe the lyrics, something about the musicians or an image - your choice. This extra-information is sitting in hidden containers that each have an ID that is the letter 'i' followed by the relevant playlist number shown at the start of the relevant song title.

The music can be local or online. Here it is online, and the place to put the source URL is a hidden paragraph with the class name snd-ref-1 below every entry in the list. For local files it would be best to create a folder 'sound' to pop them into.

You can add more songs to the playlist - or delete some.

The images used in this component come from Pixabay.

Placeholder Picture

Download this component