up-添加一直播放的背景音乐

src/App.tsx

@@ -1,6 +1,6 @@
 import "@/assets/styles/base.css";
 // 关于路由
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { Router, Route, Switch } from "react-router-dom";
 import history from "./utils/history";
 import SpinLoding from "./components/SpinLoding";
@@ -10,6 +10,7 @@ import { useSelector } from "react-redux";
 import store, { RootState } from "./store";
 import MessageCom from "./components/Message";
 import NotFound from "./components/NotFound";
+import { baseURL } from "./utils/http";
 const A1Home = React.lazy(() => import("./pages/A1Home"));
 const A2VrPage = React.lazy(() => import("./pages/A2VrPage"));
 const A3Goods = React.lazy(() => import("./pages/A3Goods"));
@@ -20,6 +21,19 @@ export default function App() {
     (state: RootState) => state.A0Layout.lookBigImg
   );
 
+  const overallAudioRef = useRef<HTMLAudioElement>(null);
+
+  const overallAudio = useSelector(
+    (state: RootState) => state.A0Layout.overallAudio
+  );
+
+  useEffect(() => {
+    if (overallAudio) {
+      const dom = overallAudioRef.current;
+      if (dom) dom.play();
+    }
+  }, [overallAudio]);
+
   return (
     <>
       {/* 关于路由 */}
@@ -68,6 +82,9 @@ export default function App() {
         items={lookBigImg.url}
       />
 
+      {/* 全局的音频 */}
+      <audio loop src={`${baseURL}/bac.mp3`} ref={overallAudioRef}></audio>
+
       {/* antd 轻提示 ---兼容360浏览器 */}
       <MessageCom />
     </>

src/AppM.tsx

@@ -7,6 +7,9 @@ import SpinLoding from "./components/SpinLoding";
 import AsyncSpinLoding from "./components/AsyncSpinLoding";
 import NotFound from "./components/NotFound";
 import screenImg from "@/assets/img/landtip.png";
+import { baseURL } from "./utils/http";
+import { useSelector } from "react-redux";
+import { RootState } from "./store";
 
 const A1HomeM = React.lazy(() => import("./pages/A1HomeM"));
 const A2VrPage = React.lazy(() => import("./pages/A2VrPage"));
@@ -40,6 +43,19 @@ export default function App() {
     };
   }, [setFullFu]);
 
