daniel-hayes/react-native-simple-audio


A simple react native audio module

License: Apache-2.0

Language: TypeScript

Keywords: android, audio, audio-player, react, react-hooks, react-native, react-native-module, swift5, typescript


react-native-simple-audio

codecov npm version

Install

yarn add react-native-simple-audio

iOS

cd ios && pod install && cd .. # CocoaPods on iOS needs this extra step

Run

react-native run-ios

or build manually:

  1. xed -b ios
  2. Run project in Xcode

NOTE ABOUT iOS USAGE

Currently, there are two other changes that need to take place before the app will properly build.

  1. 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 to platform :ios, '10.0'.
  2. 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.

Android

COMING SOON

Example usage

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" />

TODO

  • Add full example
  • Add Android functionality

Project Statistics

Sourcerank 2
Repository Size 400 KB
Stars 0
Forks 0
Watchers 1
Open issues 0
Dependencies 1,055
Contributors 1
Tags 7
Created
Last updated
Last pushed

Top Contributors See all

Daniel Hayes

Packages Referencing this Repo

react-native-simple-audio
A simple react native audio module
Latest release 1.5.1 - Updated

Recent Tags See all

v1.5.1 November 29, 2019
v1.5.0 November 28, 2019
v1.4.0 November 19, 2019
v1.3.0 November 19, 2019
v1.2.0 November 18, 2019
v1.1.0 November 13, 2019
v1.0.2 November 12, 2019

Something wrong with this page? Make a suggestion

Last synced: 2019-11-19 03:10:30 UTC

Login to resync this repository