Situation

Currently when the users jump into 'login' page, a greeting message mp3 file ('welcome, plz enter your phone number) automatically plays by using useEffect.

Problem

However I want to make it stop when the users click anything on the screen, it can be buttons, empty space, images.. just anything on the screen.

Maybe I can just add stopSound() method in addNumber or removeNumber method respectively. But I don't think it's an efficient way.

Can you guys advise me a better way to make it work?!

//login page

import React, {useContext, useEffect, useState} from 'react';
import {useNavigate as useDomNavigate} from 'react-router-dom';
import styled from 'styled-components';
import {PHONE_NUMBER_MAX_LENGTH} from 'dd';
import {KioskAlertContext} from '../../src/common/context/alert';
import authClient from '../../src/client/auth/authClient';
import KioskTemplate from '../../src/component/layout/KioskTemplate';

const LoginPhone = () => {
    const domNavigate = useDomNavigate();
    const {openKioskAlert} = useContext(KioskAlertContext);
    const [phoneNumber, setPhoneNumber] = useState([]);
    const [isPlaying, setIsPlaying] = useState(true);
    const greetAudio = new Audio('/sounds/hello.mp3');

    // play audio sound
    const playSound = () => {
        greetAudio.play();
    };

    // stop audio sound
    const stopSound = () => {
        greetAudio.pause();
        greetAudio.currentTime = 0;
    };

    // play the sound when the users visit this login page
    useEffect(() => {
        playSound();
    }, []);

    // when pressing numbers from 0 to 9 
    const addNumber = (num) => {
        if (phoneNumber.length < PHONE_NUMBER_MAX_LENGTH) {
            setPhoneNumber(phoneNumber.concat(num));
        }
    };
    // when removing numbers
    const removeNumber = () => {
        if (phoneNumber.length > 0) {
            setPhoneNumber(phoneNumber.slice(0, phoneNumber.length - 1));
        }
    };

    const checkPhoneByKiosk = async () => {
        const phone = phoneNumber.join('');

        if (phone.length !== PHONE_NUMBER_MAX_LENGTH) {
            openKioskAlert({
                content: 'Check your phone number again',
            });
            return;
        }
        // this is a react axios to fetch API
        const {response, error} = await authClient.kioskCheckPhone({
            phone: phone,
            type: 'USER',
            provider: 'KIOSK',
        });
    };

    // 
    const PhoneNumberInfo = () => {
        const numberPart1 = phoneNumber.slice(0, 3);
        const numberPart2 = phoneNumber.slice(3, 7);
        const numberPart3 = phoneNumber.slice(7, 11);

        return (
            <PhoneNumberInputWrapper>
                <PhoneNumberInputLabel>{numberPart1}</PhoneNumberInputLabel>
                <PhoneNumberHyphenLabel>-</PhoneNumberHyphenLabel>
                <PhoneNumberInputLabel>{numberPart2}</PhoneNumberInputLabel>
                <PhoneNumberHyphenLabel>-</PhoneNumberHyphenLabel>
                <PhoneNumberInputLabel>{numberPart3}</PhoneNumberInputLabel>
            </PhoneNumberInputWrapper>
        );
    };

    return (
        // keypad where users can press numbers from 0 to 9.
        <KioskTemplate
            content={<PhoneNumberInfo />}
            contentTitle={'Please fill out your phone number'}
            addNumber={addNumber}
            removeNumber={removeNumber}
            confirm={checkPhoneByKiosk}
        />
    );
};

CodePudding user response：

I would listen for click event on window

useEffect(() => {
  const clickHandler = () => stopSound();
  window.addEventListener('click', clickHandler)
  // always remember to remove event listeners
  return () => window.removeEventListener('click', clickHandler)
}, [])

Also I wouldn't add sound to the webpage as it can be annoying and users with disabilities already use screen readers, but maybe there is a use case for that.