如何在用户点击屏幕任意位置时停止播放音频？（可以是空space、按钮等）？

Question

情况

目前当用户跳转到'login'页面时，使用useEffect自动播放一段问候语mp3文件（'欢迎，请输入您的phone号码）。

问题

但是我想让它在用户点击屏幕上的任何东西时停止，它可以是按钮、空 space、图像..屏幕上的任何东西。

也许我可以在 addNumber 或 removeNumber 方法中分别添加 stopSound() 方法。但我认为这不是一个有效的方法。

你们能告诉我一个更好的方法吗？！

//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}
        />
    );
};

Answer 1

我会在 window

上监听点击事件

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

此外，我不会向网页添加声音，因为它可能很烦人，而且残障用户已经在使用屏幕阅读器，但也许有一个用例。

如何在用户点击屏幕任意位置时停止播放音频？（可以是空space、按钮等）？

How to stop playing audio when the users click anywhere on the screen?(it could be empty space, buttons and etc)?

audio

reactjs

情况

目前当用户跳转到'login'页面时，使用useEffect自动播放一段问候语mp3文件（'欢迎，请输入您的phone号码）。

问题

但是我想让它在用户点击屏幕上的任何东西时停止，它可以是按钮、空 space、图像..屏幕上的任何东西。