javascript - 播放数据库中的多个音频文件

Question

我将图像和音频文件存储在我的服务器上的目录中，并将文件名存储在我的数据库表中。

我希望当用户单击与音频文件关联的图像时音频文件能够播放和暂停，因此我在图像上创建了“播放和暂停”开关。

我遇到的问题是，当我使用切换按钮时，它会在每个图像上播放相同的音频文件。它不播放与图像关联的音频文件，而是播放 DESC 列表中的第一个文件。

示例:

• 图片 1:播放音频 1
• 图片 2:播放音频 1
• 图片 3:播放音频 1

这是我的 php 代码:

$ringtones = DB::getInstance()->query("SELECT `ring_id`,`creation`,`ring_name`,`category_id`,`ring_path`, `rt_file` FROM `ringtones` WHERE category_id = 2 ORDER BY `ring_id` DESC ");
foreach($ringtones->results() as $rt){ ?>

<li <?php echo escape($rt->ring_id); ?>>

<a class="mytoggle" style="cursor:pointer;">
<img src="ringtones/rtimage/<?php echo ($rt->rt_file);?>" class="max-img-rt"></a>

<audio id="playaudio">
<source src="ringtones/<?php echo ($rt->ring_path);?>">
</audio>

</li>
<?php } ?>

还有我的 JS:

$('.mytoggle').toggle(
function () {
document.getElementById('playaudio').pause();
},
function () {
document.getElementById('playaudio').play();
}
);

我不明白为什么它不会像这样播放:

• 图片 1:播放音频 1
• 图片 2:播放音频 2
• 图片 3:播放音频 3

Answer 1

去掉音频元素的 id 属性。多个元素具有相同的 id 从来都不是一件好事，而且您确实不需要为简单的播放/暂停功能提供 id。

然后尝试这个 jquery 代码:

$('.mytoggle').on('click', function () {
  var player = $(this).parent().find('audio').get(0); // if you restructure your HTML this has to change
  if (player.paused || player.currentTime == 0) {
    player.play();
  } else {
    player.pause();
  }
});