Discussion on HTML5 Audio Player with Playlist

Tean

Tean supports this item

Supported

This author's response time can be up to 2 business days.

851 comments found.

Two questions about player with playlist and scroll:
—I had wanted two independent players (inline and playlist with scroll) but couldn’t get them to work independently. So now I’m using playlist selector with scroll as the only player on my audio page. The inline links play button (next to the link) works great (there are a bunch of links on the page), but of course they all play through the main player further down the page.
—One problem: inline links seem to download the entire mp3 before playing (I’m guessing) (so a bit of time lag). Is there a flag I can set to begin playing sooner?
—The big problem with the “inline links” with this player is that as soon as the selection is done it then goes to the playlist in the main player and continues with those songs. Of course if someone clicks on a link to play one song I’d prefer if it just played the one song and stopped. Is there a flag to set for the “inline links” so that it will play the one song and stop? Maybe the only solution is to replace the playlist in the main player with a playlist consisting of the single song…??

Thanks

Hmmm… I got your new version and reworked my program but…. was it your intention to change INLINE so it no longer has a PLAY button and now opens in a new window? That was the cool part about inline I thought (i.e. staying on the page and playing without a new window opening up).
I thought maybe I had programmed something wrong, but I just now checked your original index_inline.html files and compared the current version to a slightly older version and they’re definitely different now. I double-clicked on each of those files, bypassing Dreamweaver and my work. Anyway I just want to be sure that’s a deliberate change. Thanks

No, you just have to wrap the code which contains audio links inside plugin element like this:

https://paste.ofcode.org/Z9SGvycwAnGh4xtWa3MsL8

oh yes I see… it works great! all is perfect. Thanks!!

Hello, how I do implement the playlist in bg_slideshow?

Thanks in advantage.

Hi!

You should replicate the same layout in your page as in provided examples. Keep all files and folder relative to one another.

Hi… Everything is working great, but I have one question about the player with playlist on an iPhone. On my iPhone the playlist selector (the dropdown menu) converts to a generic iPhone Flip Wheel selector. Is this what’s supposed to happen? I don’t necessarily hate it except that when the selector wheel shows up it resizes my window and the window stays a bit too large when you make your selection. Just wondering if that’s intentional and if there’s a way to keep iOS from resizing the window. In landscape mode the window stays as is, it’s just an issue in Portrait. Thanks

Hi!

Yes, selector uses standard select + option html, thats why it behaves such on mobile devices. Maybe yo can try using other selector, inside jquery.html5audio.settings_playlist_selector.js file ( if you are using index_playlist_selector.html demo) there is on option which sets ordinary selector on mobile.

//playlist selector dropdown
...

Thanks

Oh thanks. I actually found a much easier solution. If the text font is 16px for input then the window won’t resize (zoom). I had no other inputs so it was fine to do it generally for me. After a certain width it seems not to matter (for example in landscape) so I’m not totally sure what max-device-width needs to be but this works for me for now
@media only screen 
and (max-device-width: 813px) {
    button, input, select, textarea {    
    font-size: 1rem;
    }
}

oh sorry… I tried to edit this post but it was too late. I meant “what device-width needs to be” (as an added filter). max-device-width is there to restrict it to phones, not desktops. I’m not totally sure 813 is the number to use, but you get the idea.

Sorry I didn’t keep the above all in one thread. My bad. Another thing on the iPhone. Have you noticed this? The first time you choose a playlist the playlist loads into the player, the button turns to a pause button but the music doesn’t play. I have to hit the pause button then the play button again to get the playlist to play. After that newly selected lists play automatically every time. Also: after one playlist doesn’t play – and you do nothing with the buttons – and then you pick another PL then that loads but doesn’t auto-play either till you do the pause/play trick. For me you have to do it once then it will play lists automatically every other time. ONLY on an iPhone, not a desktop computer. Have you see this, too? It could be something I’ve done. As a reminder I DO have inline and player with scrolling playlist on one page. But it’s only an iPhone issue. All 3 major browsers.

Inline example is specific and if used with other player types in the same page can give unexpected results, so its not recommended for inline example to be used with other players.

