hongze_yb_xcx/pages-voice/addVoice.vue

<template>
    <view class="add-voice-page">
        <van-field
            :value="form.title"
            placeholder="请输入语音标题"
            :border="false"
            clearable
            label="语音标题"
        />
        <van-cell 
            title="品种" 
            value="原油" 
            :border="false"
        />
        <van-cell 
            title="板块名称" 
            value="每日原油播报" 
            :border="false"
        />

        <view class="flex audio-box" v-if="recorderStatus==='stop'">
            <image 
                :src="temAudio.paused?'../../../static/voice/pause.png':'../../../static/voice/playing.png'" 
                mode="aspectFill" 
                @click="handlePlayAudio" 
            />
            <slider
                activeColor="#E6B77D"
                :max="temAudio.duration" 
                :value="temAudio.curTime" 
                @change="handleAudioSliderChange($event)"
                block-size="12"
                class="slider"
            />
            <text class="left-time">{{temAudio.curTime|formatTime}}</text>
            <text class="right-time">{{temAudio.duration|formatTime}}</text>
            <view class="del-btn" @click="handleDelRecord">
                <image src="./static/del.png" mode="aspectFill" />
                <text>删除</text>
            </view>
              
        </view>
          

        <view class="empty-voice-box" v-if="recorderStatus==='start'">
            <image src="./static/record.png" mode="aspectFill" />
            <view>无录音（录音时长超过十分钟自动结束）</view>
        </view>

        <view class="animat-box" v-if="recorderStatus==='doing'||recorderStatus==='pause'">
            <view class="con-box">
                <image :class="['img move1',recorderStatus==='doing'?'animat-run':'animat-pause']" src="./static/record-img.png" mode="widthFix" />
                <image :class="['img move2',recorderStatus==='doing'?'animat-run':'animat-pause']" src="./static/record-img.png" mode="widthFix" />
                <image :class="['img move3',recorderStatus==='doing'?'animat-run':'animat-pause']" src="./static/record-img.png" mode="widthFix" />
            </view>
            <view class="bot-text">{{time|formatTime}}</view>
        </view>

        <view class="sound-record-wrap" v-if="recorderStatus!=='stop'">
            <view class="top-text">点击开始录音</view>
            <image class="btn" :src="btnImg" mode="aspectFill" @click="handleClickBtn" />
            <view 
                class="del-btn" 
                :style="{color:recorderStatus==='doing'&&'#999'}" 
                v-if="recorderStatus!=='start'"
                @click="handleResetRecorder"
            >删除</view>
            <view 
                class="done-btn" 
                v-if="recorderStatus!=='start'"
                @click="handleEndRecorder"
            >完成</view>
        </view>

        <view class="publish-btn" v-if="recorderStatus==='stop'">发布</view>
          
    </view>
</template>

<script>
const recorderManager = wx.getRecorderManager();//录音实例
const innerAudioContext = uni.createInnerAudioContext();//播放音频实例
let TIMER=null//计时器
export default {
    filters:{
        formatTime(e){
            let m=parseInt(e/60)
            let s=parseInt(e%60)
            return `${m>9?m:'0'+m}:${s>9?s:'0'+s}`
        }
    },
    computed:{
        btnImg(){
            if(this.recorderStatus==='start'){
                return './static/voice-start.png'
            }else if(this.recorderStatus==='doing'){
                return './static/voice-doing.png'
            }else if(this.recorderStatus==='stop'){
                return './static/voice-pause.png'
            }else if(this.recorderStatus==='pause'){
                return './static/voice-pause.png'
            }
        }
    },
    data() {
        return {
            form:{
                title:'',//语音标题
            },

            recorderStatus:'start',//当前录音状态 start开始 doing正在录音 stop停止录音 pause录音暂停
            time:0,
            isReset:false,//是否点击了重置

            temAudio:{
                url:'',//临时音频地址
                duration:'',//时长
                size:'',//大小
                curTime:0,//播放时当前播放的时间
                paused:true,
            },//临时音频文件信息
        }
    },
    onLoad(){
        // 调取用户授权使用麦克风
        uni.authorize({
            scope: 'scope.record',
            success() {}
        })
        this.listenVoice()
        this.listenAudio()
    },
    methods: {
        //录音事件
        listenVoice(){
            recorderManager.onStart(()=>{
                //录音开始监听事件
                console.log('开始录音');
                this.recorderStatus='doing'
                this.isReset=false
                if(!TIMER){
                    TIMER=setInterval(() => {
                        this.time++
                    }, 1000);
                }
                
            })
            recorderManager.onPause(()=>{
                //录音暂停监听事件
                console.log('录音暂停');
                this.recorderStatus='pause'
                clearInterval(TIMER)
                TIMER=null
            })
            recorderManager.onResume(()=>{
                //录音继续监听事件
                console.log('录音继续');
                this.recorderStatus='doing'

                if(!TIMER){
                    TIMER=setInterval(() => {
                        this.time++
                    }, 1000);
                }
            })
            recorderManager.onStop((e)=>{
                //录音结束监听事件
                console.log('录音结束',e);

                // 如果是点击重置(删除按钮)的 则不做结束处理
                if(!this.isReset){
                    this.recorderStatus='stop'
                    this.temAudio.url=e.tempFilePath
                    this.temAudio.size=e.fileSize
                    this.temAudio.duration=parseInt(e.duration/1000)
                }
                
                clearInterval(TIMER)
                TIMER=null
            })
            recorderManager.onError((e)=>{
                //录音事件错误监听
                console.log('录音错误哦',e);
            })
        },

        //点击录音操作按钮
        handleClickBtn(){
            if(this.recorderStatus==='start'){
                recorderManager.start({
                    duration:600000
                })
            }
            if(this.recorderStatus==='doing'){
                recorderManager.pause()//暂停录音
            }
            if(this.recorderStatus==='pause'){
                recorderManager.resume()//继续录音
            }
        },

        //点击重置录音状态
        handleResetRecorder(){
            if(this.recorderStatus==='doing') return
            this.isReset=true
            recorderManager.stop()
            this.recorderStatus='start'
        },

        //点击完成录音
        handleEndRecorder(){
            //点击完成时还不是已结束录音状态
            this.isReset=false
            recorderManager.stop()
        },

        //拖动音频播放进度条
        handleAudioSliderChange(e){
            const value=e.detail.value
            innerAudioContext.seek(value)
        },

        //点击播放\暂停音频
        handlePlayAudio(){
            //没有初始化时
            if(!innerAudioContext.src){
                innerAudioContext.src=this.temAudio.url 
                innerAudioContext.play()
                return
            }

            if(innerAudioContext.paused){
                innerAudioContext.play()
            }else{
                innerAudioContext.pause()
            }
        },

        //音频播放事件
        listenAudio(){
            innerAudioContext.onPlay(()=>{
                console.log('开始播放录音');
                this.temAudio.paused=false
            })
            innerAudioContext.onPause(()=>{
                console.log('录音播放暂停');
                this.temAudio.paused=true
            })
            innerAudioContext.onStop(()=>{
                console.log('录音播放停止');
                this.temAudio.paused=true
                innerAudioContext.src=''
            })
            innerAudioContext.onEnded(()=>{
                console.log('录音播放自然结束');
                this.temAudio.paused=true
                innerAudioContext.src=''
            })
            innerAudioContext.onTimeUpdate(()=>{
                this.temAudio.curTime=parseInt(innerAudioContext.currentTime)
            })
        },

        //删除录音记录
        handleDelRecord(){
            this.recorderStatus='start'
            this.isReset=true
            this.temAudio.url=''
            this.time=0
            TIMER=null
        }

    },
}
</script>

