007-react---自定义组件（二）滑块

自定义组件：

import React, { Component } from 'react';
import {Button, Slider} from 'antd';
class AudioWithSlider extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isPlay: false,
            isMuted: false,
            volume: 100, // 音量
            allTime: 0, // 总时长
            currentTime: 0 // 当前时间
        };
    }
    millisecondToDate(time) {
        const second = Math.floor(time % 60);
        let minite = Math.floor(time / 60);
        let hour
        if(minite > 60) {
          hour = minite / 60
          minite = minite % 60
          return `${Math.floor(hour)}:${Math.floor(minite)}:${Math.floor(second)}`
        }
        return `${minite}:${second >= 10 ? second : `0${second}`}`;
    }
    formatter = (value) => {
        return `${value}%`;
    }
    // timeUpdate(e) {
    //     console.log(e.currentTime)
    // }
    controlAudio(type, value) {
        const {id} = this.props;
        const audio = document.getElementById(`audio${id}`);
        switch (type) {
            case 'allTime':
                this.setState({
                    allTime: audio.duration
                });
                break;
            case 'play':
                if (!this.props.isPlay) {
                    audio.play();
                    this.setState({
                        isPlay: true
                    });
                    this.props.setSet(true);
                }
                break;
            case 'pause':
                if (this.props.isPlay) {
                    audio.pause();
                    this.setState({
                        isPlay: false
                    });
                    this.props.setSet(false);
                }
                break;
            case 'muted':
                this.setState({
                    isMuted: !audio.muted
                });
                audio.muted = !audio.muted;
                break;
            case 'changeCurrentTime':
                this.setState({
                    currentTime: value
                });
                audio.currentTime = value;
                if (value === audio.duration) {
                    this.setState({
                        isPlay: false,
                        currentTime: 0
                    });
                    this.props.setSet(false);
                }
                break;
            case 'getCurrentTime':
                this.setState({
                    currentTime: audio.currentTime
                });
                if (audio.currentTime === audio.duration) {
                    this.setState({
                        isPlay: false,
                        currentTime: 0
                    });
                    this.props.setSet(false);
                }
                break;
            case 'changeVolume':
                audio.volume = value / 100;
                this.setState({
                    volume: value,
                    isMuted: !value
                });
                break;
            case 'stop':
                if (this.props.isPlay && this.state.isPlay) {
                    audio.pause();
                    audio.currentTime = 0;
                    this.setState({
                        isPlay: false,
                        currentTime: 0
                    });
                    this.props.setSet(false);
                }
                break;
            default:
                break;
        }
    }
    onChange = (value) => {
        this.controlAudio('changeCurrentTime', value)
    }

    render() {
        let {isPlay, isMuted, allTime, currentTime} = this.state;
        return (
            <div className="audioSilderBox">
                <div className="audioLeft">
                    <audio
                        id={`audio${this.props.id}`}
                        src={this.props.src}
                        preload="true"
                        onCanPlay={() => this.controlAudio('allTime')}
                        onTimeUpdate={() => this.controlAudio('getCurrentTime')}
                    >
                        您的浏览器不支持 audio 标签。
                    </audio>
                    {
                        isPlay ? <Button type='primary' size='default'  shape='circle' style={{float: 'left', marginLeft: '25%', fontSize: '14px', fontFamily: 'iconfont', textAlign: 'center'}} onClick={() => this.controlAudio(isPlay ? 'pause' : 'play')} >&#xe672;</Button>
                            : <Button type='primary' size='default'  shape='circle' style={{float: 'left', marginLeft: '25%', fontSize: '14px', fontFamily: 'iconfont', textAlign: 'center'}} onClick={() => this.controlAudio(isPlay ? 'pause' : 'play')} >&#xe64e;</Button>
                    }
                    <Button type='primary' size='default'  shape='circle' style={{float: 'right', marginRight: '25%', fontSize: '14px', fontFamily: 'iconfont', textAlign: 'center'}} onClick={() => this.controlAudio("stop")} >&#xe600;</Button>
                    <i
                        className={isMuted ? 'mute' : 'nomute'}
                        onClick={() => this.controlAudio('muted')}
                    />
                </div>
                <div className='audioRight'>
                    {this.millisecondToDate(currentTime) + '/' + this.millisecondToDate(allTime)}
                    <Slider tipFormatter={this.formatter} onChange={this.onChange} step={0.01} value={currentTime} max={allTime}/>
                </div>
            </div>
        );
    }
}
export default AudioWithSlider;

使用：

import Home from '../home/home';
import AudioWithSlider from '../common/AudioWithSlider';
class MyOrderInfoBox extends Component {
    constructor(props){
        super(props);
    }
	this.state={
		isPlay: false,
		chapterInfo: []
	}
	// 播放按钮
    setSet(obj) {
        this.setState({
            isPlay: obj
        });
    }
    render () {
		let items = this.state.chapterInfo.map((v,i) => ({
			<div className="btn_group">
				{v.status === 2 ? <AudioWithSlider src={v.chapterSound.url} setSet={this.setSet.bind(this)} isPlay={this.state.isPlay} id={v.id}/> : '' }
				{v.status === 3 ? <AudioWithSlider src={v.chapterSound.url} setSet={this.setSet.bind(this)} isPlay={this.state.isPlay} id={v.id}/> : '' }
				{v.status === 4 ? <AudioWithSlider src={v.chapterSound.url} setSet={this.setSet.bind(this)} isPlay={this.state.isPlay} id={v.id}/> : '' }
			</div>
		})
		return (
			<Home>
				<div className="album-voice">					                                      
					{items.length ? items : <div className='tableboxbody-tips'>无法查看章节信息</div>}
				</div>
			</Home>
		)
	}
}
const MyOrderInfoForm = Form.create()(MyOrderInfoBox);
class MyOrderInfo extends Component {
    constructor(props){
        super(props);
        this.state = {
            id: props.match.params.id
        };
    }
    render() {
        return (
            <MyOrderInfoForm id={this.state.id}/>
        );
    }
}
export default MyOrderInfo;

样式：

.my-order-info .order_item_right .btn_group .audioBox{width:150px;height:50px;padding-top: 10px}
.my-order-info .order_item_right .btn_group .audioSilderBox{width:450px;overflow: hidden;margin-top: 10px}
.my-order-info .order_item_right .btn_group .audioSilderBox .audioLeft{width:150px;float: left}
.my-order-info .order_item_right .btn_group .audioSilderBox .audioRight{width:300px;float: right}
.my-order-info .order_item_right .btn_group{margin-left: 66px;}

温馨提示：扫码可以提问、交流。本人有各个行业的小程序前端代码，如有需要也可以扫码留言哦。