SimformSolutionsPvtLtd / react-native-audio-waveform

React Native component to show audio waveform with ease in react native application ✨
MIT License
141 stars 22 forks source link

setPlaybackSpeed is not a function (it is undefined) #100

Closed Audeos closed 1 month ago

Audeos commented 1 month ago

Thanks for your work. I just updated my project with react-native-audio-waveform 2.1 from 2.0. There was a previous issue I mentioned about panResponders, which now seems solved. However I get this error on both my live and static waveforms. I hold a local state of PlaybackSpeedTypes between 1.0 | 1.5 | 2.0

image
nilesh-simform commented 1 month ago

Hi @Audeos, playbackSpeed is a prop for controlling the audio speed. To update the speed, simply change the value passed to this prop by updating the state as shown below. Thanks!

const playbackSpeedSequence = [1.0, 1.5, 2.0];
const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState(1.0);

const changeSpeed = () => {
    setCurrentPlaybackSpeed(
      prev =>
        playbackSpeedSequence[
          (playbackSpeedSequence.indexOf(prev) + 1) %
            playbackSpeedSequence.length
        ] ?? 1.0
    );
 };

const path = ''; // path to the audio file for which you want to show waveform
const ref = useRef<IWaveformRef>(null);

<Waveform
  mode="static"
  ref={ref}
  path={item}
  playbackSpeed={currentPlaybackSpeed}
  candleSpace={2}
  candleWidth={4}
  scrubColor="white"
/>;

<Pressable
  onPress={changeSpeed}>
  <Text>{`${currentPlaybackSpeed}x`}</Text>
</Pressable>
Audeos commented 1 month ago

I'm doing the same.

 const playbackSpeedSequence: PlaybackSpeedType[] = [1.0, 1.5, 2.0];

   const [currentPlaybackSpeed, setCurrentPlaybackSpeed] =
    useState<PlaybackSpeedType>(1.0);

     const handleChangePlaybackSpeed = () => {
    setCurrentPlaybackSpeed(
      (prev) =>
        playbackSpeedSequence[
          (playbackSpeedSequence.indexOf(prev) + 1) %
            playbackSpeedSequence.length
        ] ?? 1.0,
    );
  };

<Waveform
            mode="static"
            containerStyle={styles.soundWaveStyle}
            ref={soundWaveRef}
            path={filePathToDelete}
            candleSpace={theme.size.s02}
            candleWidth={theme.size.s04}
            scrubColor={waveColor || theme.colors.voicePlayerIcon}
            waveColor={theme.colors.soundWavePlaceholder}
            onCurrentProgressChange={handleCurrentProgressChange}
            onPlayerStateChange={setPlayerState}
            playbackSpeed={currentPlaybackSpeed}
            onError={handleSoundWaveError}
            onChangeWaveformLoadState={handleChangeWaveformLoadState}
          />
          {playerState === PlayerState.playing && (
            <Pressable onPress={handleChangePlaybackSpeed}>
              <Text>X{currentPlaybackSpeed}</Text>
            </Pressable>
          )}

However I get this error. image

Audeos commented 1 month ago

The issue should not be closed. Your answer stands trivial as it describes how it should be used, yet doesn't solve the problem. As I was already using it the way you described.

nilesh-simform commented 1 month ago

Hi @Audeos , please check this comment for your resolution. Thanks!