react-use-audio-player - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

package.json

 {
     "name": "react-use-audio-player",
-    "version": "0.0.5",
-    "description": "Custom hook & context for controlling browser audio",
+    "version": "0.0.6",
+    "description": "React hook for building custom audio playback controls",
     "main": "dist/index.js",
@@ -17,3 +17,5 @@ "types": "dist/index.d.ts",
         "howler",
-        "sound"
+        "sound",
+        "react-howler",
+        "howler.js"
     ],
@@ -20,0 +22,0 @@ "scripts": {

README.md

@@ -7,22 +7,24 @@ # react-use-audio-player
 
-## Setup
+## Install
 
-Install with `npm` or `yarn`
-
 ```bash
-npm install react-use-audio-player
-```
-
-```bash
 yarn add react-use-audio-player
 ```
 
+## TypeScript
+
+For convenience, the library's type definitions are included in the package under `index.d.ts`.
+
 ## Usage
 
-This library exports a context Provider and two hooks for managing the audio instance and consuming its state.
+This library exports a context Provider and two hooks for controlling the audio source.
 
-#### \<AudioPlayerProvider>
+<br/>
 
+> #### AudioPlayerProvider
+
 This Provider is required for the hooks to function.
-The Provider manages an audio instance and exposes an interface for manipulating the audio through the API of the hooks.
+The Provider contains a single audio source and exposes an interface for manipulating it via the `useAudioPlayer` hook.
+The benefit of having a single, shared audio source is that it allows the developer to compose together multiple components that share knowledge about the audio.
+For example, you may have separate components `PlayPauseButton`, `SeekBar` and `VolumeControls` all working together on the same audio source.
 
@@ -36,3 +38,3 @@ ```javascript
         <AudioPlayerProvider>
-            <AudioPlayer audio="meow.mp3" />
+            <AudioPlayer file="meow.mp3" />
         </AudioPlayerProvider>
@@ -43,4 +45,6 @@ )
 
-#### useAudioPlayer
+<br/>
 
+> #### useAudioPlayer
+
 This is the main hook for controlling your audio instance.
@@ -54,5 +58,5 @@
 
-const AudioPlayer = ({ audio }) => {
+const AudioPlayer = ({ file }) => {
     const { play, pause, playbackReady, loading, isPlaying } = useAudioPlayer(
-        audio
+        file
     )
@@ -81,46 +85,48 @@
 
-##### API
+#### API
 
-#### `loading: boolean`
+##### `loading: boolean`
 
 true if audio is being fetched
 
-#### `playbackReady: boolean`
+##### `playbackReady: boolean`
 
 true if the audio has been loaded and can be played
 
-#### `error: Error`
+##### `error: Error`
 
 set when audio has failed to load
 
-#### `play: function`
+##### `play: function`
 
 plays the loaded audio
 
-#### `pause: function`
+##### `pause: function`
 
 pauses audio
 
-#### `stop: function`
+##### `stop: function`
 
 stops the audio, returning the position to 0
 
-#### `loadAudio: function(url: string)`
+##### `loadAudio: function(url: string)`
 
 loads an audio file
 
-#### `isPlaying: function: boolean`
+##### `isPlaying: function: boolean`
 
 true is the audio is currently playing
 
-#### `seek: function(position: number)`
+##### `seek: function(position: number)`
 
 sets the position of the audio to position (seconds)
 
-#### `mute: function`
+##### `mute: function`
 
 mutes the audio
 
-#### useAudioPosition
+<br/>
 
+> #### useAudioPosition
+
 This hooks exposes the current position and duration of the audio instance as its playing in real time (60 fps via [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)).
@@ -147,2 +153,12 @@ This data may be useful when animating a visualization for your audio like a seek bar.
 
+#### API
+
+##### `position: number`
+
+the current playback position of the audio in seconds
+
+##### `duration: number`
+
+the total length of the audio in seconds
+
 ## Examples
@@ -154,3 +170,3 @@
 2. `cd useAudioPlayer/examples`
-3. `yarn/npm install`
+3. `yarn install`
 4. `yarn start`
@@ -157,0 +173,0 @@ 5. follow the local README for further assistance

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16286

increased by3.5%

Number of lines in readme file

178

increased by9.88%

No dependency changes