javascript - How to play audio from a URL in React Native app? - Stack Overflow

admin管理员组

文章数量:1398840

I have been trying to play the audio from a Youtube video (or .mp3 URL) in my React Native app. For my purposes, I cannot download the audio files to my device, they need to be streamed from the internet. I tried both Expo AV and React-Native-Sound-Player libraries but none were able to play the audio.

For testing the URL I am using is: .mp3.

When I go to use the loadUrl() function in React-Native-Sound-Player, I get an error saying "Cannot read property 'loadUrl' of null". Same issue with play URL.

Does anyone have any experience streaming an audio from a URL in their apps? Is it even possible?

Any advice is appreciated.

Using this block of code to store the mp3 file in "currentSong" results in the error [TypeError: Cannot read property 'loadUrl' of null].

 try {
  currentSong = SoundPlayer.loadUrl('.mp3');
 } catch (e) {
  console.error(e);

I also tried using the react-native-video library and used the following code to no avail:

<Video source = {{uri: ".mp4"}}
                ref={(ref) => {
                  this.player = ref
                }}                                      // Store reference
                onBuffer={this.onBuffer}                // Callback when remote video is buffering
                onError={this.videoError}               // Callback when video cannot be loaded
                style = {styles.video} /> 

I get the following error: TypeError: Cannot read property 'Constants' of null

I have been trying to play the audio from a Youtube video (or .mp3 URL) in my React Native app. For my purposes, I cannot download the audio files to my device, they need to be streamed from the internet. I tried both Expo AV and React-Native-Sound-Player libraries but none were able to play the audio.

For testing the URL I am using is: https://www.soundhelix./examples/mp3/SoundHelix-Song-1.mp3.

When I go to use the loadUrl() function in React-Native-Sound-Player, I get an error saying "Cannot read property 'loadUrl' of null". Same issue with play URL.

Does anyone have any experience streaming an audio from a URL in their apps? Is it even possible?

Any advice is appreciated.

Using this block of code to store the mp3 file in "currentSong" results in the error [TypeError: Cannot read property 'loadUrl' of null].

 try {
  currentSong = SoundPlayer.loadUrl('https://www.soundhelix./examples/mp3/SoundHelix-Song-1.mp3');
 } catch (e) {
  console.error(e);

I also tried using the react-native-video library and used the following code to no avail:

<Video source = {{uri: "https://storage.googleapis./gtv-videos-bucket/sample/BigBuckBunny.mp4"}}
                ref={(ref) => {
                  this.player = ref
                }}                                      // Store reference
                onBuffer={this.onBuffer}                // Callback when remote video is buffering
                onError={this.videoError}               // Callback when video cannot be loaded
                style = {styles.video} /> 

I get the following error: TypeError: Cannot read property 'Constants' of null

• javascript
• react-native
• expo-av
• react-native-sound

Share Improve this question Follow edited May 11, 2023 at 19:59 A. Eddy Nangia asked May 11, 2023 at 18:59 A. Eddy NangiaA. Eddy Nangia 3111 gold badge11 silver badge33 bronze badges 1

• Did you solve the problem? I am trying expo-av, but it doesn't work either - stackoverflow./questions/76706375 – Ferran Maylinch Commented Jul 17, 2023 at 23:10

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

You can use react-native-track-player library for audio player.

using expo-av i have solved your issue. check this link and click on play sound.

https://snack.expo.dev/QKPkWENMeGAWW0B2GldoN

I am not sure whether yours issue has resolved or not but one solution that I tried on your problem and it is working fine on my side, You need to use SoundPlayer.playUrl(url) instead of loadUrl()

Try this :

  try {
  currentSong = SoundPlayer.playUrl('https://www.soundhelix./examples/mp3/SoundHelix-Song-1.mp3');
 } catch (e) {
  console.error(e);

loadUrl() did something different as stated by author of the package

loadUrl(url: string) Load the audio from the given url without playing it. You can then play the audio by calling play(). This might be useful when you find the delay between calling playUrl() and the sound actually starts playing is too much.

If you want to do music player stuff, you can use react-native-sound or use if you simply want to play basic sounds react-native-sound-player

;Hi! Try to use expo-av library: https://docs.expo.dev/versions/latest/sdk/av/

本文标签： javascriptHow to play audio from a URL in React Native appStack Overflow