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 = ( iconLoading ); } else if (isPlaying) { playIconElem = ; } else { playIconElem = ( iconPlaying ); } return playIconElem; } render() { const { currentDuration, isPlaying, duration } = this.state; return (
{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
); } } export default AudioPlayer;