Duration is 0 until loaded track is played if using {autoPlay: false}

[maestrodrew]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Affected platforms

• iOS
• Android
• Web

Bug summary

The value of duration is always 0 until the loaded track is played. It would be nice if duration would report the length of the track correctly before the track is played as I would like to be able to show the user the length of the track before they press the play button.

Library version

9.9.1

Environment info

System:
  OS: macOS 15.5
  CPU: (10) arm64 Apple M1 Pro
  Memory: 1.35 GB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.10.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.2.3
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2412.12266719
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.12
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 19.1.0
    wanted: latest
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.5
    wanted: 0.76.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Steps to reproduce

1. Call AudioPro.play({...trackInfo}, {autoPlay: false});
2. Check value of duration using const { duration } = useAudioPro()
3. Duration will always be 0 until you call AudioPro.play()

Can be reproduced in the example app?

• Yes, I can reproduce this in the example app.

Reproducible example repository

https://github.com/evergrace-co/react-native-audio-pro

[bradfloodx]

I'm a bit confused. The reason we have autoPlay=false is so you can pre-load the file and get all the meta data, without playing.

The player can't know the duration without fetching and buffering the file.

[maestrodrew]

In my particular use case, a user makes a voice recording in my app and once they are done recording, we give them the option to listen to the recording. We do not start playing it automatically but we do bring up a player with a play button and a seek bar. I'd like to be able to indicate the recording length to the user in this player.

[bradfloodx]

Hmm ok I'm not clear what you're asking then? You want audio pro to get the duration of an audio file but you don't want to call play on the audio file? Sounds like a job for another library.

[maestrodrew]

The user may at some point play the file but not always. It sounds like this is not an intended use case for this library. Feel free to close this issue.

[bradfloodx]

Yeah, it sounds like you want a library that can read a local or remote audio file and determine its duration. This library can do that, but it's designed to be a player, so you just have to start playing with autoPlay false or something like that. Still, that'll do a lot more behind the scenes work, like notifications and things. So yeah, probably not your perfect match.

[nickmcmillan]

Would you have any advice on how to retrieve the duration using this library?

I'm trying the following but duration is always 0.

AudioPro.play(
      {
        id: source.uri,
        url: source.uri,
        title,
        artist,
        artwork,
      },
      {
        autoPlay: false,
      },
    )

    const { duration, position } = AudioPro.getTimings()

I'd love to achieve this without needing a separate request (or extra library) to retrieve the audio file just to determine its duration.

[cveklica]

I agree with @maestrodrew, if library is designed to be a player (as @bradfloodx said), then we should have total audio duration from start before playing.

[brianlenz]

Yeah, it sounds like you want a library that can read a local or remote audio file and determine its duration. This library can do that, but it's designed to be a player, so you just have to start playing with autoPlay false or something like that. Still, that'll do a lot more behind the scenes work, like notifications and things. So yeah, probably not your perfect match.

@bradfloodx What you described here makes total sense, but it's not how RNAP is working currently. If you call play() with autoPlay: false, the duration is not included in the standard progress/state change events (until you actually start playing). In our case, we're bootstrapping the player to get it ready to play the track without yet starting to play, and we need the duration to be displayed in the player.

This seems rather familiar to a fix you made in #131. We can't use the v11 beta right now because it has a bug in Android with excessive notifications (every time we play a track, we first hear the Android notification "ding" before the track plays, which might be #137?).

In any event, we are running v10.1.2 right now and having this issue with duration not being exposed. I have come up with a patch to fix the issue in v10: react-native-audio-pro-npm-10.1.2-2eb09bb757.patch

Since it looks like you might have already fixed the issue in Android (at least the code changes in #131 are very similar), I've created a similar patch for the duration issue with autoPlay: false in iOS: #149

Let me know what you think!