使用 jquery + <audio> w/php/mysql 循环播放时间

Question

我有一个带有iframe 的页面。 iframe 使用jquery.scrollTo 检测音频播放时间并将内容（例如歌词）链接到音频中的正确点。

每行文本都是从 mysql 表中提取的。我想要做的是允许用户单击<iframe> 中的一行，并在此时播放父页面中的音频。这是获取时间的代码，它存在于处理其他音频功能的 jquery 之后：

<?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); ?>

iframe 源页面中也复制了相同的信息以及各行歌词。使用此信息的 jquery 如下：

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

第二部分循环，为 iframe 中每个可以点击的潜在行回显一次。 #button_in_iframe<?php echo $segment;?> 在第 23 行的结尾类似于 #button_in_iframe23。

我在父级和 iframe 中都加载了 jquery。据我所知，语法是应该的。如果我删除这段代码，一切正常。如果它在那里，我设置的正常控件上的基本音频功能将停止工作。因此，这不仅不起作用，还会导致与音频标签控件相关的所有其他内容也停止工作。我知道音频控件的 jquery 中的任何小错误都足以使其停止工作，但在这种情况下，我不确定问题出在哪里。

提前感谢任何人都可以提供的任何见解。

更新： 我已经得到它，所以它不再使音频标签崩溃。现在更多的是 iframe 的项目没有触发事件的问题。现在是代码：

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

除了嵌入在另一个位置的页面中的 Google 地图外，我没有收到任何控制台错误。当我在 iframe 中单击带有 loop2 类的 <button> 时，所有这些都存在，什么都没有发生。与之前一样，这似乎是问题的根源。

Answer 1

我想出了怎么做。我已将父级上的循环设置为如下所示：

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

然后在 iframe 的页面中，我告诉每个按钮调用parent.play<?php echo $segment;?>();

我不确定为什么在 iframe 中查找标签不起作用，但没关系。这样就完成了。

感谢 shanabus 提出的所有建议。

Answer 2

使用媒体提示有用吗？

例子：

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();
}

您可以在页面下方找到更好的规范定义 - http://dev.w3.org/html5/spec/Overview.html

所以在你的情况下，可能是这样的：

$("#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();
    }

或者也许将您的逻辑分成两个循环。一种用于构建提示，另一种用于构建/绑定点击事件。

希望这会有所帮助！