[英]Call javascript everytime the while loop runs to give a unique time from database
[英]Call javascript everytime the while loop runs to give a unique waveform
我正在使用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存储在一个文件夹中,文件路径存储在数据库中并被返回。 我正在尝试为每个文件创建一个独特的波形,但出于某种原因,我只能设法获得第一个记录的一个波形。 任何帮助将不胜感激。
编辑:如果有人希望编辑标题或任何内容/标签,请随时这样做。
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'));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.