CODEWITHSUNDEEP
phpjquerymysqlaudioiframe
Yhilan
Yhilan

Reputation: 269

using jquery + <audio> w/ php/mysql to loop playback times

I've got a page with an iframe. The iframe is using jquery.scrollTo to detect the audio playback time and keep the contents, lyrics for example, linked to the right point in the audio.

Each line of text is being pulled from a mysql table. What I'm trying to do is to allow the user to click on a line in the <iframe> and have the audio in the parent page play at that point. Here's the code that grabs the times, which exists after the jquery that handles the other audio functions:

<?php
include 'mysqlt.php';
$entries=mysql_query("SELECT * FROM `database`.`table`") or die(mysql_error()); 
while ($ent = mysql_fetch_object($entries)) {
$segment = $ent->index;
$starttime = $ent->time;
$nextline = $ent->time2;
$length = ($nextline - $starttime); ?>

That same information is also duplicated in the iframe source page along with the individual lines of lyrics. The jquery that uses this info follows:

$("#iframe_id").contents().find("#button_in_iframe<?php echo $segment;?>").bind("click", function(){
        audioplayer.currentTime = <?php echo $time;?>;
        audioplayer.play();
    }
<?php } ?>

This second part loops, echoed once for each each potential line in the iframe that can be clicked. #button_in_iframe<?php echo $segment;?> ends up as something like #button_in_iframe23 for the 23rd line.

I've got jquery loaded up in both the parent and the iframe. As far as I can tell, the syntax is what it should be. If I remove this bit of code, everything works normally. if it's in there, the basic audio functions on the normal controls I have set stop working. So this is not only not working, but it's causing everything else associated with the audio tag's controls to stop working as well. I know that any small error in the audio controls' jquery is enough to make it stop working, but in this case I'm not sure where the problem is.

Thanks in advance for any insights anyone might be able to offer.

update: I've got it so it no longer crashes the audio tag. Now it's more an issue of the iframe's item not triggering an event. Here's the code now:

$('#iframe_id').contents().find("button.loop2").bind("click", function() {
    alert ("test");
    });

I'm not getting any console errors except for a Google Maps imbedded in the page in another location. When i click the <button> with class loop2 in the iframe, all of which exist, nothing's happening. That seems to be the root of the problem as it was earlier.

Upvotes: 0

Views: 1432

Answers (2)

Yhilan
Yhilan

Reputation: 269

I figured out how to do it. I've set the loop on the parent to read as follows:

play<?php echo $segment; ?> = function(){
        sfx.currentTime = sounds.getCueById(id).startTime;
        sfx.play();
    };

Then in the iframe's page, I've told each button to call parent.play<?php echo $segment;?>();

I'm not sure why finding the tags in the iframe didn't work, but no matter. This get's the job done.

Thanks, shanabus, for all the suggestions.

Upvotes: 1

shanabus
shanabus

Reputation: 13115

Would it work to use media cues?

Example:

var sfx = new Audio('sfx.wav');
var sounds = a.addTextTrack('metadata');

// add sounds we care about
sounds.addCue(new TextTrackCue('dog bark', 12.783, 13.612, '', '', '', true));
sounds.addCue(new TextTrackCue('kitten mew', 13.612, 15.091, '', '', '', true));

function playSound(id) {
  sfx.currentTime = sounds.getCueById(id).startTime;
  sfx.play();
}

You can find a better definition of the spec half way down the page here - http://dev.w3.org/html5/spec/Overview.html

So in your case, maybe something like:

$("#iframe_id").contents().find("#button_in_iframe<?php echo $segment;?>").bind("click", function(){
        sounds.addCue(new TextTrackCue('<?php echo $segment; ?>', <?php echo $starttime; ?>, <?php echo ($starttime + $length); ?>, '', '', '', true));
        var id = '<?php echo $segment; ?>';
        sfx.currentTime = sounds.getCueById(id).startTime;
        sfx.play();
    }

Or maybe separate your logic into two loops. One for building the cues, then one for building/binding the click events.

Hope this helps!

Upvotes: 0

Related Questions