3

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);

要約すると、フォルダに保存されているmp3を含むすべての曲データを返すwhileループがあり、ファイルパスはデータベースに保存されて返されます。ファイルごとに固有の波形を作成しようとしていますが、何らかの理由で、最初のレコードに対して1つの波形しか取得できません。どんな助けでも大歓迎です。

編集：また、誰かがタイトルやコンテンツ/タグを編集したい場合は、遠慮なく編集してください。

4

1 に答える 1

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'));
});
于 2013-03-18T22:52:54.227 に答える