Discussion on HTML5 Music Player with 3 CSS3 Skins

CodingJack

CodingJack does not currently provide support for this item.

117 comments found.

Love the sleek design and desktop functionality, but…....

You currently have a major bug issue with regard to the mobile device functionality, as I ran a test on my HTC Incredible smartphone (using an up-to-date android operating system), and the ‘standalone’ player (fully opened with no big button) will not play any of the audio files linked to the player.

When I access the player in ‘big button’ mode, it opens perfectly and plays the first audio file beautifully, but upon clicking the ‘next’ control button to skip ahead and listen for track number 2, 3, etc.., no audio sound results.

*My android device ‘test’ was not just performed from my own website’s implementation, but your live preview page as well.. both rendering the same problem.

Hi DTFChime,

Just made an update for this and it should be live shortly. Until then, send me an email from my profile page and I’ll send you the update.

-Jack

I would like to know what exactly got updated so I know what needs to be changed.

Hi thebiggest,

The update addressed an issue with Android. To update, just switch out the JavaScript files that are included inside the “js” folder.

-Jack

Hi Jack, Two pre-order questions: 1. is it possible to detect (with API) when an audiofile is finished playing? I want to create some action after someone completed the audio.

2. Is it possible to remove the controlbuttons and just show a progress bar, preferably in my custom color?

Thanks for your help.

Kind regards, Edward

Hi AVC,

There’s an “audioEnded” function in the script where you could make a function call. For your second question, this player doesn’t include a progress bar, so one would have to be built. But the controls can be removed easily if you did that.

-Jack

why not have a downlo click.it will be better

I seem to have the same problem on mobile as DTFChime. No sound on mobile device (running android 4.3)

Hi Jkisiah,

Send me an email from the form on my profile page along with a link to your site and I’ll try and help you with this.

-Jack

Is there a way to have a single-file player and it be just a play button?

Hi Quest,

Assuming you want just the small play button like this:

Start with “nobutton.html”, and change the “cj-music-container” to look like this:

<div class="cj-music-container">
    <div class="cj-music-content">
        <div class="cj-music-controls">

            <span class="cj-music-pause"><img src="img/cj_music/music_pause_2.png" width="8" height="10" alt="pause song" /></span>
            <span class="cj-music-play"><img src="img/cj_music/music_play_2.png" width="7" height="10" alt="play song" /></span>

        </div>
    </div>
</div>

Then inside “css/cj_music.css”, change the following values for these classes:

.cj-music-no-button {
    width: 39px;
}
.cj-music-content {
    padding: 0 0 0 11px;
}
.cj-music-controls {
    margin-left: 0px;
}

-Jack

This is perfect for my website.

I’ve purchased and having a positioning problem. Wondering if there is a way to center the player in a div. on a responsive webpage? I’m using bootstrap and want to place the player in their Pricing table Bloc. My usual lame tricks aren’t working for me. Thx!

Hi vt50,

The easiest way to center the player would be to wrap it in another div and then assign some CSS to the parent div. Here’s an example:

<div id="music-wrapper"> <!-- Plugin HTML here --> </div>
#music-wrapper {

    width: 300px;
    margin: 0 auto;

}

-Jack

Bought this nice player a few days ago. When opening the site in firefox browser on Nexus7 latest android release, it mentions that a plugin is needed.

What is the solution?

Jac

Hi jvdl,

Not sure why that’s happening, as it works in my Android devices here, but send me an email from my profile page and I’ll try and help.

-Jack

Is this your profile page? Please try the link to the troublesome page: [link removed]

I created an Artisteer R4 responsive template for it. I wonder, is it normal that player doesn’t resume playing after download of a tune?

Like to hear about your findings. Jac

Hi jvdl,

Use the contact form on this page:

http://codecanyon.net/user/CodingJack

-Jack

Hi,

It is possible to use this in Joomla?

Thank you.

Hi Qutebaby,

It’s possible, but would have to be added manually by an advanced webmaster.

-Jack

can i implement this skin with my current jplayer playlist player?

Hi Macblog,

The skin isn’t automatically compatible with jPlayer, so it would require some custom work.

-Jack

the headphone image is not centered on the circle button.. how to put it in the center? i am using the black colored player..

also 1 very important thing because my site is responsive… I CANNOT align the whole player in the center….. kindly solve this bug. thanks

Hi,

I’ve just answered your email.

-Jack

Hey Jack,

I’m having problems with the looping as well. I have done both of the fixes you listed above and the music stops looping, however the icon is still set to “play” and doesn’t change to “pause”. Is there an easy fix for that?

Comment out this line - if(leg === 1) audio.attr("loop", "loop");

On line #421 inside the “audioEnded” function, comment out the third line that says “handleArrows”.

Hey Jack,

I’m having problems with the looping as well. I have done both of the fixes you listed above and the music stops looping, however the icon is still set to “play” and doesn’t change to “pause”. Is there an easy fix for that?

Comment out this line - if(leg === 1) audio.attr("loop", "loop");

On line #421 inside the “audioEnded” function, comment out the third line that says “handleArrows”.

Hi TwoFold,

Send me an email from my profile page along with a link to your site and I’ll try and help you with this.

-Jack

Greetings,

can I load playlist with json dynamically?

Thank you, László

Hi László,

The plugin doesn’t include this functionality natively, but the HTML markup for the player could certainly be outputted to the page dynamically with some custom server-side script.

-Jack

Hi! is this plugin phonegap compatible? or is it easy to get it to work?

why did u include 20MB and over of music in the zip? that makes the upload fail unless prper params are modified… why didnt u put 300KB songs there…

the zip i downloaded (codecanyon-1275465-html5-music-player-with-3-css3-skins) it’s NOT recognized as a valid plugin when i upload it, please help thanks

ah, my mistake, it’s not a wp plugin

by
by
by
by
by
by