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 […]

By in Playground on
Demo Download

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!

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

On-Scroll 3D Stack Motion Effect

Trigonometry in CSS and JavaScript: Beyond Triangles

Reflection Scroll Effect

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 83

Comments are closed.

  1. very nice.. todos los proyectos realizados por ustedes son muy buenos, gracias por compartir..

    solo le falta algo a este sitio un “DONE”.

    bendiciones.

  4. No way! You guys are awesome in our delivery and use of jquery. Thank you for shearing your knowledge with us.

  6. really great;

    I use flash and php to do the same…

    I get your version …

    Thanks

  7. thanks a lot,
    you have done a great work again!!!

    all the best to your life!

    Philip

  10. I have 2 clients who are singers and musicians but still, I’m not yet starting with HTML5. I just can’t see it working properly in all browsers so…..
    Nice stuff though!

  12. Thanks for your generosity! This will definitely add more professional vibe!Keep it up guys!

  13. absoluty great! lovely user interfase, ajaxfy surfing, fast response in the player and the magic of jquery

    congrats and thanks for do things like that, you’re pushing the webdesign steps foward !

    adeus, from argentina

  15. Must say that the portfolio LOOKS nice, but is nothing that I’d expect from an artist portfolio. I’ve been producing music for 11 years and have yet to see an intuitive design.

    Perhaps I should attempt myself, ofcourse I’m not that great a designer, but I have a better idea of the usability required for a portfolio catered for musicians from a musician.

    @re1jo

  18. Hi there! Wow, I’m flattered you’ve used my music samples for this very, very cool demo. And I appreciate that you’ve incorporated the credits and all that. Nice.

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

  22. 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!

  24. 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?

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

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

    thank you for sharing

    p.s. your site is really Delicious 😉

  31. @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

  32. 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?

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

  33. 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!

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

  36. 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?

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

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

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

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

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

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

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