yb9.0

pages-voice/addVoice.vue

@@ -18,8 +18,12 @@
             :border="false"
         />
 
-        <view class="flex audio-box">
-            <image src="@/static/voice/pause.png" mode="aspectFill" />
+        <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" 
@@ -30,6 +34,11 @@
             />
             <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>
           
 
@@ -44,7 +53,7 @@
                 <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 style="text-align:center;font-size:60rpx;padding-top:36rpx">{{time}}</view>
+            <view class="bot-text">{{time}}</view>
         </view>
 
         <view class="sound-record-wrap" v-if="recorderStatus!=='stop'">
@@ -62,13 +71,15 @@
                 @click="handleEndRecorder"
             >完成</view>
         </view>
+
+        <view class="publish-btn" v-if="recorderStatus==='stop'">发布</view>
+          
     </view>
 </template>
 
 <script>
 const recorderManager = wx.getRecorderManager();//录音实例
 const innerAudioContext = uni.createInnerAudioContext();//播放音频实例
-const moment=require('@/utils/moment-with-locales.min')
 export default {
     filters:{
         formatTime(e){
@@ -106,6 +117,7 @@ export default {
                 duration:'',//时长
                 size:'',//大小
                 curTime:0,//播放时当前播放的时间
+                paused:true,
             },//临时音频文件信息
         }
     },
@@ -116,17 +128,20 @@ export default {
             success() {}
         })
         this.listenVoice()
+        this.listenAudio()
     },
     methods: {
+        //录音事件
         listenVoice(){
             recorderManager.onStart(()=>{
                 //录音开始监听事件
                 console.log('开始录音');
                 this.recorderStatus='doing'
                 this.isReset=false
-                // this.timer=setInterval(() => {
-                //     this.time+=1
-                // }, 1000);
+
+                this.timer=setInterval(() => {
+                    this.time++
+                }, 1000);
             })
             recorderManager.onPause(()=>{
                 //录音暂停监听事件
@@ -139,9 +154,9 @@ export default {
                 //录音继续监听事件
                 console.log('录音继续');
                 this.recorderStatus='doing'
-                // this.timer=setInterval(() => {
-                //     this.time+=1
-                // }, 1000);
+                this.timer=setInterval(() => {
+                    this.time++
+                }, 1000);
             })
             recorderManager.onStop((e)=>{
                 //录音结束监听事件
@@ -152,7 +167,7 @@ export default {
                     this.recorderStatus='stop'
                     this.temAudio.url=e.tempFilePath
                     this.temAudio.size=e.fileSize
-                    this.temAudio.duration=parseInt(e.duration)
+                    this.temAudio.duration=parseInt(e.duration/1000)
                 }
                 
                 clearInterval(this.timer)
@@ -168,8 +183,7 @@ export default {
         handleClickBtn(){
             if(this.recorderStatus==='start'){
                 recorderManager.start({
-                    duration:600000,
-                    format:'mp3'
+                    duration:600000
                 })
             }
             if(this.recorderStatus==='doing'){
@@ -182,6 +196,7 @@ export default {
 
         //点击重置录音状态
         handleResetRecorder(){
+            if(this.recorderStatus==='doing') return
             this.isReset=true
             recorderManager.stop()
             this.recorderStatus='start'
@@ -197,7 +212,56 @@ export default {
         //拖动音频播放进度条
         handleAudioSliderChange(e){
             const value=e.detail.value
-            // this.globalBgMusic.seek(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(()=>{
+                console.log(innerAudioContext.currentTime);
+                this.temAudio.curTime=parseInt(innerAudioContext.currentTime)
+            })
+        },
+
+        //删除录音记录
+        handleDelRecord(){
+            this.recorderStatus='start'
+            this.isReset=true
+            this.temAudio.url=''
         }
 
     },
@@ -312,6 +376,33 @@ page{
             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;
     }
 }
 
@@ -322,11 +413,16 @@ page{
         background-color: #FAFAFA;
         position: relative;
     }
+    .bot-text{
+        font-size: 60rpx;
+        padding-top: 36rpx;
+        text-align: center;
+    }
     .img{
         position: absolute;
         width: 100vw;
-        top: 50%;
-        transform: translateX(100vw) translateY(-50%);
+        top: 27%;
+        transform: translateX(100vw);
     }
     .move1{
         animation: move 30s linear infinite;