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. 2

    very good, the only problem I have is that it does not work in internet explorer because I did not play the tracks. Please if you could help me in this.

  2. 3

    Hi,

    I had implemented this in a sine http://www.musicodia.com via wordpress. Everything is fine but IE did not manage to play anything.

    Can someone tell me where i had commited the mistake?

    Thanks a ton in advance.

  3. 5

    I love this, but would love to know how to list more than 6 songs per album… not too good with css… thanks

  4. 8

    Thanks! Couldn’t have done it without you!

    Now seriously concidering replacing the Flash music player on the main record label site with a jQuery/HTML5 one – largely because of Apples lack of Flash support.

  5. 9

    I really admire you in terms of coding and design Mary ^_^

    I tried to convert these templates into blogger, and it worked ^ _ ^
    http://assadigital.blogspot.com/

    but, I found a problem when trying to change his song, his music can’t run =( what should I do? Thanks.

  6. 10

    Its a really cool work!! I love it!
    Would you like add a button on the player to shuffle the playlist? I really want a shuffle function.

  7. 12

    I like everything about the template although have not tried it in my remote server but i think it ill work well. But just like Marcel said it would really be great if it would scan a certain folder and generate the playlist automatically.

  8. 13

    Hello! Amazing template. Quick question, which I hope is easy: I’d really like to have several carousels running so as to categorize my albums, but when I duplicate the code the carousel stops working. Something simple I’m missing?
    Thank you!
    (ps site in progress – looks terrible now!)

  9. 15

    Hey :) thanks for all the hints and tutorials.

    I’ve got a question though ^^

    I’m using an XMLHttpRequest to load the content of the wrapper, works great for the first one (let’s call it “wrapper1”) but when it come to load “wrapper2” in the div, everything stop working… Any idea of what function I’m supposed to call and how ?

    thanks a lot !

  10. 20

    Sweetie, this is a wonderful player for all over favorite artists. I’m just missing a draggable volume-slider. you can you customize most elements and the songs, in the playlist, is very enjoyable. :)

  11. 22

    Keith! Why it doesn’t play? Make sure you have .mp3 and .ogg files! And that your server supports .ogg extension and that it should, must work! Take care!

  12. 23

    Hey Mary,
    The template is brilliant. I was implementing it and it was working fine. But I faced a problem, if the list of songs in a album is too long then it overflows into the album carousel and everything becomes messy. Can you please help me out with this issue. Also I really like your logo. Awaiting your reply and thanks in advance.

    Dhiman

Comments are closed.