语音合成设置（react+hooks+ts）

代码实现

import React, { useEffect, useState } from 'react';
import { Modal, Form, Select, Slider, Row, Col, Button } from 'antd';
import styles from '../index.less';

type ISyntheticConfigProps = {
  valueRange: any;
  valueConfig: any;
  loading: boolean;
  visible: boolean;
  style: any;
  ossPath: string;
  onCancel: () => void;
  onConfirm: (data: any) => void;
  handleCompound: (data: any) => void;
};

const SyntheticConfig: React.FC<ISyntheticConfigProps> = ({
  visible,
  loading,
  onCancel,
  onConfirm,
  valueConfig,
  valueRange,
  style, //声音风格数据
  ossPath,
  handleCompound,
}) => {
  const [form] = Form.useForm();
  //滑动滚动条对应数据显示
  const [volValue, setVolValue] = useState(0);
  const [speValue, setSpeValue] = useState(0);
  const [pitValue, setPitValue] = useState(0);
  const [type, setType] = useState('oss');

  useEffect(() => {
    if (!visible) {
      form.resetFields();
    }
  }, [visible]);

  useEffect(() => {
  //试听
    if (ossPath) {
      var audio = document.getElementsByTagName('audio')[0];
      audio.play();
    }
  }, [ossPath]);

  useEffect(() => {
    if (valueConfig) {
      form.setFieldsValue({
        ...valueConfig,
      });
      setVolValue(valueConfig?.volume || 0);
      setSpeValue(valueConfig?.speed || 0);
      setPitValue(valueConfig?.pitchRate || 0);

    }
  }, [valueConfig]);

  const handleFormSubmit = (data: any) => {
    const params = {
      ...data,
    };
    if (type === 'oss') {
    //试听
      handleCompound(data)
    } else {
    //提交
      onConfirm(params);
    }
  };

  const handleOSSCompound = () => {
    setType('oss');
    form.submit();
  };

  const onVolChange = (value: number) => {
    setVolValue(value);
  };

  const onSpeChange = (value: number) => {
    setSpeValue(value);
  };

  const onPitChange = (value: number) => {
    setPitValue(value);
  };

  return (
    <div className={styles.voice_compound}>
      <Modal
        title={'语音合成设置'}
        visible={visible}
        onOk={form.submit}
        onCancel={onCancel}
        confirmLoading={loading}
        destroyOnClose
        width={560}
        footer={
          <div>
            <Button onClick={onCancel}>取消</Button>
            <Button onClick={handleOSSCompound}>试听</Button>
            <Button onClick={form.submit} loading={false} type="primary">
              确定
            </Button>
          </div>
        }
      >
        <Form
          form={form}
          wrapperCol={{ span: 19 }}
          labelCol={{ span: 5 }}
          onFinish={handleFormSubmit}
        >
          <Form.Item
            name="voiceName"
            label="声音风格"
            rules={[
              { required: true, message: '请选择声音风格' },
            ]}
          >
            <Select placeholder="请选择声音风格">
              {style.map((item: any) => (
                <Select.Option value={item.key} label={item.value} key={item.key}>
                  {item.value}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Row>
            <Col span={22}>
              <Form.Item
                name="volume"
                label="音量"
              >
                <Slider
                  className={styles.slider_style}
                  min={valueRange?.volume?.min || 0}
                  max={valueRange?.volume?.max || 100}
                  onChange={onVolChange}
                />
              </Form.Item>
            </Col>
            <Col span={2}>
              {volValue}
            </Col>
          </Row>
          <Row>
            <Col span={22}>
              <Form.Item
                name="speed"
                label="语速"
              >
                <Slider
                  className={styles.slider_style}
                  min={valueRange?.speed?.min || 0}
                  max={valueRange?.speed?.max || 100}
                  onChange={onSpeChange}
                />
              </Form.Item>
            </Col>
            <Col span={2}>
              {speValue}
            </Col>
          </Row>
          <Row>
            <Col span={22}>
              <Form.Item
                name="pitchRate"
                label="语调"
              >
                <Slider
                  className={styles.slider_style}
                  min={valueRange?.pitchRate?.min || 0}
                  max={valueRange?.pitchRate?.max || 100}
                  onChange={onPitChange}
                />
              </Form.Item>
            </Col>
            <Col span={2}>
              {pitValue}
            </Col>
          </Row>
          <audio
            style={{ display: 'none' }}
            preload="auto"
            src={ossPath}
            controls
          ></audio>
        </Form>
      </Modal>
    </div>
  );
};

export default SyntheticConfig;

修改slider默认图标

因为slider默认的图标如下：

我们想要的图标如下：

可以通过css来修改，代码如下：

index.less

.slider_style {
  :global {
    .ant-slider-handle {
      width: 40px !important;
      height: 20px !important;
      background: url('../../../../../assets/images/slider.png') center !important;
      border: 0 !important;
    }

    .ant-slider-handle:focus {
      box-shadow: 0 !important;
      border: 0 !important;
    }
  }
}