How can I show synchronized Video and waveform Audio in javascript?

Question

I want to show a video and its audio waveform at the same time in a javascript video player. The position should be synchronized, ie if I play the video, the position in the waveform view should adapt. I tried the following using wavesurfer.js but I cannot figure out how to synchronize it:

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

How can I synchronize the views correctly?