audio优化

c_client/src/const.js

@@ -199,3 +199,15 @@ export const prizeList = [
 
   }
 ];
+
+/* 
+  浏览页倒计时标识
+  DEFAULT: 默认为空，不展示
+  PICTURE: loading进度条显示倒计时
+  NUMBER: 数字倒计时(15s)
+*/
+export const BROWSE_COUNTDOWN_OBJ = {
+  PICTURE:'PICTURE',
+  NUMBER:"NUMBER",
+  DEFAULT:""
+}
\ No newline at end of file

c_client/src/hooks/useAudio.js

@@ -2,7 +2,7 @@
  * @description 音乐
  */
  import React, { useState, useEffect } from "react";
- import { playBgMusic1 } from "@/utils/util";
+ import { playBgMusic1 } from "@/utils/audio";
  const app = getApp();
  
  /**
@@ -11,8 +11,9 @@
   * @param {*} isBgMusic 是否自动调用(背景音乐自动调用),非背景音乐(点击音效)手动调用
   * @returns 
   */
- export const useAudio = (url, isBgMusic) => {
+ export const useAudio = (url, isBgMusic=false) => {
    const [musicUrl, setMusicUrl] = useState();
+  //  若需要控制所有的音效状态，app上自定义一个变量
    const [openStatus,setOpenStatus] = useState(true);
    useEffect(() => {
      getMusicInfo();
@@ -37,18 +38,12 @@
    };
    /**
     * @description 播放音效
-    * @param {*} selfStatus 是否单独控制音效状态
+    * @param {boolean} selfStatus 是否单独控制音效状态
+    * @param {function} callbackFn 播放之后的回调
     */
-   const playAudio = (selfStatus = false) => {
-     console.log('musicUrl',musicUrl,'selfStatus',selfStatus)
-     if(!selfStatus){
-       selfStatus = openStatus
-     }
-     if(!musicUrl){
-       return
-     } else {
-       musicUrl && playBgMusic1(selfStatus, musicUrl, false);
-     }
+   const playAudio = (callbackFn=()=>{}) => {
+     console.log('musicUrl',musicUrl,'selfStatus',openStatus)
+      musicUrl && playBgMusic1(openStatus, musicUrl, callbackFn);
    };
    return {
      playAudio,

c_client/src/hooks/useAudio.md

@@ -11,7 +11,79 @@
 ##### 出参
 | 出参 | 类型 | 描述 | 默认值 | 备注 |
 | :--- | :---: | :---: |:---: | :---: |
-| playAudio | Function | 播放音乐/音效 | selfStatus,默认值为false | 是否单独处理 |
+| playAudio | Function | 播放音乐/音效 | 有回调函数callback | callback默认为空函数 |
 | openStatus | Boolean | 默认开启播放 | true | / |
 | setOpenStatus | Function | 改变开始/暂停状态 | / | true/false都会调用playMusic1方法|
 | musicUrl | String | cloud文件得到的音频url链接 | 'https:xxxx.mp3' | 音频文件url链接|
+
++ 使用
+```jsx
+import {useAudio} from '@/hooks/useAudio'
+import {CLOUD_OBJ} from '@/const'
+
+export const Index = () => {
+
+    const {playAudio,musicUrl,setOpenStatus,openStatus} = useAudio(CLOUD_OBJ['1'])
+
+    const gotoMainPage = () => {
+        setOpenStatus(!openStatus)
+        playAudio(()=>{
+            // ...场景：点击有音效，跳转的页面有背景音乐
+            navigateTo({url:`/pages/other/other`})
+        });
+        // TODO...
+    }
+    return(
+        <>
+            <View onTap={gotoMainPage}>点击音效button</View>
+        </>
+    )
+}
+
+import {useAudio} from '@/hooks/useAudio'
+import {BGMUSIC_URL} from '@/const'
+export const Other = () => {
+    // 自动播放背景音乐
+    const {playAudio,setOpenStatus,openStatus} = useAudio(CLOUD_OBJ['1'],true)
+    return(
+        <View>
+            other page
+        </View>
+    )
+}
+```
+
++ 所有音效状态统一, 则需要在useAudio中设置一个全局变量(app.openStatus)
+
++ 音效缓存,音效关闭，下次进入音效还是关闭
+```js
+
+    let status =  my.getStorageSync({ key: 'musicStatus' });
+    console.log('status',status);
+    
+    if(status.data == undefined || status.data === null || status.data === ''){
+      app.openStatus = true;
+      my.setStorageSync({ key: 'musicStatus',data:true })
+    } else if(status?.data == true){
+      app.openStatus = true;
+    } else if(status?.data == false){
+      app.openStatus = false;
+    }
+
+    
+    const {openStatus,setOpenStatus} = useAudio(CLOUD_OBJ['2'],true)
+    /**
+     * @description 切换音效状态
+     */
+    const handleMusic = () => {
+    setOpenStatus(status => !status)
+    /* 切换音效状态 */
+    app.openStatus = !app.openStatus;
+    let musicStatus =  my.getStorageSync({ key: 'musicStatus' }).data;
+    console.log('musicStatus-----初始值---->>>>>>>>>>',musicStatus);
+    my.setStorageSync({ key: 'musicStatus',data:!musicStatus });
+    
+    let musics =  my.getStorageSync({ key: 'musicStatus' }).data;
+    console.log('musicStatus----改变值----->>>>>>>>>>',musics);
+  }
+```
\ No newline at end of file

c_client/src/utils/audio.js

+/**
+ * 创建音频类
+ */
+class AudioModel {
+  constructor(opts = {}) {
+    const { src } = opts;
+    if (!src) {
+      console.error("请输入音频链接");
+      return false;
+    }
+    try {
+      const innerAudioContext = my.createInnerAudioContext();
+      Object.keys(opts).forEach(item => {
+        innerAudioContext[item] = opts[item];
+      });
+      return innerAudioContext;
+    } catch (e) {
+      console.error("当前版本不支持音频");
+    }
+  }
+}
+/**
+ * 创建音频实例
+ * @param {object} opts 配置对象 例 { src: '音频链接', autoplay: false }
+ */
+export const createAudio = opts => {
+  const audioInstance = new AudioModel(opts);
+  return audioInstance;
+};
+
+/**
+ * 获取系统信息
+ * @returns {object} 小程序系统信息
+ */
+export const getSystemInfo = () => {
+  return new Promise((resolve, reject) => {
+    my.getSystemInfo({
+      success: res => {
+        resolve(res);
+      },
+      fail: err => {
+        reject(err);
+      }
+    });
+  });
+};
+
+let bgs = {};
+export const playBgMusic1 = async (
+  isOn,
+  src,
+  callbackFn = () => {},
+  loop = false
+) => {
+  //待测试
+
+  for (let k in bgs) {
+    if (bgs[k].isOn) {
+      bgs[k].stop();
+    }
+    // bgs[k].isOn = false;	/// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
+  }
+
+  const key = src;
+  console.log("---------->>>>>>>>>>>>>ison", isOn);
+  if (isOn) {
+    if (!bgs[key]) {
+      console.log("enter inner before the createAudio function", src, loop);
+      bgs[key] = createAudio({
+        src: src,
+        autoplay: true,
+        loop: loop /// TODO 暂时无效？2020.08.12 目前有效，但stop后还会跑数据，导致到音频结束到时间又自动播放
+      });
+
+      console.log("----------------src", src, bgs[key], "bgs[key]");
+
+      bgs[key].onPlay(() => {
+        bgs[key].isOn = true;
+      });
+
+      bgs[key].onStop(() => {
+        bgs[key].isOn = false;
+      });
+
+      const systemInfo = await getSystemInfo();
+
+      console.log(systemInfo, "systemInfo-------systemInfo");
+
+      /// TODO监听结束，因为loop无效  2020.08.12 loop有效，这个操作是为了解决stop之后还会跑音频数据的问题
+      bgs[key].onEnded(() => {
+        if (bgs[key].isOn) {
+          // 判断自己记录的开关
+          if (systemInfo?.platform.includes("Android")) {
+            // 安卓
+            bgs[key].play();
+          } else if (
+            systemInfo?.platform.includes("iOS") ||
+            systemInfo?.platform.includes("iPhone OS ")
+          ) {
+            // ios
+            bgs[key].isOn = false;
+          }
+          delete bgs[key];
+          callbackFn && callbackFn();
+        }
+      });
+      bgs[key].play(); // 安卓有时候autoplay好像莫得用
+      // console.log(src)
+      // bgs[key].isOn = true;	/// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
+    } else {
+      console.log("---------->>>>>>>>>>>>>not enter ");
+
+      bgs[key].play();
+      // bgs[key].isOn = true;	/// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
+      callbackFn && callbackFn();
+    }
+  } else {
+    if (bgs[key]) {
+      // bgs[key].pause();	/// pause 垃圾，不能用
+      console.log("test stop function is work or not");
+      bgs[key].stop();
+      // bgs[key].isOn = false;	/// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
+      callbackFn && callbackFn();
+    } else {
+      callbackFn && callbackFn();
+    }
+  }
+};

c_client/src/utils/util.js

@@ -166,6 +166,20 @@ export const getActivity = (sellerId) => {
           });
     })
 }
+
+/**
+ * 获取系统信息
+ * @returns {object} 小程序系统信息
+ */
+ export const getSystemInfo = () => {
+    return new Promise((resolve, reject) => {
+      my.getSystemInfo({
+        success: res => { resolve(res); },
+        fail: err => { reject(err); }
+      });
+    });
+};
+
 // 查询商家会员等级
 export const getGrade = (sellerId) => {
     const memberBenefitPlugin = requirePlugin("memberBenefit")
@@ -186,73 +200,3 @@ export const getGrade = (sellerId) => {
     })
 }
 
