From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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.
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!)
Awesome
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 !
Used this code once again – this time to create a virtual ipod widget. 🙂
http://www.bombedout.com
Hey Steve! That’s so cool! Cheers, ML
Anybody have any idea why my songs aren’t playing through Fire fox.
Here’s the link: http://www.thehooksmusic.com/music.html
You guys are such a nice human beings. Nice work
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. 🙂
Thank you for this! i have used this player in this website: http://www.miranrudan.si/
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!
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
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
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.
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
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
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
The scripts working in blogspot…
Does anyone have an idea how to include the contents from mysql recordsets??? Amazing script btw! 🙂
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 🙁
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
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
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
tag p and not tag h
Wow, what a great music player! Although it was a bit clunky to get all the music on there (perhaps I’m just not experienced enough with code yet) it is the best player I’ve found. Thank you for sharing this! I’m using it here: http://www.stevieblacke.com/productions.html
I can’t get it to work on my Android phone. 🙁 Anyone have any ideas? Solutions? Thanks.
Thank you so much for the tutorials Mary, your music player is the best thing that happen in my jQuery college website. Keep up the awesome tutorials!
I have change the theme of your music player, check it out here!
http://webmaster.senecac.on.ca/jzhang235/production_site/mockup/
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
how to change the song or add another album??
please help me, I’m a beginner
HOW DO YOU ADD MORE THAN 2 ALBUMS
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