After upgrading from version 7.7.5 to 7.8.5, the wave graph is not rendered

[TD-jizhijun]

Hi team, after upgrading from version 7.7.5 to 7.8.5, the wave graph is not rendered. I don't know where the problem is, could you give me some guidance?
Code details:

import React, { CSSProperties, useEffect, useRef, useState } from 'react';
import Box from '@cobalt/react-box';
import { useTheme } from '@cobalt/react-theme-provider';
import AudioPart from 'src/MediaPlayer/audio/AudioPart';
import styles from 'src/UnifiedPlayer/styles/helpers.module.scss';
import { waveReady } from 'src/UnifiedPlayer/utils/wave-utils';
import WaveSurfer from 'wavesurfer.js';

const WaveElementId = 'waveElementId';

const WAVE_HEIGHT = 50;
const BAR_WIDTH = 4;
const BAR_HEIGHT = 0.7;
const BAR_GAP = 2;

type Props = {
onSeek: (absoluteSeekPosition: number) => void;
data: {
audioParts: AudioPart[];
};
hasCookieAuthentication?: boolean;
};

const Waves: React.FC = ({
onSeek,
data,
hasCookieAuthentication = false,
}) => {
const audiosLoaded = useRef(false);
const [audioParts, setAudioParts] = useState<AudioPart[]>([]);
const [waves, setWaves] = useState<WaveSurfer[]>([]);
const [failedIndexes, setFailedIndexes] = useState<number[]>([]);
const theme = useTheme();

const MIDNIGHT_400 = theme.midnight400;
const MIDNIGHT_700 = theme.midnight700;

if (data.audioParts !== audioParts) {
setAudioParts(data.audioParts);
}

const onDestroy = () => {
if (waves?.length) {
// destroy WaveSurfer instances
waves.forEach((wave) => {
wave.unAll();
wave.destroy();
});

  // reset waves references and time grid divisions
  setWaves([]);
  setFailedIndexes([]);
  audiosLoaded.current = false;
}

};

useEffect(() => {
onDestroy();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [audioParts]);

useEffect(() => {
// wait for wave widths
if (!audioParts.length) {
return;
}

// eslint-disable-next-line no-console
console.log(111, audioParts);

const waveReadyPromises: Promise<void>[] = [];
const failed: number[] = [];

const channelOptions = {
  waveColor: MIDNIGHT_400,
  progressColor: MIDNIGHT_700,
  cursorColor: MIDNIGHT_700,
  barWidth: BAR_WIDTH,
  barGap: BAR_GAP,
  barAlign: 'bottom' as const,
};

const wavesurferOptions = {
  height: WAVE_HEIGHT,
  barHeight: BAR_HEIGHT,
  splitChannels: [channelOptions, channelOptions],
  normalize: false,
  cursorWidth: 3,
  fillParent: true,
  hideScrollbar: true,
};

const newWaves = audioParts.map((part, index) => {
  const wave = WaveSurfer.create({
    ...wavesurferOptions,
    container: `#${WaveElementId}_${index}`,
    ...(hasCookieAuthentication && {
      fetchParams: {
        cache: 'default',
        mode: 'cors',
        method: 'GET',
        credentials: 'include',
      },
    }),
  });

  // when wave resolved, add to ready Promises so we will have a global ready perception
  // eslint-disable-next-line fp/no-mutating-methods
  waveReadyPromises.push(
    waveReady(wave).catch(() => {
      if (!failed.includes(index)) {
        // eslint-disable-next-line fp/no-mutating-methods
        failed.push(index);
      }
    })
  );

  wave.setMediaElement(part.audio);

  return wave;
});

// after all loads, update loading flag
Promise.all(waveReadyPromises).then(() => {
  setWaves(newWaves);
  setFailedIndexes(failed);
  audiosLoaded.current = true;
});
// eslint-disable-next-line react-hooks/exhaustive-deps

}, [audioParts]);

// Watch for waves array change so we must subscribe to seek events
useEffect(() => {
if (!waves.length || !audiosLoaded.current) {
return;
}

const failedParts = audioParts.filter((_, index) =>
  failedIndexes.includes(index)
);

waves.forEach((wave) => {
  wave.unAll();
  wave.on('click', (value: number) => {
    // get the current audio part and corresponding index containing current audio
    const currentPartIndex = audioParts.findIndex(
      (part) => part.audio === wave.getMediaElement()
    );

    const currentPart = audioParts[currentPartIndex];

    // for failed audio (not in the filtered array) there is no seek
    if (failedParts.includes(currentPart)) {
      return;
    }

    onSeek(currentPart.relativeTime + currentPart.duration * value);
  });
});

}, [waves, onSeek, audioParts, failedIndexes]);

const wavesContainerStyle = {
backgroundColor: theme.midnight200,
height: WAVE_HEIGHT * 2,
} as CSSProperties;

const audioTotaltime = audioParts.reduce(
(prev, curr) => (curr.audio?.duration || curr.duration) + prev,
0
);

return (

{audioParts.map((audioPart, index) => {
const { audio }: { audio: HTMLAudioElement } = audioPart;

    const divWidth = audioPart.duration / audioTotaltime;

    return (
      <Box
        key={`gridWave-${audio?.src}`}
        className={`${WaveElementId} ${
          failedIndexes.includes(index) ? styles.failedWave : ''
        } ${styles.waveElement}`}
        data-duration={audio.duration > 0 ? audio.duration : 0}
        data-qa={`${WaveElementId}_${index}`}
        id={`${WaveElementId}_${index}`}
        width={`${divWidth * 100}%`}
      />
    );
  })}
</Box>

);
};

export default Waves;

Before:

After:

[katspaugh]

7.8.0 introduced lazy rendering. Only the currently visible portion of the waveform is rendered. This change didn’t introduce any public API changes. Make sure your code doesn’t rely on any internal elements.

[TD-jizhijun]

// A basic example

import WaveSurfer from 'wavesurfer.js'

const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  barHeight: 0.7,
  splitChannels: [
    {
      barWidth: 2,
      barGap: 2,
      barAlign: 'bottom',
    },
    {
      barWidth: 2,
      barGap: 2,
      barAlign: 'bottom',
    },
  ]
})
wavesurfer.once('ready', () => {
  wavesurfer.setMediaElement('<audio preload="auto" crossorigin="" src="blob:http://localhost:3000/9dfbddcc-c654-49b1-8926-d913f2570b0d"></audio>')
})
wavesurfer.on('click', () => {
  wavesurfer.play()
})

