每次 while 循环运行时调用 javascript 以提供独特的波形答案

【问题标题】：Call javascript everytime the while loop runs to give a unique waveform每次 while 循环运行时调用 javascript 以提供独特的波形
【发布时间】：2013-03-07 10:38:48
【问题描述】：

我正在使用wavesurfer.js 为音频剪辑生成波形，我遇到的问题是我在php while 循环中提取了多个音频文件，而javascript 似乎只能运行返回的第一条记录..

我将在下面发布我尝试过的内容，如您所见，我已尝试使其独一无二并运行每个循环，但我的想法已用尽并在互联网上到处搜索，但没有任何帮助。

PHP：

 global $db;
 $select = $db->query("SELECT * FROM audio ORDER BY id DESC");
  while ($row = $select->fetch_assoc()) {
   echo $row["track_title"] . " by " . $row["artist"] . "<br />";
   $path = $row['path'];
   $path = str_replace("..", "", $path);
   $id = $row['id'];

    echo"
     <div class='waveid' id='".$id."'>
     <div class='path' id='".$path."'>
     <div class='cursor' id='wave-cursor'></div><canvas id='wave' class='wave-".$id."' width='1024' height='128'></canvas>
     </div>
     </div> 
    ";
    }

JAVASCRIPT：

var id = $(".waveid").attr('id');
var path = $(".path").attr('id');

console.log(id);
console.log(path);

var wavesurfer = Object.create(WaveSurfer);

wavesurfer.init({
canvas: document.querySelector('.wave-'+id),
waveColor: 'violet',
progressColor: 'purple'
});

wavesurfer.load(path);

总而言之，我有一个 while 循环返回所有歌曲数据，其中 mp3 存储在一个文件夹中，文件路径存储在数据库中并正在返回。我正在尝试为每个文件制作一个独特的波形，但由于某种原因，我只能设法获得第一个记录的一个波形。任何帮助将不胜感激。

编辑：如果有人想编辑标题或任何内容/标签，请随时这样做。

【问题讨论】：

我不知道这是否是您遇到的问题，但您有许多元素具有相同的id。
@Brad 我想我已经让它们变得不同了......这就是为什么这让我感到困惑。如果我做错了，请有人纠正我
#wave-cursor 和 #wave 重复。

标签： php javascript jquery mysql while-loop

【解决方案1】：

PHP（你不需要使用 div）：

while ($row = $select->fetch_assoc()) {
 echo $row["track_title"] . " by " . $row["artist"] . "<br />";
 $path = $row['path'];
 $path = str_replace("..", "", $path);
 $id = $row['id'];

 # make sure $path doesn't contain ' character
 echo "<canvas class='wave' data-path='$path' data-id='$id' width='1024' height='128'></canvas>";
}

JS（这会引起轰动）：

$('.wave').each(function(){
 var wavesurfer = Object.create(WaveSurfer);

 wavesurfer.init({
  canvas: this,
  waveColor: 'violet',
  progressColor: 'purple'
 });

 wavesurfer.load($(this).data('path'));
});

【讨论】：