cannot play in ios with base64 audio

[thureintun-me]

Describe the Bug when i playing base64 audio with track player it works well on ios 15,16 etc.but it deosn't work on ios 17 beta and ios 14. I am testing with both physical devices and simulators.May be this with something to do with base64 audio memory stream. But we need this kind of features to carete encrypted/decrypted audio player.

{"error": {"code": "ios_track_unplayable", "message": "The track could not be played"}, "state": "error"} this is error message from track player.

StreamingPlaylist_VerifyLeadingMagicNumber: missing #EXTM3U (this is error message from xcode) Steps To Reproduce How can someone else reproduce this bug?

Code To Reproduce const App = () => { const track1 = { url: data:audio/wav;base64,${auidoBase64}, // Load media from the app bundle title: 'Coelacanth I', artist: 'deadmau5', // Load artwork from the app bundle duration: 166, };

const track2 = { url: require('./auido/file_example_WAV_2MG.wav'), // Load media from the app bundle title: 'Coelacanth I', artist: 'deadmau5', // Load artwork from the app bundle duration: 166, };

const setUpPlayer = async () => { await TrackPlayer.setupPlayer({ iosCategory:IOSCategory.PlayAndRecord,

});

}; useEffect(() => { setUpPlayer(); }, []);

const duration = useProgress().duration; const position = useProgress().position;

const addSong = async () => { await TrackPlayer.add({ ...track1,

  contentType:'audio/wav',
  pitchAlgorithm:PitchAlgorithm.Linear
});
console.log("Successfully added song...")

};

const playSong = async () => { await TrackPlayer.play(); console.log("Successfully Play song...") };

const pauseSong = async () => { await TrackPlayer.pause(); console.log("Successfully Pause song...") };

const resetSong = async () => { await TrackPlayer.reset(); console.log("Successfully Reset song...") };

console.log("Progress==>",useProgress()) console.log("State===>",usePlaybackState()) return ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> <View style={{ flexDirection: 'row', width: 100, justifyContent: 'space-between', marginBottom: 30, }}>

{duration}

    <Text>{position}</Text>
  </View>
  <Pressable style={{marginBottom: 10}} onPress={playSong}>
    <Text>Play</Text>
  </Pressable>
  <Pressable style={{marginBottom: 10}} onPress={pauseSong}>
    <Text>Pause</Text>
  </Pressable>

  <Pressable onPress={addSong}>
    <Text>Add</Text>
  </Pressable>

  <Pressable onPress={resetSong}>
  <Text>Reset</Text>
</Pressable>
</View>

); };

export default App;

Replicable on Example App? Can you replicate this bug in the React Native Track Player Example App?

Environment Info: System: OS: macOS 13.4 CPU: (8) x64 Apple M1 Memory: 26.90 MB / 8.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 16.14.0 path: /usr/local/bin/node Yarn: version: 1.22.19 path: /usr/local/bin/yarn npm: version: 9.6.7 path: /usr/local/bin/npm Watchman: Not Found Managers: CocoaPods: version: 1.11.3 path: /usr/local/bin/pod SDKs: iOS SDK: Not Found Android SDK: Not Found IDEs: Android Studio: 2021.1 AI-211.7628.21.2111.8193401 Xcode: version: /undefined path: /usr/bin/xcodebuild Languages: Java: version: 11.0.15 path: /usr/bin/javac Ruby: version: 2.6.10 path: /usr/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.3 wanted: 0.72.3 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false "react-native-track-player": "^3.2.0 both device and simualtors macos version 13.5

How I can Help What can you do to help resolve this? Have you investigated the underlying JS or Swift/Android code causing this bug?

Can you create a Pull Request with a fix?

[dcvz]

If its an issue with iOS 17, it might be a bug -- but missing #EXTM3U seems to me that its expecting an HLS stream and its not receiving a valid one. What type are you giving to your tracks? https://rntp.dev/docs/next/api/objects/track

[thureintun-me]

normally we leave it to default type in our actual project.It not just on iOS 17 ,it was happened in iOS 14 too.What can i do?Our app is already on production.

[dcvz]

@thureintun-me can you get the example project to reproduce this and share it here?

[thureintun-me]

Sure ! here is example project ro reproduce ==> https://github.com/thureintun-me/RNTPBase64

in order to test u need iOS 17 running physical device or xcode beta 15.2

above sample project (base64 memory string play) work well on android.but in iOS it can only paly local song.

[thureintun-me]

@dcvz is there anything I can do to make it work?

[dcvz]

I'm sorry @thureintun-me but this is unfortunately not currently at the top of my list. I've been busy getting v4 ready for release and with some paid sponsors work. I won't be able to look right away but I'll look when I can

[thureintun-me]

@dcvz Thanks anyway 💯

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[GITyannie]

@thureintun-me did you get any resolution for this? I'm experiencing a similar issue too on iOS 17.

[dcvz]

No fixes for this yet!

[thureintun-me]

Event.PlaybackState {"error": {"code": "ios_track_unplayable", "message": "The track could not be played"}, "state": "error"} LOG Event.PlaybackProgressUpdated {"error": "The operation couldn’t be completed. (SwiftAudioEx.AudioPlayerError.PlaybackError error 4.)"}. this is the update issues logs from RNTP version 4.1.0 @dcvz and @GITyannie we still cannot solve the issues let us know when you fin a way to solve

[HYUNSOOSHIN]

@dcvz same issue. Please help me 😭

[nilofardiwangroovy]

useTrackPlayerEvents(events, async event => { console.log('🚀🚀🚀', event); }

const track: any = { id: item?.id, creator: item.creator, url: item?.voice, // https audio URL which plays in Android and browser as well duration: 411, title: item?.description, artwork: 'https://imgtr.ee/images/2023/03/01/Riqm1.png', artist: item?.creator?.level, }; await TrackPlayer.add([track]); await TrackPlayer.play();

🚀🚀🚀 {"error": {"code": "ios_track_unplayable", "message": "The track could not be played"}, "state": "error", "type": "playback-state"} 🚀🚀🚀 {"error": "The operation couldn’t be completed. (SwiftAudioEx.AudioPlayerError.PlaybackError error 4.)", "type": "playback-error"}

works well on Android. but in iOS it shows above error.

[naumanpathan]

I am having the same problem audio file working fine on Android devices, In IOS returning an error

{"error": {"code": "ios_track_unplayable", "message": "The track could not be played"}, "state": "error", "type": "playback-state"} {"error": "The operation couldn’t be completed. (SwiftAudioEx.AudioPlayerError.PlaybackError error 4.)", "type": "playback-error"}

I have an old app code (Developed 1 year ago) and in the old code, it is working fine on both devices. I applied the same code event I used the old version also, but in the new project not working.

Please help me out with this as I have already spent 4 weeks

[WilliamsDima]

I think I found a solution for myself, but I'm not sure if it will work for you. I download audio using
rn-fetch-blob, with this config. I added the wav format for ios.

const { config } = RNFetchBlob
const options = {
  fileCache: true,
  appendExt: IS_IOS ? 'wav' : '',
}
// @ts-ignore
const url = voice?.uri
  ? // @ts-ignore
    voice?.uri
  : await config(options)
      .fetch('GET', voice?.main_url || '')
      .catch((error) => {
        console.log('%c voice dowload error', 'color: red', error)
      })

I also added type when adding a track, I don't know if it affects the final result of the work.

const addTrack = async () => {
    const track: AddTrack = {
      url: urlVoice, // Load media from the network
      title: 'Voice message',
      // @ts-ignore
      date: voice?.created_at || new Date(voice?.id).toUTCString(), // RFC 3339
      id: voice?.id,
       type: IS_IOS ? TrackType.HLS : TrackType.Default,
    }

    return await TrackPlayer.add(track)
}

To record audio, I use react-native-audio-recorder-player, with the following settings:

const audioRecorderPlayer = new AudioRecorderPlayer()

const audioSet: AudioSet = {
  AudioEncoderAndroid: AudioEncoderAndroidType.AAC,
  AudioSourceAndroid: AudioSourceAndroidType.MIC,
  AVModeIOS: AVModeIOSOption.measurement,
  AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high,
  AVNumberOfChannelsKeyIOS: 2,
  AVFormatIDKeyIOS: AVEncodingOption.aac,
}

const dirs = RNFetchBlob.fs.dirs

const date = +new Date()

const path = Platform.select({
  ios: dirs.DCIMDir + `/audio-message-${date}.m4a`,
  android: `${dirs.CacheDir}/audio-message-${date}.mp3`,
})

console.log('audio path', path)

await audioRecorderPlayer.startRecorder(path, audioSet, true)

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.