Music Portfolio Template with HTML5 and jQuery

Today we want to share a music portfolio template with you. The idea is to create an artist portfolio with a discography line up and HTML5 audio player jPlayer. The artist albums are shown using the jCarousel plugin and the user can add song samples to the play list and reorder the songs by dragging […]

Today we want to share a music portfolio template with you. The idea is to create an artist portfolio with a discography line up and HTML5 audio player jPlayer. The artist albums are shown using the jCarousel plugin and the user can add song samples to the play list and reorder the songs by dragging them.

The samples used are from the talented Ivan Chew at ccmixter.org. The original images come from Rick Harris at Flickr. All the albums are fictitious and are only shown for demonstration purposes. Any resemblance to existing bands or artists are unintended.

We hope you like this template and find it useful!

View demoDownload source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 83

Comments are closed.
  1. 1

    los ejemplos desarrolados somuy buenos y tiene mucha utilidad para unir varios ejemplos y desarrollarlos o aplicarlos en comunidades virtuales

  2. 2

    I’m trying to implement this, but the description section isn’t dynamic. If I put more than 6 songs or so per album, then the songs are on top of the description. Any tips?

    I love the way it looks and works other than that, though!

  3. 4

    Hello.. First it’s a great design and I wanted to use it for a page I have about Music and culture.. But I’m having problems with getting the songs to play.. I have tried all i know to get the directory to find it.
    I works great from my local dir. But when I try to install the dir from my server it does not play the songs at all .. NULL.. I know its a directory issue but how to I direct the files so that the player picks it up?

  4. 6

    Very nice, is there a way to not reveal the location of the music files? In order to prevent people to download them.

    Also would be great if it would scan a certain folder and generate the playlist automatically… but well… we can’t have everything.

  5. 7

    really beautifull template.. i have to switch over to html5 as well

    thank you for sharing

    p.s. your site is really Delicious ;)

  6. 11

    @Philip, we are using the HTML5 audio player jPlayer for this template which will use OGG files instead of MP3 files if you are using an HTML5 browser that supports the OGG format. HTML5 is more than just new tags :) Cheers, ML

  7. 12

    First, I would like to thank you for this wonderful template and design. This is absolutely wonderful. I was wondering if you had any solutions for the music not playing on certain browsers such as Firefox, Chrome and Safari. Is this because they do not read the .ogg files?

    • 13

      @Broderick, all browsers that support HTML5 should be able to play the ogg files. Do you provide alternative mp3 files for playing? Cheers, ML

  8. 14

    Wow – amazing work! If not for the fact that I spent ages creating a Flash mp3 player from scratch I would add this to my record label website in a heartbeat!

  9. 15

    If I use firefox support OGG file , but I want use mp3 , not use OGG and not work , pls help me.

  10. 17

    hey! what a great plugin! but it dont plays the music in safari (here 5.0.2). firefox and chrome is fine. do you know the problem?

Comments are closed.