Skip to content

T
taobao-mini-template
Commit bb63845a authored by wanghuan's avatar wanghuan
Browse files
Options

audio优化

parent cc4d671f
Hide whitespace changes
Inline Side-by-side
Showing with 237 additions and 86 deletions
c_client/src/const.js
View file @ bb63845a
...@@ -198,4 +198,16 @@ export const prizeList = [ ...@@ -198,4 +198,16 @@ export const prizeList = [
content:'商品描述商品描述商品描述商品描述商品描述8' content:'商品描述商品描述商品描述商品描述商品描述8'
} }
]; ];
\ No newline at end of file
/*
浏览页倒计时标识
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
View file @ bb63845a
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @description 音乐 * @description 音乐
*/ */
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { playBgMusic1 } from "@/utils/util"; import { playBgMusic1 } from "@/utils/audio";
const app = getApp(); const app = getApp();
/** /**
...@@ -11,8 +11,9 @@ ...@@ -11,8 +11,9 @@
* @param {*} isBgMusic 是否自动调用(背景音乐自动调用),非背景音乐(点击音效)手动调用 * @param {*} isBgMusic 是否自动调用(背景音乐自动调用),非背景音乐(点击音效)手动调用
* @returns * @returns
*/ */
export const useAudio = (url, isBgMusic) => { export const useAudio = (url, isBgMusic=false) => {
const [musicUrl, setMusicUrl] = useState(); const [musicUrl, setMusicUrl] = useState();
// 若需要控制所有的音效状态，app上自定义一个变量
const [openStatus,setOpenStatus] = useState(true); const [openStatus,setOpenStatus] = useState(true);
useEffect(() => { useEffect(() => {
getMusicInfo(); getMusicInfo();
...@@ -37,18 +38,12 @@ ...@@ -37,18 +38,12 @@
}; };
/** /**
* @description 播放音效 * @description 播放音效
* @param {*} selfStatus 是否单独控制音效状态 * @param {boolean} selfStatus 是否单独控制音效状态
* @param {function} callbackFn 播放之后的回调
*/ */
const playAudio = (selfStatus = false) => { const playAudio = (callbackFn=()=>{}) => {
console.log('musicUrl',musicUrl,'selfStatus',selfStatus) console.log('musicUrl',musicUrl,'selfStatus',openStatus)
if(!selfStatus){ musicUrl && playBgMusic1(openStatus, musicUrl, callbackFn);
selfStatus = openStatus
}
if(!musicUrl){
return
} else {
musicUrl && playBgMusic1(selfStatus, musicUrl, false);
}
}; };
return { return {
playAudio, playAudio,
......
c_client/src/hooks/useAudio.md
View file @ bb63845a
...@@ -11,7 +11,79 @@ ...@@ -11,7 +11,79 @@
##### 出参 ##### 出参
| 出参 | 类型 | 描述 | 默认值 | 备注 | | 出参 | 类型 | 描述 | 默认值 | 备注 |
| :--- | :---: | :---: |:---: | :---: | | :--- | :---: | :---: |:---: | :---: |
| playAudio | Function | 播放音乐/音效 | selfStatus,默认值为false | 是否单独处理 | | playAudio | Function | 播放音乐/音效 | 有回调函数callback | callback默认为空函数 |
| openStatus | Boolean | 默认开启播放 | true | / | | openStatus | Boolean | 默认开启播放 | true | / |
| setOpenStatus | Function | 改变开始/暂停状态 | / | true/false都会调用playMusic1方法| | setOpenStatus | Function | 改变开始/暂停状态 | / | true/false都会调用playMusic1方法|
| musicUrl | String | cloud文件得到的音频url链接 | 'https:xxxx.mp3' | 音频文件url链接| | musicUrl | String | cloud文件得到的音频url链接 | 'https:xxxx.mp3' | 音频文件url链接|
\ No newline at end of file
+ 使用
```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 0 → 100644
View file @ bb63845a
/**
* 创建音频类
*/
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
View file @ bb63845a
...@@ -166,6 +166,20 @@ export const getActivity = (sellerId) => { ...@@ -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) => { export const getGrade = (sellerId) => {
const memberBenefitPlugin = requirePlugin("memberBenefit") const memberBenefitPlugin = requirePlugin("memberBenefit")
...@@ -186,73 +200,3 @@ export const getGrade = (sellerId) => { ...@@ -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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment