代码实现
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;
}
}
}