rehawk v0.2.6
Rehawk
Work with audio in React it's painful sometimes, that's why this library was created. Especially in React, there are not too many good libraries out there to work with audio.
Rehawk is a powerful and lightweight library that aims to make things easier for you to start to work with audio. Using the Audio API, a custom React Hook powered by an XState finite state machine, it brings a lot of functionalities and methods for you to start faster your development, without having to waste time implementing anything.
Feel free to submit a PR.
Install
yarn add rehawk
Usage
All you need to do is import the RehawkProvider
context and the useRehawk
hook. Context was the best choice here because sometimes we might want to use different properties of our custom hook in different components in our React tree.
The following is a very basic usage example of Rehawk. If you want the most complete example of Rehawk working, click here.
import React from 'react';
import { RehawkProvider, useRehawk } from 'rehawk';
const src =
'https://storage.googleapis.com/media-session/elephants-dream/the-wires.mp3';
const Player = () => {
const {
ready,
loading,
error,
playing,
paused,
stopped,
onPlay,
onPause,
} = useRehawk({
src,
autoplay: false,
});
return (
<div>
<p>Ready: {ready ? 'true' : 'false'}</p>
<p>Loading: {loading ? 'true' : 'false'}</p>
<p>Error: {error}</p>
<p>Playing: {playing ? 'true' : 'false'}</p>
<p>Paused: {paused ? 'true' : 'false'}</p>
<p>Stopped: {stopped ? 'true' : 'false'}</p>
<button onClick={onPlay}>Play</button>
<button onClick={onPause}>Pause</button>
</div>
);
};
const App = () => {
return (
<RehawkProvider>
<Player />
</RehawkProvider>
);
};
API
Props
Returned values
Returned methods
Example
To run the example do the following steps:
git clone
the repositorycd rehawk/example
yarn install
yarn start
Contributing
Your contributions are welcome! If you have any questions or want to start to contribute to this library in any form, please open an issue. Feel free to open PR.
If there are any questions about this library or about any other topic, please contact me on Twitter @leonardomso and I'll gladly answer it.