Waveform Not Rendering for Dynamic Audio Files

[scrapecoder]

trafficstars

The Waveform component does not generate a visual waveform when loading a dynamically provided audio file, even though the file exists and plays correctly.

Steps to Reproduce

• Pass a valid audio file path (.mp3) to the Waveform component.
• Call startPlayer() to ensure the audio plays.
• Observe that the waveform does not appear, even though onPlayerStateChange logs "stopped" or "playing" correctly.

Expected Behavior

• The waveform should be rendered correctly when the audio file is loaded.
• The visualization should reflect the audio playback.

Observed Behavior

• The waveform does not appear.
• Audio playback works correctly when startPlayer() is called.
• onPlayerStateChange logs "stopped" even after playback starts.

This works

[1,2].map(() => {
 <View style={{ height: 50, width, borderWidth: 1, borderColor: 'red' }}>
      <Waveform
        ref={ref}
        mode="static"
        path={`${music}`} // Tried with and without file://
        containerStyle={{ borderWidth: 1, borderColor: 'yellow', flex: 1 }}
        candleSpace={4}
        candleWidth={4}
        waveColor="#FFFFFF"
        candleHeightScale={5}
        onError={err => console.log('Waveform Error:', err)}
        onPlayerStateChange={playerState => console.log('Player State:', playerState)}
      />
    </View>
})

But this doesn't

data.map(() => {
 <View style={{ height: 50, width, borderWidth: 1, borderColor: 'red' }}>
      <Waveform
        ref={ref}
        mode="static"
        path={`${music}`} // Tried with and without file://
        containerStyle={{ borderWidth: 1, borderColor: 'yellow', flex: 1 }}
        candleSpace={4}
        candleWidth={4}
        waveColor="#FFFFFF"
        candleHeightScale={5}
        onError={err => console.log('Waveform Error:', err)}
        onPlayerStateChange={playerState => console.log('Player State:', playerState)}
      />
    </View>
})

[kuldip-simform]

@scrapecoder We will check what can cause this issue. Thank you for reporting.

[kuldip-simform]

@scrapecoder Can you please share screen recording to help us resolve the issue?

[ramezrafla]

@kuldip-simform @scrapecoder -- we are seeing the same issue on Android. When we download an audio, we don't see the waveform. We can still play it.

This was not the behavior in previous versions, testing now which version works and I'll report back.

[ramezrafla]

I think I figured it out -- at least in our case. We are use expo in our case, so local files URI start with 'file:///' -- remove 'file://' keeping the last forward slash (e.g. '/data/user...') and it will load the waveform @scrapecoder -- please test

[kuldip-simform]

@ramezrafla Thank you for your comment. @scrapecoder Can you please let us know if this solution works for you or not? as we have not found an issue in our testing.

[Tom-Ski]

Had this same issue, removing the file:// loaded correctly. (Android)

[Yigitozcelep]

Also i am using expo i encounter same issue in ios simulator