add audio for captcha

src/pages/authentication/auth-forms/BusCustomFormWizard.js

@@ -30,7 +30,7 @@ import * as yup from 'yup';
 import { strengthColorChi, strengthIndicator } from 'utils/password-strength';
 // import {apiPath} from "auth/utils";
 import axios from "axios";
-import { POST_PUBLIC_USER_REGISTER, POST_CAPTCHA, POST_USERNAME, POST_USER_EMAIL } from "utils/ApiPathConst";
+import { POST_PUBLIC_USER_REGISTER, POST_CAPTCHA, POST_USERNAME, POST_USER_EMAIL, POST_CAPTCHA_AUDIO } from "utils/ApiPathConst";
 // import * as HttpUtils from 'utils/HttpUtils';
 import * as ComboData from "utils/ComboData";
 
@@ -118,6 +118,16 @@ const BusCustomFormWizard = (props) => {
         changePassword('');
     }, []);
 
+    const playCaptchaAudio = async () => {
+        const resp = await axios.post(`${POST_CAPTCHA_AUDIO}`,
+            { base64Url, lang: intl.locale },
+            { responseType: "arraybuffer" }
+        );
+        const blob = new Blob([resp.data], { type: "audio/wav" });
+        const url = URL.createObjectURL(blob);
+        new Audio(url).play();
+    };
+
     const handleCheckUsername = async () => {
         if (values?.username) {
             const response = await axios.post(`${POST_USERNAME}`, {
@@ -1538,6 +1548,11 @@ const BusCustomFormWizard = (props) => {
                                                 {formik.errors.captchaField}
                                             </FormHelperText>
                                         )}
+                                        <Stack spacing={1} direction="row">
+                                            <Button onClick={playCaptchaAudio} aria-label={intl.formatMessage({id:"captchaPlayAudioAria"})}>
+                                                <FormattedMessage id="captchaPlayAudio" />
+                                            </Button>
+                                        </Stack>
                                     </Stack>
                                 </Grid>
                             </Grid>

src/pages/authentication/auth-forms/IAmSmartFormWizard.js

@@ -21,7 +21,7 @@ import { useFormik, FormikProvider } from 'formik';
 import * as yup from 'yup';
 
 import axios from "axios";
-import { POST_IAMSMART_USER_REGISTER, POST_CAPTCHA, POST_USER_EMAIL } from "utils/ApiPathConst";
+import { POST_IAMSMART_USER_REGISTER, POST_CAPTCHA, POST_USER_EMAIL, POST_CAPTCHA_AUDIO } from "utils/ApiPathConst";
 
 import * as ComboData from "utils/ComboData";
 
@@ -79,6 +79,16 @@ const CustomFormWizard = (props) => {
     const [base64Url, setBase64Url] = useState("")
     const [checkCode, setCheckCode] = useState("")
 
+    const playCaptchaAudio = async () => {
+        const resp = await axios.post(`${POST_CAPTCHA_AUDIO}`,
+            { base64Url, lang: intl.locale },
+            { responseType: "arraybuffer" }
+        );
+        const blob = new Blob([resp.data], { type: "audio/wav" });
+        const url = URL.createObjectURL(blob);
+        new Audio(url).play();
+    };
+
     useEffect(() => {
         location.state?.responseData ?? window.location.assign("/login");
         if (captchaImg == "")
@@ -1067,6 +1077,11 @@ const CustomFormWizard = (props) => {
                                                     {formik.errors.captchaField}
                                                 </FormHelperText>
                                             )}
+                                            <Stack spacing={1} direction="row">
+                                                <Button onClick={playCaptchaAudio} aria-label={intl.formatMessage({id:"captchaPlayAudioAria"})}>
+                                                    <FormattedMessage id="captchaPlayAudio" />
+                                                </Button>
+                                            </Stack>
                                         </Stack>
                                     </Grid>
                                 </Grid>