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

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

Tagged with:

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.

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

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 83

Comments are closed.
  1. 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!)

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

  3. 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. 🙂

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

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


  6. Hey Dhiman, try looking at the CSS for .mp_songs and adding a height of, say, 203px. And then add “overflow:auto”. That should add scrollbars.
    Also i have a question: i haven’t been able to get this player to autoplay. has anyone else? Seems like i’m going to resort to a hardcoded jQuery “click” event to mimic autoplaying, but it’d be nice to be able to use the jPlayer constructor

  7. Hi,

    Thanks for the download. The players are great and will come in very handy for a site I’m building at the moment. I’ll have to keep up with what you guys are working on . . .



  8. Really nice player Mary. This is exactly what I was looking for! I replaced my Flash based music portfolio player with your JQuery based player. It’s working in all recent browser (FF, Chrome and Safari), but IE9 has a problem displaying the titles. Don’t know how to solve this, probably an IE9 issue?
    Keep up the very good work and looking forward to enhancements 🙂

  9. actually in your index file of download you have mention link for mp3 file and also mp3 file is stored on you album folder but still its play ogg file. how to play only .mp3 files not .ogg

  10. is this player is streaming music player . and how can i use this player on shared hosting. because i just ask my web hosting company about music files so they said that their shared hosting plan doesnt support streaming files

  11. Does anyone have an idea how to include the contents from mysql recordsets??? Amazing script btw! 🙂

  12. thank you for script. In IE 9.0 the minus sign (to remove from playlist) goes over the next line even on demo. I had eveything perfect untill I tried IE 🙁

  13. Hi everybody,
    First, great job, well-designed ..
    I have just downloaded this file, but I have a problem. Music-portofolio is ok with Firefox and G_Chrome, but if I open it with IE9, neither song title nor singer name are displayed ?
    Any idea about the reason why ?
    Thanks in advance..

  14. Hello Mery Lou! I have the same problem…the scrypt is perfect but when I open with IE9 the songs put in the div”description” and the album title disappeared! I’m seraching for a solution…and is a very mistake ’cause the scrypt is very nice and with a lot of solutions.
    Thank you so much.


  15. Hi Lionel and Thomas…I think, the only way is to put a tag and not …using the same css. I’ve just do it and works fine. I think that is the only way for IE.
    best regards

  16. hello Mary Lou thank you to share your work with us you are amazing i have one question i used the Music Portfolio Template i transfer to my server is working fine but i try to change for my music i put the music in the folder music the file mp3 and the ogg but still no show me the new music do you have any tutorial with the code where i can chance the lines to make sure is display my music and title thank you sorry if i ask this big favour by the way merry christmas and happy new year all the best for you and your family

  17. Hello Mary Lou,

    I am in awe of your work, this player is amazing

    thank you for sharing your knowledge;-)

    Is what I can use it on my site?
    thank you again!

    and excuse me for my English