Hello, Im ready to buy HTML5 Audio Player, just one silly question – when I switch the player to the popup and continuing with browsing – could I switch the player back to the inline on the new page? Or even – could I switch to popup/back from popup from page? I need countinuous playback, but client is not keen from new window hidden somewhere…. And could player remember progress when switching betwen popup and page? Thanks.

Tean

Tean Author

Hi!

You can test this demo which shown how to open and close popup with button press.

http://www.interactivepixel.net/ccAudioPlayer/index_popup.html

Maybe there are other ways for having hidden window:

https://stackoverflow.com/questions/5180684/hidden-window-using-javascriptl

Thanks

Hi and Happy New Year! I’ve noticed that the player with scrolling playlist will play m4a’s but the inline player will not put a play button (arrow) next to an m4a (though the link plays through the player perfectly fine when you click on it). Is this intentional?

Tean

Tean Author

I think if you comment out this so it doesnt check it will add icons for other formats like m4a.

Awesome, thanks. I’ll try that in a couple days (back to writing music for a few days). For the moment I’ve stuck to mp3’s which is fine.

Yes that worked, thanks. I’ll be sure to minify it when I next update the site.

dmoore52

dmoore52 Purchased

I mistakenly purchased the HTML 5 with Playlist for html. I need the same player for WordPress instead. Would you please exchange my purchase with the WordPress which is what I need.

Your help is appreciated. Dan Moore

Tean

Tean Author

Hello!

Item description clearly states what kind of plugin this is. We can only offer a refund if plugin has not been downloaded.

dmoore52

dmoore52 Purchased

I purchased the HTML 5 Audio Player this past week. I sent an email earlier concerning this. I need to exchange this for your WordPress version. Purchased this one by mistake. My Purchase code is 19e51279-4211-4f00-b3ad-d1ce53d93d3e .

Your help in this matter would be greatly appreciated. Dan Moore danmoore52@gmail.com
Tean

Tean Author

Item description clearly states what kind of plugin this is. We can only offer a refund if plugin has not been downloaded.

Tean

Tean Author

I have also replied to you in your same question above so there is no need for repeating.

has live streaming been implemented?

thanks
Tean

Tean Author

Hello!

Yes, now you can play m3u8 files as well.

Just wondering if this supports what I would call “dynamic” playlists from Amazon – In other words where I just point it to the bucket and the plugin reads the content to build the playlist / download links

Tean

Tean Author

Hi!

Can you send me an example at http://codecanyon.net/user/Tean#contact so I can test?

Thanks

johnsky

johnsky Purchased

example 17 does not appear to work in the iPhone (item dragged into playlist simply poofs away). Am I missing something?

Tean

Tean Author

Inside html5audio_draggable_2players.css I have changed this, if it makes a difference:

#componentWrapper2 .playlist_inner ul{
    min-height:100px;
}
johnsky

johnsky Purchased

Thank you! That easily fixed the issue.

I have 2 more questions:

I am using “example 17” as my implementation.

1) The “X” to the right of items appears to not function in the top window. When an item is dragged into the bottom playlist window, clicking on the “X” in the bottom window does indeed delete the item from the playlist. But clicking on the “X” in the top window does nothing. (It does make sense that one would not need to delete items from the top window, so I understand why one might not need to delete items from there.) But is there an easy way to either enable the deletes from the top window, or, if that’s too difficult, simply stop the not-functioning “X” from appearing in the top window?

2) Again, I’m implementing example 17. Is there a way to put scrollbars on both the top and bottom windows? I’ve looked at the scrollbar example, but I can’t figure out how to do this without breaking my page. I’ve also tried to do this with simple CSS overflow which also did not work. Any help would be appreciated, as I have a lot of items, and scrollbars would definitely make my page more usable.

Thanks.

Tean

Tean Author

1.

data-playlistLocked

in index_draggable_2players.html

or

/* useRemoveBtnInTracks: true/false. Create remove buttons in playlist items for removing tracks. /
useRemoveBtnInTracks: false

2. you can try

/ activatePlaylistScroll: true/false. activate jScrollPane. */
activatePlaylistScroll: true,

in jquery.html5audio.settings_draggable_2players.js

maybe some css is required as well

by
by
by
by
by
by