在同一页面上多次显示 wavesurfer.js

Question

我有一个页面使用 php 在一页上显示多个音频文件。这工作正常，但我正在尝试使用 wavesurfer.js 显示每个文件的波形。出于某种原因，我的 javascript 不工作，我无法弄清楚原因（我看不到任何波形）。希望有人能帮忙。谢谢

html

echo "<ul>";
while ($row = mysqli_fetch_array($user_query, MYSQLI_ASSOC)) {
$f = $row["filename"];
$id = $row['id'];
$path='scan_file/'.$f.'';
 echo '<li>'.$id.'</li>';
 echo '<li>'.$f.'</li>';
  echo '<li>'.$path.'<li>';
 echo '<li><audio controls><source id="'.$id.'" title="'.$f.'" src="scan_file/'.$f.'"/></audio>
</li>';
echo '<li><div class="wave" data-path="scan_file/'.$f.'" data-id="'.$id.'"></div></li>';
} 
echo "</ul>";

jQuery

<script type="text/javascript">
$('.wave').each(function(){
 var wavesurfer = Object.create(WaveSurfer);
var id = $('.wave').attr('data-id');
var path = $('.wave').attr('data-path');

console.log(id);
console.log(path);
 wavesurfer.init({
  container: 'wave',
    waveColor: 'violet',
    progressColor: 'purple'
 });
 wavesurfer.load($(this).data('path'));
});
</script>

Answer 1

您的代码中存在一些错误，例如：奇怪的初始化；错误的 "id" 和 "path" 值接收； wavesurfer 初始化为音频元素，而不是 unic 容器。

fiddle

上的工作代码示例

echo "<ul>";
while ($row = mysqli_fetch_array($user_query, MYSQLI_ASSOC)) {
    $f = $row["filename"];
    $id = $row['id'];
    $path='scan_file/'.$f.'';
    echo '<li>'.$id.'</li>';
    echo '<li>'.$f.'</li>';
    echo '<li>'.$path.'<li>';
    echo '<li><div class="wave" data-path="scan_file/'.$f.'"><button type="button">Play / Pause</button><div class="wave-container"></div></div></li>';
} 
echo "</ul>";

和

$('.wave').each(function(){
    //Generate unic ud
    var id = '_' + Math.random().toString(36).substr(2, 9);
    var path = $(this).attr('data-path');

    //Set id to container
    $(this).find(".wave-container").attr("id", id);

    //Initialize WaveSurfer
    var wavesurfer = WaveSurfer.create({
        container: '#' + id,
        waveColor: 'violet',
        progressColor: 'purple'
    });

    //Load audio file
    wavesurfer.load(path);

    //Add button event
    $(this).find("button").click(function(){
        wavesurfer.playPause();
    });
});

在同一页面上多次显示 wavesurfer.js

Show wavesurfer.js more than once on same page

javascript

jquery

wavesurfer.js