Question

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

当用户点击与音频文件相关联的图像时，我想要播放和暂停音频文件，因此我创建了一个＆＃34; Play＆amp;暂停＆＃34;切换图像。

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

Eample：

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

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

1 个答案: