Php 每次while循环运行时调用javascript以提供唯一的波形
我正在使用生成音频剪辑的波形,我遇到的问题是,在Php 每次while循环运行时调用javascript以提供唯一的波形,php,javascript,jquery,mysql,while-loop,Php,Javascript,Jquery,Mysql,While Loop,我正在使用生成音频剪辑的波形,我遇到的问题是,在php循环时,有多个音频文件被拉入中,而javascript似乎只针对返回的第一条记录运行 我将在下面发布我尝试过的内容,正如你所看到的,我尝试过使其独特并运行每一个循环,但我的想法已经用尽,在互联网上到处搜索,但没有任何帮助 PHP: global $db; $select = $db->query("SELECT * FROM audio ORDER BY id DESC"); while ($row = $select->
php
循环时,有多个音频文件被拉入中,而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>
";
}
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存储在一个文件夹中,文件路径存储在数据库中并被返回。我试图为每个文件创建一个唯一的波形,但由于某些原因,我只能为第一条记录获取一个波形。任何帮助都将不胜感激
编辑:如果有人想编辑标题或任何内容/标签,请随意编辑。PHP(您不需要使用divs):
我不知道这是否是您遇到的问题,但您有许多元素具有相同的id
@Brad,我想我已经使它们都不同了。。。这就是为什么这让我困惑。如果我做错了,请有人纠正我,尽管#wave cursor
和#wave
是重复的。
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>";
}
$('.wave').each(function(){
var wavesurfer = Object.create(WaveSurfer);
wavesurfer.init({
canvas: this,
waveColor: 'violet',
progressColor: 'purple'
});
wavesurfer.load($(this).data('path'));
});