Issue with Music Player (JavaScript/Jquery)

[Grammy]

This turns out to not be an SMF issue, from what I've been able to determine, since I've been able to reproduce the issue on a stand-alone page, so I'm posting here, if that's okay.  (However, I do use this feature on a production forum, so I'm hoping to resolve the issue.)

The problem involves a music player and the stand-alone version is here:

MUSIC PLAYER

(I've not added many music files; only enough to test it with.)  Originally, one just clicked a title and the player began, which was fine, but it then progressed on down the list, whether you wanted it to or not and you had to manually pause the player to get it to stop and then just close the page (or, in the forum, click another tab) to move on.  Originally, there were no checkboxes.

Recently, I added the checkboxes to the player so that the user can simply click what he or she wants to hear without having to sit through the entire playlist.  It functions fine, as far as that goes.  I did notice, though, when adding the checkboxes, that the player, by default, loads with all boxes checked.  I assume that's the state it has always loaded in, all titles "selected", although I wasn't able to tell that until I added the checkboxes.  I'm basing that assumption on the fact that the player has always progressed on down the list without being prompted to, even before the added checkboxes.  So I have a "Clear" button to uncheck everything (and a Select All button just in case someone decides they really do want to let the whole thing play).  Besides the edits to the player's JS file, the internal script for the checkboxes is:

Code Select Expand

<script>
function uncheckAll(){
   $("input[type='checkbox']:checked").prop("checked",false)
}
function checkAll() {
    $("input[type='checkbox']").prop("checked", true)
}
</script>

There are two things occurring that I'm not happy about: 

One is that when the player runs through everything the user has checked, it doesn't simply stop, as in "job done, and so am I".  It begins all over with the first selection.  So...  some sort of "repeat playlist" loop is going on.  That's a bit annoying.

The second issue is that if a user clears the check list and lets the current song play to the end (or, for that matter, if the user clears the boxes then simply clicks on a random title and lets that one song play to the end) the page becomes unresponsive when the song is done.  In the forum, you can no longer click on anything and have to quit your browser.  On the stand-alone page, you can't select any boxes, pause, etc.  You really can't do anything but close the tab or quit the browser.  This doesn't happen if the player is paused before the song is done; only if it's allowed to play to the end and the checkboxes are cleared.  I didn't get any overt clues as to what was going on in Chrome, but in Firefox, I got one of those "unresponsive script" messages and the link was 

Script: http://yipcabbage.com/playerTest/js/jquery-1.6.1.min.js:16  (Why is :16 appearing at the end of that link?)

I'm afraid I have never debugged a JavaScript issue in my life and wouldn't even begin to know how.  The first thing I saw, when clicking Debug was "This source is black boxed: its breakpoints are disabled, and stepping skips through it."  There is an option below that:  Stop black boxing this source.  (I have no idea what any of that means, but clicking on that option opens up the Jquery file.)

It might as well be opening up a black hole;  I understand absolutely nothing.  I just stare into it.

I'd simply never noticed the issue until after I added the checkboxes, so I don't know if this was an issue before.  I only do know that the player has always wanted to continue down the list unabated and had to be paused to stop.  Perhaps adding the checkboxes, thus giving it the option to "be finished" when it was possibly not designed to "be finished" threw a wrench into its overall function?  The checkboxes were added to ttw-music-player.js: $cbs = $(".cb"); and so on.  That file and the others can be accessed via the page source.

Does anyone have any insight into what's going on?

[Grammy]

I'll keep tinkering with it....   

[Grammy]

*half-hearted bump*





(But I realize this board doesn't see a lot of action and it really isn't an SMF issue, as such, even though it's affecting the forum.)

[Matthew K.]

Can you add a TL;DR? I'm happy to help you fix your code, but I don't have enough time right now to read a novel about what the problem is to be able to help you.

Just looking though...you could try this:

Code Select Expand


<script>
function uncheckAll() {
   $("input[type=\"checkbox\"]:checked").removeProp("checked").trigger("change");
}
function checkAll() {
    $("input[type=\"checkbox\"]").not(":checked").prop("checked", true).trigger("change");
}
</script>


[Grammy]

Can you add a TL;DR? I'm happy to help you fix your code, but I don't have enough time right now to read a novel about what the problem is to be able to help you.

Oh, Matthew, thanks so much for stopping by the thread!  I'm trying your edit now, but I'm afraid I have to ask what is meant by a TL;DR.   (You should have seen my blank face, when I read that, HA!)   


ETA:  I'm afraid the edit doesn't sort it but thank you so much for the suggestion.   Oh, and I just Googled and you're saying Too Much Information.  I'm afraid I tried to be "thorough".   I'll read through my mess and post again with a briefer summary.

[Grammy]

My music player is set up to check what you want to hear and then go back and click your first choice to start the player.  It plays only what you have checked.  The problem is that when it reaches the end of the last song, it causes the page (and my forum) to freeze up.  It will also do this if the check boxes are all clear and someone just clicks a title to play one song.  When it reaches the end, it makes the page freeze.  It will not do it if you click Pause; only if you let the song go to the end.

The browser will display an "Unresponsive script" error and this:

Script: http://yipcabbage.com/playerTest/js/jquery-1.6.1.min.js:16  (Why is :16 appearing at the end of that link?)

My question is, since the player initially loads with all the boxes checked (and before I added checkboxes, the player always played through all the songs, without stopping, unless manually paused) is it freezing up because it is set up to play through all the songs listed and adding the checkboxes has interrupted that?

(Hope that's clear; I don't do well with tl;dr, ha!)

[Matthew K.]

That sounds like a really crappy music player then, honestly. Can you shoot me a link to a non-minified version of the script?

So. TL;DR: Your music player is bugging out when you hit play, when no checkboxes are checked, or it loops through all of them? What should happen once it loops through all of them? Should it stop, or go back through from the top?

[Grammy]

That sounds like a really crappy music player then, honestly. Can you shoot me a link to a non-minified version of the script?

So. TL;DR: Your music player is bugging out when you hit play, when no checkboxes are checked, or it loops through all of them? What should happen once it loops through all of them? Should it stop, or go back through from the top?

I just watched its behavior again, carefully.  The player will play through all checked songs just fine, until it reaches the end of the last song.  Then it will start over.  If you don't want it to keep repeating the playlist, you must uncheck the boxes. So, yes, the issue is when the boxes are unchecked, apparently.  Even with one song checked, it will repeat the song.  To stop the repeat, you must uncheck the box.  Then it will play to the end of the song, and freeze the page.   The player JS is  HERE.

The actual player is HERE so that you can experience its behavior.  You can scrub to the end of a track to avoid having to listening to an entire song.  (And viewing the page source reveals all the other JS involved.)

[Grammy]

Resolved, in my own loquacious way:

This bit of script:

Code Select Expand

function playlistNext() {
                $cbs = $(".cb");
                var index = current;
                do {
                    index = (index + 1 < myPlaylist.length) ? index + 1 : 0;
                } while (!$cbs.eq(index).prop("checked                playlistAdvance(index);
            }

has been changed to

Code Select Expand

function playlistNext() {
                $cbs = $(".cb");
                var index = current;
                var i = 0;
                do {
                    index = (index + 1 < myPlaylist.length) ? index + 1 : 0;
                    i++;
                } while (!$cbs.eq(index).prop("checked") && i < myPlaylist.length);

                if (i < myPlaylist.length) playlistAdvance(index);
            }

My final analysis is that the music player is not crappy.   

[Matthew K.]

Sorry I wasn't able to fix it for you first. I had a busy day today. I'm just really surprised that the plugin creator didn't bother with a condition like you implemented.

[Grammy]

Sorry I wasn't able to fix it for you first. I had a busy day today. I'm just really surprised that the plugin creator didn't bother with a condition like you implemented.

I know, right?  It does seem like it would have been a natural feature!  Thanks, though; I know you guys are busy with a ton of stuff.  It did me good to sweat it out.