❗ DEPRECATED ❗
ReactJS AudioWidget component. This component renders a stand-alone Audio Widget for playing audio files. All you need is some styling and you're good to go.
- Run
npm i --save-dev @fdmg/ts-react-audio-widget
or
- Run
yarn add @fdmg/ts-react-audio-widget --dev
import * as React from 'react';
import H1 from 'fdmg-ts-react-audio-widget';
export default class foo {
public state: any;
public props: any;
constructor(props: any) {
super(props);
this.props = props;
}
handleOnLoad() {}
handleOnCanPlay() {}
handleOnLoadStart() {}
handleOnLoadedData() {}
handleOnSeeked() {}
handleOnEnded() {}
handleOnSeeking() {}
handleOnTimeUpdate() {}
render() {
return (
<Audio
playerSrc={'test.mp3'}
onLoad={this.handleOnLoad}
onCanPlay={this.handleOnCanPlay}
onLoadStart={this.handleOnLoadStart}
onLoadedData={this.handleOnLoadedData}
onSeeked={this.handleOnSeeked}
onEnded={this.handleOnEnded}
onSeeking={this.handleOnSeeking}
onTimeUpdate={this.handleOnTimeUpdate}
hideProgressBarCurrentTime=this.props.ideProgressBarCurrentTime}
hideProgressBarDuration={this.props.hideProgressBarDuration}
/>
);
}
}
<div class="audio">
<audio src="test.mp3" autoplay="true"></audio>
<div class="progress">
<div>
<div class="time-line">
<span class="time-line-progress-bar" style="width: 4%;"></span>
<input type="range" step="0.01">
</div>
</div>
<div class="counters">
<span>12s</span>
<span>5m 0s</span>
</div>
</div>
</div>
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent