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:

Mary Lou (Manoela Ilic) 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://tympanus.net/

Related Articles

Feedback 83

Comments are closed.
  1. 1

    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

  2. 2

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

    Best

    t.

  3. 3

    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 :-)
    Dirk

  4. 4

    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

  5. 5

    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

  6. 7

    Does anyone have an idea how to include the contents from mysql recordsets??? Amazing script btw! :)

  7. 8

    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 :-(

  8. 9

    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..
    Regards,
    BT

  9. 10

    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.

    Dan

  10. 11

    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

  11. 14

    I can’t get it to work on my Android phone. :( Anyone have any ideas? Solutions? Thanks.

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

  13. 19

    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

Comments are closed.