如何在javascript中显示同步视频和波形音频？

我想在javascript视频播放器中同时显示视频及其音频波形。位置应同步，即如果我播放视频，波形视图中的位置应自适应。我使用wavesurfer.js尝试了以下操作，但我不知道如何进行同步：

<video id="video" class="video-js vjs-default-skin" controls>
//  Replace these with your own video files. 
     <source src="video.m4v" type="video/mp4" />
     HTML5 Video is required for this example.
</video>

<audio id="myAudio" class="video-js vjs-default-skin"></audio>

<script>
var player = videojs("myAudio",
{
    controls: true,
    autoplay: true,
    loop: false,
    width: 600,
    height: 300,
    plugins: {
        wavesurfer: {
            src: "media/heres_johnny.wav",
            msDisplayMax: 10,
            waveColor: "grey",
            progressColor: "black",
            cursorColor: "black",
            hideScrollbar: true
        }
    }
});
</script>

//用您自己的视频文件替换这些文件。
本例需要HTML5视频。
var player=videojs（“myAudio”，
{
控制：对，
自动播放：对，
循环：false，
宽度：600，
身高：300，
插件：{
冲浪者：{
src：“媒体/这里是johnny.wav”，
msDisplayMax:10，
waveColor:“灰色”，
颜色：“黑色”，
光标颜色：“黑色”，
hideScrollbar：对
}
}
});

如何正确同步视图