+  const overallAudioRef = useRef<HTMLAudioElement>(null);
+
+  const overallAudio = useSelector(
+    (state: RootState) => state.A0Layout.overallAudio
+  );
+
+  useEffect(() => {
+    if (overallAudio) {
+      const dom = overallAudioRef.current;
+      if (dom) dom.play();
+    }
+  }, [overallAudio]);
+
   return (
     <>
       {/* 关于路由 */}
@@ -58,6 +74,9 @@ export default function App() {
         </React.Suspense>
       </Router>
 
+      {/* 全局的音频 */}
+      <audio loop src={`${baseURL}/bac.mp3`} ref={overallAudioRef}></audio>
+
       {/* 发送请求的加载组件 */}
       <AsyncSpinLoding />
 

src/pages/A1Home/index.module.scss

@@ -1,14 +1,38 @@
 .A1Home {
   background-size: 100% 100%;
   position: relative;
+  overflow: hidden;
 
   :global {
+
+    .homeAudioPlay {
+      position: absolute;
+      z-index: 10;
+      left: 50%;
+      top: 70%;
+      transform: translateX(-50%);
+      cursor: pointer;
+      width: 181px;
+      height: 57px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-size: 100% 100%;
+      color: #fff;
+      font-size: 20px;
+      letter-spacing: 2px;
+      padding-bottom: 2px;
+      font-family: 'SHUTONG';
+    }
+
     .homeBtn {
       position: absolute;
-      bottom: 90px;
+      bottom: -90px;
       left: 50%;
       transform: translateX(-50%);
       display: flex;
+      opacity: 0;
+      transition: all .3s;
 
       .homeBtnRow {
         cursor: pointer;
@@ -87,7 +111,8 @@
 
         &:hover {
           color: #D6B970;
-          .home1Hover{
+
+          .home1Hover {
             opacity: 1;
             pointer-events: auto;
           }
@@ -96,5 +121,10 @@
       }
     }
 
+    .homeBtnShow {
+      bottom: 90px;
+      opacity: 1;
+    }
+
   }
 }

src/pages/A1Home/index.tsx

@@ -3,7 +3,8 @@ import styles from "./index.module.scss";
 import { baseURL } from "@/utils/http";
 import history from "@/utils/history";
 import { useSelector } from "react-redux";
-import { RootState } from "@/store";
+import store, { RootState } from "@/store";
+import classNames from "classnames";
 
 const rightList = [
   { id: 1, name: "线上展厅" },
@@ -21,13 +22,30 @@ function A1Home() {
     else if (id === 3) history.push("/goods");
   }, []);
 
+  // 全局音频状态
+  const overallAudio = useSelector(
+    (state: RootState) => state.A0Layout.overallAudio
+  );
+
   return (
     <div
       className={styles.A1Home}
       style={{ backgroundImage: `url(${baseURL}/Home/pc/bac.jpg)` }}
     >
+      {/* 开始按钮 */}
+      <div
+        hidden={overallAudio}
+        className="homeAudioPlay"
+        style={{ backgroundImage: `url(${baseURL}/Home/btn.png)` }}
+        onClick={() =>
+          store.dispatch({ type: "layout/playAudio", payload: true })
+        }
+      >
+        开始导览
+      </div>
+
       {/* 底部按钮 */}
-      <div className="homeBtn">
+      <div className={classNames("homeBtn", overallAudio ? "homeBtnShow" : "")}>
         {rightList.map((v) => (
           <div
             onClick={() => clickBtnFu(v.id)}

src/pages/A1HomeM/index.module.scss

@@ -5,11 +5,34 @@
 
   :global {
 
+
+    .homeAudioPlay {
+      position: absolute;
+      z-index: 10;
+      left: 50%;
+      bottom: 15%;
+      transform: translateX(-50%);
+      cursor: pointer;
+      width: 181px;
+      height: 57px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-size: 100% 100%;
+      color: #fff;
+      font-size: 20px;
+      letter-spacing: 2px;
+      padding-bottom: 2px;
+      font-family: 'SHUTONG';
+    }
+
     .A1HomeMBtn {
       position: absolute;
-      bottom: 40px;
+      bottom: -40px;
       left: 50%;
       transform: translateX(-50%);
+      opacity: 0;
+      transition: all .3s;
 
       .A1HomeMBtnRow {
         width: 181px;
@@ -27,6 +50,11 @@
       }
     }
 
+    .A1HomeMBtnShow {
+      bottom: 40px;
+      opacity: 1;
+    }
+
     .A1HomeShow {
       position: absolute;
       transition: all .3s;

src/pages/A1HomeM/index.tsx

@@ -5,7 +5,7 @@ import history from "@/utils/history";
 import { CaretDownOutlined } from "@ant-design/icons";
 import classNames from "classnames";
 import { useSelector } from "react-redux";
-import { RootState } from "@/store";
+import store, { RootState } from "@/store";
 
 const rightList = [
   { id: 1, name: "线上展厅" },
@@ -27,13 +27,35 @@ function A1HomeM() {
     (state: RootState) => state.A0Layout.dataAll.Home.scene
   );
 
+  // 全局音频状态
+  const overallAudio = useSelector(
+    (state: RootState) => state.A0Layout.overallAudio
+  );
+
   return (
     <div
       className={styles.A1HomeM}
       style={{ backgroundImage: `url(${baseURL}/Home/mobile/bac.jpg)` }}
     >
+      {/* 开始按钮 */}
+      <div
+        hidden={overallAudio}
+        className="homeAudioPlay"
+        style={{ backgroundImage: `url(${baseURL}/Home/btn.png)` }}
+        onClick={() =>
+          store.dispatch({ type: "layout/playAudio", payload: true })
+        }
+      >
+        开始导览
+      </div>
+
       {/* 底部按钮 */}
-      <div className="A1HomeMBtn">
+      <div
+        className={classNames(
+          "A1HomeMBtn",
+          overallAudio ? "A1HomeMBtnShow" : ""
+        )}
+      >
         {rightList.map((v) => (
           <div
             onClick={() => clickBtnFu(v.id)}

src/store/reducer/layout.ts

@@ -26,6 +26,9 @@ const initState = {
 
   // 所有数据
   dataAll: { Home: {} } as DataAllType,
+
+  // 全景的音频播放
+  overallAudio: false,
 };
 
 // 定义 action 类型
@@ -33,7 +36,8 @@ type LayoutActionType =
   | { type: "layout/lookBigImg"; payload: lookType }
   | { type: "layout/lookDom"; payload: LookDomType }
   | { type: "layout/message"; payload: MessageType }
-  | { type: "layout/setDataAll"; payload: DataAllType };
+  | { type: "layout/setDataAll"; payload: DataAllType }
+  | { type: "layout/playAudio"; payload: boolean };
 
 // 频道 reducer
 export default function layoutReducer(
@@ -56,6 +60,10 @@ export default function layoutReducer(
     case "layout/setDataAll":
       return { ...state, dataAll: action.payload };
 
+    // 全局的音频
+    case "layout/playAudio":
+      return { ...state, overallAudio: action.payload };
+
     default:
       return state;
   }