yarn add react-native-simple-audio
cd ios && pod install && cd .. # CocoaPods on iOS needs this extra step
react-native run-ios
or build manually:
xed -b ios
- Run project in Xcode
Currently, there are two other changes that need to take place before the app will properly build.
- This package has a minimum requirement of iOS 10.0. So if you are building an application for anything lower than 10.0, you need to go into
<YOUR PROJECT>/ios/Podfile
and change the first line toplatform :ios, '10.0'
. - There's a strange build issue that seems to sometimes occur with Swift based custom modules: https://stackoverflow.com/questions/52536380/why-linker-link-static-libraries-with-errors-ios/54586937#54586937 Following these steps fixes the issue. I will work on either automating this or hopefully a future version of RN will eliminate the need.
COMING SOON
import {
ActivityIndicator,
Button,
View,
Text
} from 'react-native';
import { useAudioPlayer } from 'react-native-simple-audio';
export const Player = ({ url }) => {
const [player, error] = useAudioPlayer(url);
if (error) {
// handle error
console.log(error);
}
return (
<View>
{player.status.loading && !player.status.ready ? (
<ActivityIndicator size="large" />
) : (
<>
<Button
title={`${player.status.playing ? 'Pause' : 'Play'}`}
color="#f194ff"
onPress={player.toggleAudio}
/>
<Button
title="Back 20 seconds"
color="#f194ff"
onPress={() => player.seekBackwards(20)}
/>
<Button
title="Forward 20 seconds"
color="#f194ff"
onPress={() => player.seekForwards(20)}
/>
<Text>
{player.status.currentTime.formatted} -
{player.status.duration.formatted}
</Text>
</>
)}
</View>
)
};
// Player component usage with remote url
<Player url="www.site.com/foo.mp3" />
- Add full example
- Add Android functionality