mirror of
https://github.com/streamich/react-use.git
synced 2026-02-01 14:37:31 +00:00
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import { storiesOf } from '@storybook/react';
|
|
import * as React from 'react';
|
|
import { useAudio } from '../src';
|
|
import ShowDocs from './util/ShowDocs';
|
|
|
|
const Demo = () => {
|
|
const [audio, state, controls, ref] = useAudio({
|
|
src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
|
|
autoPlay: true,
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
{audio}
|
|
<pre>{JSON.stringify(state, null, 2)}</pre>
|
|
<button onClick={controls.pause}>Pause</button>
|
|
<button onClick={controls.play}>Play</button>
|
|
<br />
|
|
<button onClick={controls.mute}>Mute</button>
|
|
<button onClick={controls.unmute}>Un-mute</button>
|
|
<br />
|
|
<button onClick={() => controls.volume(0.1)}>Volume: 10%</button>
|
|
<button onClick={() => controls.volume(0.5)}>Volume: 50%</button>
|
|
<button onClick={() => controls.volume(1)}>Volume: 100%</button>
|
|
<br />
|
|
<button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>
|
|
<button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
storiesOf('UI/useAudio', module)
|
|
.add('Docs', () => <ShowDocs md={require('../docs/useAudio.md')} />)
|
|
.add('Demo', () => <Demo />);
|