使用 m3u8 在 wavesurfer videojs 中实现 hls

Question

我想实现 hls 以在 videojs wavesurfer 中显示音频波。文件格式为 .m3u8，我在 React 中编写代码，这是我的代码：

    const wavesurferNode = document.getElementById("wavesurfer");
    if (wavesurferNode) {
      const audio = document.getElementById("audio");
      if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource("https://stream.mux.com/Z49yBPngc5Cs5w3OoMJOVkrgHeWIhaaALbRBSE38VbU.m3u8");
        hls.attachMedia(audio);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
          const wavesurfer = WaveSurfer.create({
            container: wavesurferNode,
            backend: "MediaElement",
            msDisplayMax: 10,
            autoplay: true,
            barGap: 2,
            barRadius: true,
            waveHeight: "100",
            cursorWidth: 2,
            interact: true,
            waveColor: 'red',
            progressColor: 'blue',
            cursorColor: 'black',
            hideScrollbar: true,
          });

          const player = videojs("audio", {
            plugins: {
              wavesurfer: wavesurfer,
            },
          });
    });


//render
              <div
                data-vjs-player
                id="wavesurfer"
              >
                <audio
                  className={`video-js vjs-default-skin`}
                  controls={true}
                  id="audio"
                ></audio>
              </div>

在此代码中，WaveSurfer 从wavesurfer.js 导入，videojs 从video.js 导入。
使用此代码，播放音频文件，但屏幕上不显示任何内容。显示的错误如下： VIDEOJS: ERROR: TypeError: this.Backend is not a constructor

Answer 1

你能解决这个问题吗？我也有同样的问题？