1. import Audio from "./AudioPlay";
    3.  <Audio
    4.   src={
    5.     "https://xxx.mp3"
    6.   }
    7.   id={123}
    8. />
    1. import React, {Component} from 'react';
    2. import {Popover} from 'antd';
    3. import moment from 'moment';
    4. import style from './style.less';
    6. import playAudio from '../../../images/player.png';
    7. import pauseAudio from '../../../images/icon_play_stop.png';
    8. import onMuteAudio from '../../../images/mute.png';
    9. import onNoMuteAudio from '../../../images/no-mute.png';
    10. import download from '../../../images/download.png';
    12. class index extends Component {
    13.     constructor(props) {
    14.         super(props);
    15.         this.state = {
    16.             rateList: [1.0, 1.25, 1.5, 2.0],
    17.             playRate: 1.0,
    18.             isPlay: false,
    19.             isMuted: false,
    20.             volume: 100,
    21.             allTime: 0,
    22.             currentTime: 0
    23.         };
    24.     }
    26.     componentDidMount() {}
    28.     formatSecond(time) {
    29.         const second = Math.floor(time % 60);
    30.         const minite = Math.floor(time / 60);
    31.         return `${minite}:${second >= 10 ? second : `0${second}`}`;
    32.     }
    33.     handleDownloadClick = () => {
    34.         if (!this.props.src) return;
    35.         const url = this.props.src;
    36.         let request;
    37.         const ishttps = document.location.protocol == 'https:';
    38.         if (ishttps && url) {
    39.             url.split('://');
    40.             request = `https://${url.split('://')[1]}`;
    41.         } else {
    42.             request = url;
    43.         }
    44.         const text = `${this.props.DownloadName}.wav`;
    45.         this.courseDownload(request, text);
    46.     };
    47.     // 实现js下载文件修改文件名失效问题 start
    48.     courseDownload = (url, filename) => {
    49.         const that = this;
    50.         this.getBlob(url, function (blob) {
    51.             that.saveAs(blob, filename);
    52.         });
    53.     };
    55.     getBlob = (url, cb) => {
    56.         const xhr = new XMLHttpRequest();
    57.         xhr.open('GET', url, true);
    58.         xhr.responseType = 'blob';
    59.         xhr.onload = function () {
    60.             if (xhr.status === 200) {
    61.                 cb(xhr.response);
    62.             }
    63.         };
    64.         xhr.send();
    65.     };
    66.     /**
    67.      * 保存
    68.      * @param  {Blob} blob
    69.      * @param  {String} filename 想要保存的文件名称
    70.      */
    71.     saveAs = (blob, filename) => {
    72.         if (window.navigator.msSaveOrOpenBlob) {
    73.             navigator.msSaveBlob(blob, filename);
    74.         } else {
    75.             const link = document.createElement('a');
    76.             const body = document.querySelector('body');
    78.             link.href = window.URL.createObjectURL(blob);
    79.             link.download = filename;
    81.             // fix Firefox
    82.             link.style.display = 'none';
    83.             body.appendChild(link);
    85.             link.click();
    86.             body.removeChild(link);
    88.             window.URL.revokeObjectURL(link.href);
    89.         }
    90.     };
    91.     // 该视频已准备好开始播放
    92.     onCanPlay = () => {
    93.         const {id} = this.props;
    94.         const audio = document.getElementById(`audio${id}`);
    95.         this.setState({
    96.             allTime: audio.duration
    97.         });
    98.     };
    100.     playAudio = () => {
    101.         const {id} = this.props;
    102.         const audio = document.getElementById(`audio${id}`);
    103.         audio.play();
    104.         this.setState({
    105.             isPlay: true
    106.         });
    107.     };
    109.     pauseAudio = () => {
    110.         const {id} = this.props;
    111.         const audio = document.getElementById(`audio${id}`);
    112.         audio.pause();
    113.         this.setState({
    114.             isPlay: false
    115.         });
    116.     };
    118.     onMuteAudio = () => {
    119.         const {id} = this.props;
    120.         const audio = document.getElementById(`audio${id}`);
    121.         this.setState({
    122.             isMuted: !audio.muted
    123.         });
    124.         audio.muted = !audio.muted;
    125.     };
    127.     changeTime = e => {
    128.         const {value} = e.target;
    129.         const {id} = this.props;
    130.         const audio = document.getElementById(`audio${id}`);
    131.         this.setState({
    132.             currentTime: value
    133.         });
    134.         audio.currentTime = value;
    135.         if (value === audio.duration) {
    136.             this.setState({
    137.                 isPlay: false
    138.             });
    139.         }
    140.     };
    142.     // 当前播放位置改变时执行
    143.     onTimeUpdate = () => {
    144.         const {id} = this.props;
    145.         const audio = document.getElementById(`audio${id}`);
    147.         this.setState({
    148.             currentTime: audio.currentTime
    149.         });
    150.         if (audio.currentTime === audio.duration) {
    151.             this.setState({
    152.                 isPlay: false
    153.             });
    154.         }
    155.         const progressTime = (100 * this.state.currentTime) / audio.duration;
    157.         this.inputDom.style.background = `linear-gradient(to right,  #007cef 0%, #007cef ${parseInt(progressTime, 10)}%, transparent ${parseInt(progressTime, 10)}%, transparent 100%)`;
    158.         if (audio.currentTime === audio.duration) {
    159.             this.setState({
    160.                 isPlay: false
    161.             });
    162.             this.inputDom.style.background = `linear-gradient(to right,  #007cef 0%, #007cef 100%, transparent 100%, transparent 100%)`;
    163.         }
    164.     };
    166.     changeVolume = e => {
    167.         const {value} = e.target;
    168.         const {id} = this.props;
    169.         const audio = document.getElementById(`audio${id}`);
    170.         audio.volume = value / 100;
    172.         this.setState({
    173.             volume: value,
    174.             isMuted: !value
    175.         });
    176.     };
    178.     // 倍速播放
    179.     changePlayRate = num => {
    180.         this.audioDom.playbackRate = num;
    181.         this.setState({
    182.             playRate: num
    183.         });
    184.     };
    186.     render() {
    187.         const {src, id} = this.props;
    189.         // const {isPlay, isMuted, volume, allTime, currentTime, rateList, playRate} = this.state;//倍数
    190.         const {isPlay, isMuted, volume, allTime, currentTime} = this.state;
    192.         return (
    193.             <div className={style.AudioComponent}>
    194.                 <audio
    195.                     id={`audio${id}`}
    196.                     src={src}
    197.                     ref={audio => {
    198.                         this.audioDom = audio;
    199.                     }}
    200.                     preload={'auto'}
    201.                     onCanPlay={this.onCanPlay}
    202.                     onTimeUpdate={this.onTimeUpdate}>
    203.                     <track src={src} kind="captions" />
    204.                 </audio>
    206.                 {isPlay ? (
    207.                     <div className={style.isPlayBox} onClick={this.pauseAudio}>
    208.                         <img src={pauseAudio} />
    209.                     </div>
    210.                 ) : (
    211.                     <div className={style.isPlayBox} onClick={this.playAudio}>
    212.                         <img src={playAudio} />
    213.                     </div>
    214.                 )}
    216.                 <div className={style.audioInputBox}>
    217.                     <div className={style.AudioBox}>
    218.                         <input className={style.AudioInput} ref={dom => (this.inputDom = dom)} type="range" step="0.01" max={allTime} value={currentTime} onChange={this.changeTime} />
    219.                     </div>
    220.                     <span className={style.timeBox}>{`${this.formatSecond(currentTime)}/${this.formatSecond(allTime)}`}</span>
    221.                 </div>
    223.                 <div className={style.volumeBox}>
    224.                     <Popover
    225.                         overlayClassName={'volumeBox'}
    226.                         trigger="click"
    227.                         content={
    228.                             <div className="volume">
    229.                                 <div onClick={this.onMuteAudio}>
    230.                                     <img src={!isMuted ? onMuteAudio : onNoMuteAudio} />
    231.                                 </div>
    232.                                 <input type="range" onChange={this.changeVolume} value={isMuted ? 0 : volume} />
    233.                             </div>
    234.                         }>
    235.                         <span>
    236.                             <img src={onNoMuteAudio} />
    237.                         </span>
    238.                     </Popover>
    239.                 </div>
    240.                 <div onClick={this.handleDownloadClick}>
    241.                     <img src={download} alt="" />
    242.                 </div>
    243.                 {/* <div>
    244.                     <span>倍速播放：</span>
    245.                     {rateList &&
    246.                         rateList.length > 0 &&
    247.                         rateList.map(item => (
    248.                             <button
    249.                                 key={item}
    250.                                 style={
    251.                                     playRate === item
    252.                                         ? {
    253.                                                 border: '1px solid #188eff',
    254.                                                 color: '#188eff'
    255.                                           }
    256.                                         : null
    257.                                 }
    258.                                 onClick={() => this.changePlayRate(item)}>
    259.                                 {item}
    260.                             </button>
    261.                         ))}
    262.                 </div> */}
    263.             </div>
    264.         );
    265.     }
    266. }
    268. export default index;
    1. .AudioComponent {
    2.     display: flex;
    3.     align-items: center;
    4.     background-color: #fff;
    5.     width: 100%;
    6.     max-width: 500px;
    7.     height: 32px;
    8.     padding: 20px;
    9.     border-radius: 16px;
    11.     > div {
    12.         margin-right: 12px;
    14.         &:last-child {
    15.             margin-right: 0;
    16.         }
    17.     }
    19.     .content {
    20.         display: flex;
    21.         justify-content: center;
    22.         align-items: center;
    23.     }
    25.     .timeBox {
    26.         font-size: 12px;
    27.         font-weight: 400;
    28.         color: #bababa;
    29.         margin-left: 4px;
    30.     }
    32.     .isPlayBox {
    33.         img {
    34.             width: 20px;
    35.             height: 20px;
    36.             .content;
    37.         }
    38.     }
    40.     .audioInputBox {
    41.         display: flex;
    42.         align-items: center;
    43.     }
    45.     .AudioBox {
    46.         background-color: #dfdfdf;
    47.         position: relative;
    48.         height: 8px;
    49.         border-radius: 4px;
    50.         overflow: hidden;
    51.         width: 200px;
    53.         .AudioInput {
    54.             position: absolute;
    55.             top: 0;
    56.             left: 0;
    57.             width: 100%;
    58.             background: linear-gradient(to right, #007cef, transparent 0%, transparent);
    59.             background-size: 100% 100%;
    61.             &[type='range'] {
    62.                 width: 100%;
    63.                 -webkit-appearance: none;
    64.                 height: 8px;
    65.                 border-radius: 4px;
    66.                 background: -webkit-linear-gradient(#007cef, #007cef) no-repeat transparent;
    67.                 background-size: 0% 100%; /* 因为周期默认value=0.50正好占50% */
    68.             }
    70.             &[type='range']::-webkit-slider-thumb:hover {
    71.                 background-color: transparent;
    72.             }
    74.             &[type='range']::-webkit-slider-runnable-track {
    75.                 border-radius: 10px; /*将轨道设为圆角的*/
    76.             }
    78.             &[type='range']::-webkit-slider-thumb {
    79.                 position: relative;
    80.                 left: -16px;
    81.                 -webkit-appearance: none;
    82.                 background-color: #007cef;
    83.                 width: 16px;
    84.                 height: 8px;
    85.                 cursor: pointer;
    86.             }
    87.         }
    88.     }
    89. }
    91. :global {
    92.     .volumeBox {
    93.         // transform: rotate(-90deg);
    95.         // .ant-popover-arrow-content {
    96.         //     display: none;
    97.         // }
    98.         .ant-popover-inner-content {
    99.             padding: 0 16px;
    100.         }
    102.         .volume {
    103.             display: flex;
    105.             > div {
    106.                 padding: 5px;
    107.             }
    108.         }
    109.     }
    110. }