Question

我有一个页面，使用php在一页上显示多个音频文件。这工作正常，但我试图使用waveurfer.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”值接收； waveurfer初始化为音频元素，而不是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();
    });
});

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

1 个答案: