docs: add <Audio> reference

Author: streamich

README.md

@@ -40,6 +40,7 @@ const MyComponent = mock();
      - [`<Speak>`](./docs/Speak.md)
      - [`<Vibrate>`](./docs/Vibrate.md)
      - [`<LocalStorage>`](./docs/LocalStorage.md)
+     - [`<Audio>`](./docs/Audio.md)
   - Context
      - [`<Provider>`](./docs/context.md#provider), [`<Consumer>`](./docs/context.md#consumer), and [`withContext()`](./docs/context.md#withcontext)
      - [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), and [`withTheme()`](./docs/theme.md#withtheme)

docs/Audio.md

@@ -0,0 +1,56 @@
+# `<Audio>`
+
+FaCC that creates an `<audio>` element to play audio tracks, re-renders on audio state changes.
+
+## Usage
+
+```jsx
+import {Audio} from 'mol-fe-react/lib/Audio';
+
+<Audio autoplay src='https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3'>{(control, state) => {
+  JSON.stringify(state, null, 4)
+}}</Audio>
+```
+
+## Props
+
+In addition to props below also accepts all [React's media events](https://reactjs.org/docs/events.html#media-events).
+
+```tsx
+export interface IAudioProps {
+  src: string;
+  autoplay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  preload?: 'none' | 'metadata' | 'auto';
+  volume?: number;
+  noJs?: React.ReactElement<any>;
+}
+```
+
+  - `src` - required, string, audio source file URL.
+  - `autoplay` - optional, boolean, whether to autoplay audio, defaults to `false`.
+  - `loop` - optional, boolean, whether to repeat the track when it ends, defaults to `false`.
+  - `muted` - optional, boolean, whether to mute the audio, defaults to `false`.
+  - `preload` - optional, string, `<audio>` element preload attribute.
+  - `volume` - optional, number, audio volume in `[0..1]` range, defaults to `1`.
+  - `noJs` - optional, React element(s) to render insided the `<audio>` tag.
+
+## Example
+
+Play a sample audio track with control buttons.
+
+```jsx
+<Audio src='https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3'>{(audio, state) =>
+  <div>
+    <button onClick={audio.play}>Play</button>
+    <button onClick={audio.pause}>Pause</button>
+    <button onClick={() => audio.seek(state.time - 5)}>Seek -</button>
+    <button onClick={() => audio.seek(state.time + 5)}>Seek +</button>
+    <button onClick={() => audio.volume(state.volume - 0.05)}>Volume -</button>
+    <button onClick={() => audio.volume(state.volume + 0.05)}>Volume +</button>
+    <button onClick={audio.mute}>Mute</button>
+    <button onClick={audio.unmute}>Unmute</button>
+  </div>
+}</Audio>
+```

src/index.ts

@@ -18,6 +18,8 @@ export * from './LightSensor';
 // Generators
 export * from './Speak';
 export * from './Vibrate';
+export * from './LocalStorage';
+export * from './Audio';
 
 // Context
 export * from './context';