<style>
.add-voice-page .van-cell{
    border-bottom: 1px solid #e5e5e5;
}
.add-voice-page .van-field__label{
    font-size: 32rpx;
    color: #333;
}
.add-voice-page .van-cell__title{
    max-width: 6.2em;
    min-width: 6.2em;
    margin-right: 12px;
    font-size: 32rpx;
    color: #333;
}
.add-voice-page .van-cell__value{
    text-align: left;
    font-size: 32rpx;
}

page{
    padding-bottom:constant(safe-area-inset-bottom);
    padding-bottom:env(safe-area-inset-bottom);
}
</style>

<style lang="scss" scoped>
.add-voice-page{
    .empty-voice-box{
        height: 50vh;
        padding-top: 150rpx;
        image{
            width: 140rpx;
            height: 140rpx;
            margin-bottom: 20rpx;
        }
        text-align: center;
        color: #999999;
    }
    .sound-record-wrap{
        border-top: 1px solid #E6E6E6;
        padding-top: 126rpx;
        position: relative;
        .top-text{
            text-align: center;
            color: #EE3636;
            position: absolute;
            top: 50rpx;
            left: 50%;
            transform: translateX(-50%);
        }
        .btn{
            width: 118rpx;
            height: 118rpx;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        .del-btn{
            position: absolute;
            left: 122rpx;
            bottom: 40rpx;
            font-size: 32rpx;
            color: #EE3636;
        }
        .done-btn{
            position: absolute;
            right: 122rpx;
            bottom: 40rpx;
            font-size: 32rpx;
            color: #EE3636;
        }
    }

    .audio-box{
        background-color: #FDF8F2;
        height: 123rpx;
        align-items: center;
        margin-left: 34rpx;
        margin-right: 34rpx;
        margin-top: 60rpx;
        margin-bottom: 180rpx;
        padding: 0 30rpx;
        position: relative;
        .left-time{
            position: absolute;
            bottom: 20rpx;
            left: 100rpx;
            color: #999999;
            font-size: 20rpx;
        }
        .right-time{
            position: absolute;
            bottom: 20rpx;
            right: 40rpx;
            color: #999999;
            font-size: 20rpx;
        }
        image{
            width: 40rpx;
            height: 48rpx;
            flex-shrink: 0;
            margin-right: 30rpx;
        }
        .slider{
            flex: 1;
            margin: 0 10rpx;
        }
        .del-btn{
            display: flex;
            align-items: center;
            color: #999999;
            font-size: 28rpx;
            position: absolute;
            bottom: -50rpx;
            right: 0;
            image{
                width: 32rpx;
                height: 35rpx;
                margin-right: 10rpx;
            }
        }
    }

    .publish-btn{
        width: 390rpx;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        color: #fff;
        background: #E6B77D;
        font-size: 32rpx;
        border-radius: 40px;
        margin-left: auto;
        margin-right: auto;
    }
}

.animat-box{
    height: 50vh;
    .con-box{
        height: 80%;
        background-color: #FAFAFA;
        position: relative;
    }
    .bot-text{
        font-size: 60rpx;
        padding-top: 36rpx;
        text-align: center;
    }
    .img{
        position: absolute;
        width: 100vw;
        top: 27%;
        transform: translateX(100vw);
    }
    .move1{
        animation: move 30s linear infinite;
    }
    .move2{
        animation: move 30s 10s linear infinite;
    }
    .move3{
        animation: move 30s 20s linear infinite;
    }
    .animat-pause{
        animation-play-state: paused;
    }
    .animat-run{
        animation-play-state: running;
    }

    @keyframes move {
        0%{
            transform: translateX(100vw);
        }
        100%{
            transform: translateX(-200vw);
        }
    }
}
</style>