123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- import React from "react";
- import { Slider, Icon } from "antd";
- import dayjs from "dayjs";
- import durationPlugin from "dayjs/plugin/duration";
- import utcPlugin from "dayjs/plugin/utc";
- import "./index.less";
-
- dayjs.extend(durationPlugin);
- dayjs.extend(utcPlugin);
-
- class AudioPlayer extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- duration: 0,
- currentDuration: 0,
- isPlaying: false
- };
- }
-
- componentDidMount() {
- if (this.player) {
- const { src } = this.props;
- this.player.oncanplay = event =>
- this.setState({ duration: event.target.duration });
- this.player.onended = () =>
- this.setState({ isPlaying: false, currentDuration: 0 });
- this.player.onpause = () => this.setState({ isPlaying: false });
- this.player.onplay = () => this.setState({ isPlaying: true });
- this.player.ontimeupdate = event =>
- this.setState({ currentDuration: event.target.currentTime });
- this.player.src = src;
- }
- }
-
- componentDidUpdate(prevProps) {
- if (this.props.src !== prevProps.src) {
- this.player.oncanplay = event =>
- this.setState({ duration: event.target.duration });
- this.player.onended = () =>
- this.setState({ isPlaying: false, currentDuration: 0 });
- this.player.onpause = () => this.setState({ isPlaying: false });
- this.player.onplay = () => this.setState({ isPlaying: true });
- this.player.ontimeupdate = event =>
- this.setState({ currentDuration: event.target.currentTime });
- this.player.src = this.props.src;
- }
- }
-
- render() {
- const { currentDuration, isPlaying, duration } = this.state;
- return (
- <div className="comment-item-speak-audio-container">
- {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
- <audio
- ref={ref => {
- this.player = ref;
- }}
- style={{ display: "none" }}
- />
- <span
- className="icon"
- onClick={() =>
- this.player &&
- (isPlaying ? this.player.pause() : this.player.play())
- }
- >
- {isPlaying ? (
- <Icon className="pause" type="pause" />
- ) : (
- <i className="schedule schedule-icon_image_audio" />
- )}
- </span>
- <Slider
- step={0.001}
- className="slider"
- tooltipVisible={false}
- value={currentDuration}
- max={duration}
- onChange={value => {
- if (this.player) {
- this.player.currentTime = value;
- }
- }}
- />
- <span className="time">
- {dayjs
- .utc(dayjs.duration(currentDuration, "seconds").asMilliseconds())
- .format("mm:ss")}
- /
- {dayjs
- .utc(dayjs.duration(duration, "seconds").asMilliseconds())
- .format("mm:ss")}
- </span>
- </div>
- );
- }
- }
-
- export default AudioPlayer;
|