Javascript 从数据库播放多个音频文件

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

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

我遇到的问题是，当我使用切换时，它会在每个图像上播放相同的音频文件。它不会播放与图像相关联的音频文件，而是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 } ?>

我不明白为什么它不会这样玩：

• 图1：播放音频1
• 图2：播放音频2
• 图3：播放音频3

---

去掉音频元素的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();
  }
});

---

如果有多个元素具有

id='playaudio'

，则

document.getElementById（'playaudio'）指向什么？第一个。
$('.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();
  }
});