Show currentTime & duration about react-native-sound-player HOT 11 CLOSED

Hi @jaccotaco, you can try calling getInfo() and play() inside FinishedLoadingFile or FinishedLoadingURL callback block, and use loadUrl or loadSoundFile to play the music. Something like this:

  // Subscribe to event(s) you want when component mounted
  componentDidMount() {
    _onFinishedLoadingFileSubscription = SoundPlayer.addEventListener('FinishedLoadingFile', async ({ success, name, type }) => {
      console.log('finished loading file', success, name, type)
	  const info = await SoundPlayer.getInfo()
	  this.setState(...)
      SoundPlayer.play()
    })
    _onFinishedLoadingURLSubscription = SoundPlayer.addEventListener('FinishedLoadingURL', async ({ success, url }) => {
      console.log('finished loading url', success, url)
	  const info = await SoundPlayer.getInfo()
	  this.setState(...)
      SoundPlayer.play()
    })
  }

  // Remove all the subscriptions when component will unmount
  componentWillUnmount() {
    _onFinishedLoadingURLSubscription.remove()
    _onFinishedLoadingFileSubscription.remove()
  }

from react-native-sound-player.

Hi @jaccotaco, how are you calling the getInfo() function? Make sure you have the state in the function scope. If you add console.log('state', this.state) right after the try, do you get the state?

from react-native-sound-player.

@johnsonsu Hi! I call it on the "start-button", Finally I want to show a slider depended on the duration of the song. Do you have any ideas how to achive that?

from react-native-sound-player.

@johnsonsu But how can I show do duration in a state? When I do GetInfo() I get both currentTime and duration in a object, can I split them in some way to just get the duration?

from react-native-sound-player.

Yes, there are many ways to do it, for example a decontruct:

const { duration } = await SoundPlayer.getInfo()

Or you can event store both values in the state by doing:

const info = await SoundPlayer.getInfo()
this.setState({
  ...info,
})

from react-native-sound-player.

@johnsonsu I see, Thank you, It works:)

from react-native-sound-player.

@jaccotaco i m not getting the Current Time i m just Getting the Duration
// this is how i tried
componentDidMount() {
_onFinishedLoadingURLSubscription = SoundPlayer.addEventListener('FinishedLoadingURL', async ({ success, url }) => {
console.log('finished loading url', success, url)
const info = await SoundPlayer.getInfo()
console.log('INFO : ', info)
})
}
componentWillUnmount() {
_onFinishedLoadingURLSubscription.remove()
console.log('Umount is called')
}

Please Help

Thank You in Advance

from react-native-sound-player.

@johnsonsu i m not getting the Current Time i m just Getting the Duration
// this is how i tried
componentDidMount() {
_onFinishedLoadingURLSubscription = SoundPlayer.addEventListener('FinishedLoadingURL', async ({ success, url }) => {
console.log('finished loading url', success, url)
const info = await SoundPlayer.getInfo()
console.log('INFO : ', info)
})
}
componentWillUnmount() {
_onFinishedLoadingURLSubscription.remove()
console.log('Umount is called')
}

Please Help

Thank You in Advance

from react-native-sound-player.

@Harsh-shah-coder Hi!

This is how I store it in a state. And split it up so it looks like 1:20 eg.

async getDuration() {
const { duration } = await SoundPlayer.getInfo();
const minutesnow = Math.floor(duration / 60);
const secondsnow = Math.floor(duration % 60);
try {
this.setState({ maxvalue: duration });
this.setState({ durationsec: secondsnow });
this.setState({ durationmin: minutesnow });
} catch (e) {
console.log("There is no song playing", e);
}
}

from react-native-sound-player.

Thanks For Reply @jaccotaco But i m not getting the Value of Current Time

// this is how i tried
componentDidMount() {
_onFinishedLoadingURLSubscription = SoundPlayer.addEventListener('FinishedLoadingURL', async ({ success, url }) => {
console.log('finished loading url', success, url)
const info = await SoundPlayer.getInfo()
console.log('INFO : ', info)
})
}
componentWillUnmount() {
_onFinishedLoadingURLSubscription.remove()
console.log('Umount is called')
}

Please Help

Thank You in Advance

from react-native-sound-player.

@jaccotaco @johnsonsu I m getting Value of Current Time But need to convert it in 00:00 format so how can i do this any suggestion

desire OutPut : 00:00 , 00:01 , 00:02 like wise

// this is how i tried
async getInfo() {

try {
  const info = await SoundPlayer.getInfo();
  console.log('getInfo', info.currentTime)
  const minuteRound = Math.round(info.currentTime );
  const minuteFloor = Math.floor((info.currentTime % 1000) / 10);
  // const minuteFloor = Math.floor(info.currentTime );
  // const minuteFloor = Math.floor(info.currentTime / 60);
  // const secondRound = Math.round(info.currentTime % 60);
  // const secondFloor = Math.floor(info.currentTime % 60);

  console.log('DURATION : ', info.currentTime)
  console.log('minuteRound : ', minuteRound)
  console.log('minuteFloor : ', minuteFloor)
  // {duration: 12.416, currentTime: 7.691}
} catch (e) {
  console.log("There is no song playing", e);
}

}

Please Help
Thank You in Advance

from react-native-sound-player.