comment_component/src/components/AudioPlayer/index.js

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";
import iconLoading from "../../assert/loading.gif";
import btnAudioPlay from "../../assert/btn_audio_play.png";

dayjs.extend(durationPlugin);
dayjs.extend(utcPlugin);

class AudioPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      duration: 0,
      currentDuration: 0,
      isPlaying: false,
      isLoading: 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, isLoading: false });
      this.player.onplay = () =>
        this.setState({ isPlaying: false, isLoading: true });
      this.player.onplaying = () =>
        this.setState({ isPlaying: true, isLoading: false });
      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, isLoading: false });
      this.player.onplay = () =>
        this.setState({ isPlaying: false, isLoading: true });
      this.player.onplaying = () =>
        this.setState({ isPlaying: true, isLoading: false });
      this.player.ontimeupdate = event =>
        this.setState({ currentDuration: event.target.currentTime });
      this.player.src = this.props.src;
    }
  }

  clickPlayOrPause(isPlaying) {
    if (!this.player) {
      return;
    }
    if (isPlaying) {
      this.player.pause();
    } else {
      // 如果是播放，先暂停其他的播放
      const playerList = document.getElementsByTagName("audio");
      if (playerList) {
        Array.from(playerList).forEach(player => {
          if (!player.paused) {
            player.pause();
          }
        });
      }
      this.player.play();
    }
  }

  getPlayIcon() {
    const { isPlaying, isLoading } = this.state;
    let playIconElem;

    if (isLoading) {
      playIconElem = (
        <img className="icon-loading" src={iconLoading} alt="iconLoading" />
      );
    } else if (isPlaying) {
      playIconElem = <Icon className="pause" type="pause" />;
    } else {
      playIconElem = (
        <img className="icon-loading" src={btnAudioPlay} alt="iconPlaying" />
      );
    }
    return playIconElem;
  }

  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.clickPlayOrPause(isPlaying);
          }}
        >
          {this.getPlayIcon()}
        </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;