| 1 |
- {"version":3,"sources":["../../../src/components/AudioPlayer/index.js"],"names":["dayjs","extend","durationPlugin","utcPlugin","AudioPlayer","props","state","duration","currentDuration","isPlaying","isLoading","player","src","oncanplay","console","log","event","setState","target","onended","onpause","onplay","onplaying","ontimeupdate","currentTime","prevProps","pause","playerList","document","getElementsByTagName","Array","from","forEach","paused","play","playIconElem","iconLoading","ref","display","clickPlayOrPause","getPlayIcon","value","utc","asMilliseconds","format","React","Component"],"mappings":"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","file":"index.js","sourcesContent":["import React from \"react\";\nimport { Slider, Icon } from \"antd\";\nimport dayjs from \"dayjs\";\nimport durationPlugin from \"dayjs/plugin/duration\";\nimport utcPlugin from \"dayjs/plugin/utc\";\nimport \"./index.less\";\nimport iconLoading from \"../../assert/loading.gif\";\n\ndayjs.extend(durationPlugin);\ndayjs.extend(utcPlugin);\n\nclass AudioPlayer extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n duration: 0,\n currentDuration: 0,\n isPlaying: false,\n isLoading: false\n };\n }\n\n componentDidMount() {\n if (this.player) {\n const { src } = this.props;\n this.player.oncanplay = event => {\n console.log(event, 1111);\n this.setState({ duration: event.target.duration });\n };\n this.player.onended = event => {\n console.log(event, 2222);\n this.setState({ isPlaying: false, currentDuration: 0 });\n };\n this.player.onpause = event => {\n console.log(event, 333);\n this.setState({ isPlaying: false });\n };\n this.player.onplay = () => {\n console.log(event, 5555);\n this.setState({ isPlaying: true, isLoading: false });\n };\n this.player.onplaying = event => {\n console.log(event, 4444);\n this.setState({ isPlaying: true, isLoading: false });\n };\n this.player.ontimeupdate = event =>\n this.setState({ currentDuration: event.target.currentTime });\n this.player.src = src;\n }\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.src !== prevProps.src) {\n this.player.oncanplay = event => {\n console.log(event, 1111);\n this.setState({ duration: event.target.duration });\n };\n this.player.onended = event => {\n console.log(event, 2222);\n this.setState({ isPlaying: false, currentDuration: 0 });\n };\n this.player.onpause = event => {\n console.log(event, 333);\n this.setState({ isPlaying: false });\n };\n this.player.onplay = () => {\n console.log(event, 5555);\n this.setState({ isPlaying: true, isLoading: false });\n };\n this.player.onplaying = event => {\n console.log(event, 4444);\n this.setState({ isPlaying: true, isLoading: false });\n };\n this.player.ontimeupdate = event =>\n this.setState({ currentDuration: event.target.currentTime });\n this.player.src = this.props.src;\n }\n }\n\n clickPlayOrPause(isPlaying) {\n if (!this.player) {\n return;\n }\n if (isPlaying) {\n this.player.pause();\n } else {\n // 如果是播放，先暂停其他的播放\n const playerList = document.getElementsByTagName(\"audio\");\n if (playerList) {\n Array.from(playerList).forEach(player => {\n if (!player.paused) {\n player.pause();\n }\n });\n }\n this.player.play();\n this.setState({\n isLoading: true\n });\n }\n }\n\n getPlayIcon() {\n const { isPlaying, isLoading } = this.state;\n let playIconElem;\n\n if (isLoading) {\n playIconElem = (\n <img className=\"icon-loading\" src={iconLoading} alt=\"iconLoading\" />\n );\n } else if (isPlaying) {\n playIconElem = <Icon className=\"pause\" type=\"pause\" />;\n } else {\n playIconElem = <i className=\"schedule schedule-icon_image_audio\" />;\n }\n return playIconElem;\n }\n\n render() {\n const { currentDuration, isPlaying, duration } = this.state;\n return (\n <div className=\"comment-item-speak-audio-container\">\n {/* eslint-disable-next-line jsx-a11y/media-has-caption */}\n <audio\n ref={ref => {\n this.player = ref;\n }}\n style={{ display: \"none\" }}\n />\n <span\n className=\"icon\"\n onClick={() => {\n this.clickPlayOrPause(isPlaying);\n }}\n >\n {this.getPlayIcon()}\n </span>\n <Slider\n step={0.001}\n className=\"slider\"\n tooltipVisible={false}\n value={currentDuration}\n max={duration}\n onChange={value => {\n if (this.player) {\n this.player.currentTime = value;\n }\n }}\n />\n <span className=\"time\">\n {dayjs\n .utc(dayjs.duration(currentDuration, \"seconds\").asMilliseconds())\n .format(\"mm:ss\")}\n /\n {dayjs\n .utc(dayjs.duration(duration, \"seconds\").asMilliseconds())\n .format(\"mm:ss\")}\n </span>\n </div>\n );\n }\n}\n\nexport default AudioPlayer;\n"]}
|
