hongze_yb_xcx/pages-question/answerDetail.vue

<template>
    <view class="answerdetail-page">
        <view class="detail-title">
            <text>{{ questionItem.text }}</text>
            <text>{{ questionItem.time }}</text>
        </view>
        <view class="recode">
            麦克风
            {{audioTime}}
        </view>
        <view class="recode-btn">
            <view @click="handleAudio(1)">开始录音</view>
            <view @click="handleAudio(2)">暂停录音</view>
            <view @click="handleAudio(3)">停止录音</view>
            <view @click="handleAudio(4)">播放录音</view>
        </view>
    </view>
</template>

<script>
const moment=require('@/utils/moment-with-locales.min')
moment.locale('zh-cn');
export default {
    data() {
        return {
            questionItem: {
                id: 1,
                text: '疫情下全球苯乙烯市场有什么动荡和影响',
                time: '2022.5.23 14:40',
                source: 'xxx.mp3',
                isAnswer: 1,//1未回答,2已回答
                status: 1,//1:未录音;2:正在录音;3:已暂停;4:完成录音
            },
            innerAudio: null,//该页面的音频
            audioCount:0,
            audioTime:'00:00',
            timer:null
        };
    },
    onLoad() {
		this.initAudio()
	},
	onUnload(){
		this.destoryAudio()
	},
    methods: {
        //初始化audio
		initAudio() {
			this.innerAudio = uni.createInnerAudioContext()
			this.handleAudioFun()
            this.handleRecorderFun()
		},
		//销毁audio
		destoryAudio() {
			if (this.innerAudio) {
				this.innerAudio.destroy()
			}
		},
        handleAudioFun(){
            this.innerAudio.onPlay(()=>{
                console.log('播放录音了')
            })
        },
        handleRecorderFun(){
            this.globalRecorder.onStart(()=>{
                console.log('开始录音')
            })
            this.globalRecorder.onPause(()=>{
                console.log('暂停录音')
                this.cleanTime()
            })
            this.globalRecorder.onStop((res)=>{
                console.log('录音完成')
                console.log('res',JSON.stringify(res))
                this.innerAudio.src = res.tempFilePath
                this.cleanTime()
            })
            this.globalRecorder.onFrameRecorded((res)=>{
                console.log('?',res)
            })
        },
        handleAudio(type) {
            //根据questionItem.status
            if (type === 1) {
                this.globalRecorder.start({ duration: 180000,frameSize:'1' })
                this.clockTime()
            } else if (type === 2) {
                this.globalRecorder.pause()
            } else if (type === 3) {
                this.globalRecorder.stop()
                this.cleanTime()
            }else{
                this.innerAudio.play()
            }

        },
        clockTime(){
            console.log('开始计时')
            this.timer = setInterval(()=>{
                if(this.timer){
                    this.audioCount++
                    this.audioTime = moment(this.audioCount*1000).format('mm:ss')
                }
            },1000)
        },
        cleanTime(){
            this.timer = null
            this.audioTime = moment(this.audioCount*1000).format('mm:ss')
        }
    },
};
</script>

<style scoped lang="scss">
</style>