-let bgs = {
-}
-export const playBgMusic1 = async (isOn, src, loop=false) => {//待测试
-
-	for (let k in bgs) {
-		if (bgs[k].isOn) {
-			bgs[k].stop();
-		}
-		// bgs[k].isOn = false;	/// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
-	}
-
-	const key = src;
-  console.log('---------->>>>>>>>>>>>>ison',isOn);
-	if (isOn) {
-		if (!bgs[key]) {
-			bgs[key] = createAudio({
-				src: src,
-				autoplay: true,
-				loop: loop /// TODO 暂时无效？2020.08.12 目前有效，但stop后还会跑数据，导致到音频结束到时间又自动播放
-			});
-
-      console.log('----------------src',src,bgs[key],'bgs[key]')
-
-			bgs[key].onPlay(() => {
-				bgs[key].isOn = true;
-			});
-
-			bgs[key].onStop(() => {
-				bgs[key].isOn = false;
-			});
-
-      const systemInfo = await getSystemInfo();
-
-      console.log(systemInfo,'systemInfo-------systemInfo')
-
-			/// TODO监听结束，因为loop无效  2020.08.12 loop有效，这个操作是为了解决stop之后还会跑音频数据的问题
-			bgs[key].onEnded(() => {
-				if (bgs[key].isOn) {
-          	// 判断自己记录的开关
-            if(systemInfo?.platform.includes('Android')){
-              // 安卓
-              bgs[key].play();
-            } else if(systemInfo?.platform.includes('iOS') || systemInfo?.platform.includes('iPhone OS ')){
-              // ios
-              bgs[key].isOn = false;
-            }
-            delete bgs[key];
-
-				}
-			});
-
-			bgs[key].play();	// 安卓有时候autoplay好像莫得用
-
-			// console.log(src)
-			// bgs[key].isOn = true;	/// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
-
-		} else {
-
-			bgs[key].play();
-			// bgs[key].isOn = true;	/// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
-		}
-	} else {
-		if (bgs[key]) {
-			// bgs[key].pause();	/// pause 垃圾，不能用
-      console.log('test stop function is work or not')
-			bgs[key].stop();
-			// bgs[key].isOn = false;	/// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
-		}
-	}
-}
\ No newline at end of file