I made some changes in your project case and found that the waveform was not rendered. This is similar to what I implemented above. Do you know where the problem is?

[katspaugh]

Why do you expect setMediaElement to accept a string?

[TD-jizhijun]

I checked and printed the corresponding data, and they all have values, but the page is not rendered. I don't know why? The lazy render you mentioned above, for my code logic here, does it mean that I must set the URL first when creating it before loading the waveform?

[katspaugh]

I told you above, you're loading audio wrong. You're not loading any audio in fact.

[TD-jizhijun]

Hi team, after upgrading from version 7.7.5 to 7.8.5, the wave graph is not rendered. I don't know where the problem is, could you give me some guidance? Code details:

import React, { CSSProperties, useEffect, useRef, useState } from 'react'; import Box from '@cobalt/react-box'; import { useTheme } from '@cobalt/react-theme-provider'; import AudioPart from 'src/MediaPlayer/audio/AudioPart'; import styles from 'src/UnifiedPlayer/styles/helpers.module.scss'; import { waveReady } from 'src/UnifiedPlayer/utils/wave-utils'; import WaveSurfer from 'wavesurfer.js';

const WaveElementId = 'waveElementId';

const WAVE_HEIGHT = 50; const BAR_WIDTH = 4; const BAR_HEIGHT = 0.7; const BAR_GAP = 2;

type Props = { onSeek: (absoluteSeekPosition: number) => void; data: { audioParts: AudioPart[]; }; hasCookieAuthentication?: boolean; };

