使用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.js

导入 WaveSurfer，从

video.js

导入 videojs。
使用此代码，可以播放音频文件，但屏幕上不显示任何内容。显示的错误如下：

VIDEOJS: ERROR: TypeError: this.Backend is not a constructor

Answer 1

我也一直在研究这个问题，但为了将 Howler.JS 与 HLS.JS 和 WaverSurfer.js 集成。

看看这个：https://github.com/katspaugh/wavesurfer.js/issues/1078它可能会解决你的问题。