如何在使用 ReactJS 下新訂單時播放聲音

Question

我正在用 ReactJS 構建這個 PWA。

正如標題所說，我只想在下新訂單時播放聲音。

我正在使用 Context API 來管理狀態。

這是我的OrderContext.js ，我使用 React Query 從 API 獲取訂單。

import React, { createContext } from "react";
import { useQuery } from "react-query";
import apiClient from "../EventService";

export const OrderContext = createContext();

export const OrderProvider = (props) => {
  const fetchOrders = async () => {
    const { data } = await apiClient.getEvents();
    return data;
  };

  let { data: orders, status } = useQuery("orders", fetchOrders, {
    refetchInterval: 15000,
    refetchIntervalInBackground: true,
    notifyOnStatusChange: false,
  });

  return (
    <OrderContext.Provider value={[orders, status]}>
      {props.children}
    </OrderContext.Provider>
  );
};

然后在我的OrdersList.js組件中的某個地方，我只使用狀態並通過它映射：

{orders.map((order) => (
     <Order key={order.id} order={order} />
))}

最后，在我的Order.js組件中，我檢查是否有新訂單：

我正在使用此功能來檢查訂單是否在 15 分鍾或更短時間前下達。

const isNewOrder = (orderCreatedDate) => {
    if (moment().diff(moment(orderCreatedDate)) / 900000 <= 1) {
      return true;
    } else {
      return false;
    }
  };

然后在組件的 JSX 中，我只是這樣做以在新訂單上顯示徽章：

  {isNewOrder(order.date_created) && (
        <Badge style={{ padding: 3 }} content="Nuevo" />
   )}

我在為這些新訂單添加音效時遇到了麻煩，我嘗試使用 Howler 但無法使其正常工作。

如果有人可以幫助我或向我展示實現這一目標的方法，我將不勝感激。 如果需要，我可以提供完整的組件，讓我知道。 提前致謝。

祝你今天過得愉快！

Answer 1

我認為您最好的方法是向您的Order組件添加一個道具，並檢查您是否在訂單列表頁面或訂單頁面上。 如果在一個訂單上，則調用sound.play ，否則不調用。

此外，如果您還沒有使用React Howler，則應該使用它。 常規咆哮在 React 中表現不佳（無意雙關語）。

最后，您應該添加一個componentWillUnmount函數來停止播放聲音（只需在componentWillUnmount內調用sound.stop() ）。