+加入语音提醒，可持续重置播放MP3

liuyg

2022-03-14 c7058b30d07716f8f6e572319aac540de3e0876f

+加入语音提醒，可持续重置播放MP3

 pages/home/home.vue

@@ -4,20 +4,29 @@
        <!-- <view> -->
        <u-popup v-model="showOnceLogin" mode="center" :closeable="true" :custom-style="OnceLoginStyle"
            class="OnceLoginStyles">
                <img class="imgs1" src="../../static/home/img/laba2.png" mode=""></img>
                <view class="onceBody">
                    <view class="names">
                        管理员{{$store.state.puserName}}:
                    </view>
                    <view class="texts">
                        恭喜您加入洪城义警,
                        我们期待与您共建平安家园,
                        即日起您可参与治安防范巡查等任务,获得积分
                    </view>
            <img class="imgs1" src="../../static/home/img/laba2.png" mode=""></img>
            <view class="onceBody">
                <view class="names">
                    管理员{{$store.state.puserName}}:
                </view>
                <!-- <button type="default" class="buts">点击进入</button> -->
                <view class="texts">
                    恭喜您加入洪城义警,
                    我们期待与您共建平安家园,
                    即日起您可参与治安防范巡查等任务,获得积分
                </view>
            </view>
            <!-- <button type="default" class="buts">点击进入</button> -->
        </u-popup>
        <u-button @click="showOnceLogin = true">打开</u-button>
        <!-- <u-button @click="">打开</u-button>
        <u-button @click="ccc">打开</u-button>
        <u-button @click="aaa(0)">播放</u-button>
        <u-button @click="bbb(0)">暂停</u-button>
        <u-button @click="ddd(0)">结束</u-button>
        <u-button @click="eee(0)">销毁</u-button>
        <u-button @click="aaa(1)">播放1</u-button>
        <u-button @click="bbb(1)">暂停1</u-button>
        <u-button @click="ddd(1)">结束1</u-button>
        <u-button @click="eee(1)">销毁1</u-button> -->
        <!-- </view> -->
        <view class="head">
            <u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" title=""
@@ -170,13 +179,13 @@
                gdlist: [
                    '南昌一波重磅“官宣”！来了！'
                ],
                showOnceLogin: true, //首次进入显示祝贺信
                showOnceLogin: false, //首次进入显示祝贺信
                OnceLoginStyle: {
                    // width: '60%',
                    // height: '50%',
                    // backgroundColor: '#fff',
                    // margin: 'auto'
                }
                },
            };
        },
        onShow() {
@@ -245,6 +254,34 @@
            }
        },
        methods: {
            aaa(i) {
                let key = i == 1 ? 'keke' : 'song1';
                this.$store.commit("controlAudio", {
                    key: key,
                    method: '$play'
                })
            },
            bbb(i) {
                let key = i == 1 ? 'keke' : 'song1';
                this.$store.commit("controlAudio", {
                    key: key,
                    method: '$pause'
                })
            },
            ddd(i) {
                let key = i == 1 ? 'keke' : 'song1';
                this.$store.commit("controlAudio", {
                    key: key,
                    method: '$stop'
                })
            },
            eee(i) {
                let key = i == 1 ? 'keke' : 'song1';
                this.$store.commit("controlAudio", {
                    key: key,
                    method: '$destroy'
                })
            },
            //温馨提示跳转页面
            wxtsGo() {
                //去跳转
@@ -301,7 +338,7 @@
                        type: 'warning',
                    })
                    return;
                }else if (index == 3) {
                } else if (index == 3) {
                    this.$refs.uToast.show({
                        title: '功能研发中',
                        type: 'warning',

 static/song/keke.mp3

Binary files differ

 static/song/song1.mp3

Binary files differ

 store/lid/myAudio.js

New file
@@ -0,0 +1,64 @@
class myAudio {
    constructor(arg) {
        // this.id = arg.id;
        // this.src = arg.src;
        this.fn = arg.fn || function(res) {
            // console.log(res)
        }
        //实例化声音  
        // let doit = () => {
        this.state = '1';
        this.uni = arg.uni;
        this.Audio = this.uni.createInnerAudioContext();
        // this.Audio.src = this.src;
        this.Audio.onPlay(() => {
            // console.log("开始播放", this.src);
        })
        this.Audio.onEnded(() => {
            // console.log("音频自然播放结束事件", this.src);
            // doit();
            this.state = '1';
        })
        this.Audio.onTimeUpdate((res) => {
            // console.log("音频播放进度更新事件", res, this.src);
        })

        this.Audio.onError((res) => {
            // console.log(res.errMsg);
            // console.log(res.errCode);
        })
        // }
        // doit();
    }
    $play(src) {
        console.log(this.state)
        if (this.state == '2') {
            //之前有播放 需要先清除
            this.Audio.destroy();
            this.Audio = this.uni.createInnerAudioContext();
        }
        this.Audio.src = '/static/song/' + src + '.mp3';
        this.Audio.play();
        this.state = '2';
    }
    $pause() {
        if (!this.Audio.paused) {
            this.Audio.pause();
            this.state = '2';
        }
    }
    $stop() {
        if (this.Audio) {
            this.Audio.stop();
            this.state = '2';
        }
    }
    $destroy() {
        if (this.Audio) {
            this.Audio.destroy();
            this.state = '2';
        }
    }
}

export default myAudio

 store/mutations.js

@@ -40,6 +40,9 @@
        // console.log(2123131)
        state.gotuGrabOrders = !state.gotuGrabOrders;
    },
    controlAudio(state, data) {
        state.Audio[data.method](data.key);
    },
    ...websocket.mutations,
    ...positions.mutations
}

 store/state.js

@@ -1,6 +1,9 @@
import websocket from "./websocket.js"
import positions from "./positions.js"
import apis from "./apiConfig.js"


import myAudio from './lid/myAudio.js'
const state = {
    examDetail: {}, // 考试详情
    questionList: [], // 考试考题列表
@@ -59,6 +62,9 @@
        }
    ],
    gotuGrabOrders: false,
    Audio: new myAudio({
        uni: uni
    }), //语音控制
    ...websocket.state,
    ...positions.state
}