const Waves: React.FC = ({ onSeek, data, hasCookieAuthentication = false, }) => { const audiosLoaded = useRef(false); const [audioParts, setAudioParts] = useState<AudioPart[]>([]); const [waves, setWaves] = useState<WaveSurfer[]>([]); const [failedIndexes, setFailedIndexes] = useState<number[]>([]); const theme = useTheme();

const MIDNIGHT_400 = theme.midnight400; const MIDNIGHT_700 = theme.midnight700;

if (data.audioParts !== audioParts) { setAudioParts(data.audioParts); }

const onDestroy = () => { if (waves?.length) { // destroy WaveSurfer instances waves.forEach((wave) => { wave.unAll(); wave.destroy(); });

  // reset waves references and time grid divisions
  setWaves([]);
  setFailedIndexes([]);
  audiosLoaded.current = false;
}

};

useEffect(() => { onDestroy(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [audioParts]);

useEffect(() => { // wait for wave widths if (!audioParts.length) { return; }

// eslint-disable-next-line no-console
console.log(111, audioParts);

const waveReadyPromises: Promise<void>[] = [];
const failed: number[] = [];

const channelOptions = {
  waveColor: MIDNIGHT_400,
  progressColor: MIDNIGHT_700,
  cursorColor: MIDNIGHT_700,
  barWidth: BAR_WIDTH,
  barGap: BAR_GAP,
  barAlign: 'bottom' as const,
};

const wavesurferOptions = {
  height: WAVE_HEIGHT,
  barHeight: BAR_HEIGHT,
  splitChannels: [channelOptions, channelOptions],
  normalize: false,
  cursorWidth: 3,
  fillParent: true,
  hideScrollbar: true,
};

const newWaves = audioParts.map((part, index) => {
  const wave = WaveSurfer.create({
    ...wavesurferOptions,
    container: `#${WaveElementId}_${index}`,
    ...(hasCookieAuthentication && {
      fetchParams: {
        cache: 'default',
        mode: 'cors',
        method: 'GET',
        credentials: 'include',
      },
    }),
  });

  // when wave resolved, add to ready Promises so we will have a global ready perception
  // eslint-disable-next-line fp/no-mutating-methods
  waveReadyPromises.push(
    waveReady(wave).catch(() => {
      if (!failed.includes(index)) {
        // eslint-disable-next-line fp/no-mutating-methods
        failed.push(index);
      }
    })
  );

  wave.setMediaElement(part.audio);

  return wave;
});

// after all loads, update loading flag
Promise.all(waveReadyPromises).then(() => {
  setWaves(newWaves);
  setFailedIndexes(failed);
  audiosLoaded.current = true;
});
// eslint-disable-next-line react-hooks/exhaustive-deps

}, [audioParts]);

// Watch for waves array change so we must subscribe to seek events useEffect(() => { if (!waves.length || !audiosLoaded.current) { return; }

const failedParts = audioParts.filter((_, index) =>
  failedIndexes.includes(index)
);

waves.forEach((wave) => {
  wave.unAll();
  wave.on('click', (value: number) => {
    // get the current audio part and corresponding index containing current audio
    const currentPartIndex = audioParts.findIndex(
      (part) => part.audio === wave.getMediaElement()
    );

    const currentPart = audioParts[currentPartIndex];

    // for failed audio (not in the filtered array) there is no seek
    if (failedParts.includes(currentPart)) {
      return;
    }

    onSeek(currentPart.relativeTime + currentPart.duration * value);
  });
});

}, [waves, onSeek, audioParts, failedIndexes]);

const wavesContainerStyle = { backgroundColor: theme.midnight200, height: WAVE_HEIGHT * 2, } as CSSProperties;

const audioTotaltime = audioParts.reduce( (prev, curr) => (curr.audio?.duration || curr.duration) + prev, 0 );

return ( {audioParts.map((audioPart, index) => { const { audio }: { audio: HTMLAudioElement } = audioPart;

    const divWidth = audioPart.duration / audioTotaltime;

    return (
      <Box
        key={`gridWave-${audio?.src}`}
        className={`${WaveElementId} ${
          failedIndexes.includes(index) ? styles.failedWave : ''
        } ${styles.waveElement}`}
        data-duration={audio.duration > 0 ? audio.duration : 0}
        data-qa={`${WaveElementId}_${index}`}
        id={`${WaveElementId}_${index}`}
        width={`${divWidth * 100}%`}
      />
    );
  })}
</Box>

); };

export default Waves;

Before:

After:

In my own actual code, audio is the correct audio element, because the function was normal before the upgrade, but it was not rendered after the upgrade.

[TD-jizhijun]

[TD-jizhijun]

Hi @katspaugh, I have found the problem. The update of version 7.7.15 seems to affect the setMediaElement method. I don't know if it is a bug, but I have solved it by passing the value through the media field when creating. You can verify whether setMediaElement is available when you have time. At present, I found that waveform rendering cannot be performed using this method.

[katspaugh]

I’ll check, thanks!