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

Posted 2023-02-25

【中文标题】从数据库播放多个音频文件

【英文标题】：Play multiple audio files from database

【发布时间】：2014-06-10 18:19:23

【问题描述】：

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

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

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

【问题讨论】：

如果您有多个带有id='playaudio' 的元素，document.getElementById('playaudio') 会指向什么？第一个。

【参考方案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();
  
);