Izzy-B Izzy-B - 1 year ago 94
jQuery Question

Music Player Freezes Page, all browsers

I have a music player on this test page. The external JavaScript files called for can be viewed via page source within the head tags. They are



(the script for placing checkboxes is found within this file)

I also have two portions of internal JavaScript included:

<script type="text/javascript">
$(document).ready(function() {
var description = '<p align="center">Classic and Southern Rock<br /><i>Check the songs you want, then click the first title checked to begin playing.</p></i><br /><input type="button" onclick="uncheckAll()" value="Clear"/><input class="check" type="button" onclick="checkAll()" value="Select All"/>';

$('#yipPlayer').ttwMusicPlayer(myPlaylist, {
autoPlay: false,
description: description,
jPlayer: {
swfPath: 'plugin/jquery-jplayer'

and this bit for clearing/selecting the checkboxes:

function uncheckAll() {
$("input[type='checkbox']:checked").prop("checked", false)

function checkAll() {
$("input[type='checkbox']").prop("checked", true)

Something to note: Prior to adding checkboxes, one simply clicked a title and the player's behavior was to continue to progress through the entire list of songs, unless manually paused. After adding checkboxes, the player loads with all the check boxes selected. One must clear all the boxes, then check song choices. Clicking the first selected title then starts the player. The player will progress 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. Even with only one song checked, it will repeat that one song, over and over. To stop the repeat, you must uncheck the box. (The player's behavior can be tested by clicking the supplied player link. You may scrub to the end of a song to avoid having to sit through its entirety.)

The issue occurs when all the boxes are unchecked. If the player is allowed to play all the way to the end of the song, the page will freeze. As long as the song is playing, one may pause it, check/uncheck boxes, etc. It is only when no boxes are checked and a song plays completely to the end that the freeze occurs. When this happens, the page no longer responds to any click. One may only close the page tab (in most cases).

This happens regardless of browser (tested in Firefox, Chrome, Safari, Opera). Firefox does give an "Unresponsive Script" alert with this information:

Script: http://yipcabbage.com/playerTest/js/jquery-1.6.1.min.js:16 (Why is :16 appearing at the end of that link? Of course, it gives a 404 error.)

I lack the skills to debug JavaScript. Since the script error points to jquery-1.6.1.min.js, I read through this page but do not understand the attributes and properties of checkboxes.

My question is, since the player initially loads with all the boxes checked, is it freezing up because it was originally set up to play through all the songs listed in the player and deselecting checkboxes breaks that function (so that it "doesn't know what to do" when a song reaches the end and nothing is checked)?

Answer Source

The problem is only when there are no check-boxes checked at all.

Comes from this function inside /plugin/ttw-music-player.js:

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

It enters in a infinite loop because no checkbox matches the $cbs.eq(index).prop("checked") criteria.

You may consider leaving one check-box always checked. Or fixing that function by checking if any boxes are checked at all.