1

我有一个页面使用 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>
4

1 回答 1

4

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

小提琴上的工作代码示例

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();
    });
});
于 2019-01-13T22:02:24.963 回答