|
|
@@ -1,34 +1,332 @@
|
|
|
<template>
|
|
|
<view class="add-voice-page">
|
|
|
- <view class="img-move-box">
|
|
|
- <image :class="['img1',move1&&'move1']" src="./static/record-img.png" mode="widthFix" />
|
|
|
- <image :class="['img1',move1&&'move2']" src="./static/record-img.png" mode="widthFix" />
|
|
|
- <image :class="['img1',move1&&'move3']" src="./static/record-img.png" mode="widthFix" />
|
|
|
+ <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">
|
|
|
+ <image src="@/static/voice/pause.png" mode="aspectFill" />
|
|
|
+ <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>
|
|
|
+
|
|
|
+
|
|
|
+ <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 style="text-align:center;font-size:60rpx;padding-top:36rpx">{{time}}</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>
|
|
|
- <div @click="move1=true">button</div>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+const recorderManager = wx.getRecorderManager();//录音实例
|
|
|
+const innerAudioContext = uni.createInnerAudioContext();//播放音频实例
|
|
|
+const moment=require('@/utils/moment-with-locales.min')
|
|
|
export default {
|
|
|
+ filters:{
|
|
|
+ formatTime(e){
|
|
|
+ let m=parseInt(e/60).toString()
|
|
|
+ let s=parseInt(e%60).toString()
|
|
|
+ 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 {
|
|
|
- a:'a',
|
|
|
- move1:false
|
|
|
+ form:{
|
|
|
+ title:'',//语音标题
|
|
|
+ },
|
|
|
+
|
|
|
+ recorderStatus:'start',//当前录音状态 start开始 doing正在录音 stop停止录音 pause录音暂停
|
|
|
+ time:0,
|
|
|
+ timer:null,//计时器
|
|
|
+ isReset:false,//是否点击了重置
|
|
|
+
|
|
|
+ temAudio:{
|
|
|
+ url:'',//临时音频地址
|
|
|
+ duration:'',//时长
|
|
|
+ size:'',//大小
|
|
|
+ curTime:0,//播放时当前播放的时间
|
|
|
+ },//临时音频文件信息
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(){
|
|
|
+ // 调取用户授权使用麦克风
|
|
|
+ uni.authorize({
|
|
|
+ scope: 'scope.record',
|
|
|
+ success() {}
|
|
|
+ })
|
|
|
+ this.listenVoice()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ listenVoice(){
|
|
|
+ recorderManager.onStart(()=>{
|
|
|
+ //录音开始监听事件
|
|
|
+ console.log('开始录音');
|
|
|
+ this.recorderStatus='doing'
|
|
|
+ this.isReset=false
|
|
|
+ // this.timer=setInterval(() => {
|
|
|
+ // this.time+=1
|
|
|
+ // }, 1000);
|
|
|
+ })
|
|
|
+ recorderManager.onPause(()=>{
|
|
|
+ //录音暂停监听事件
|
|
|
+ console.log('录音暂停');
|
|
|
+ this.recorderStatus='pause'
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.timer=null
|
|
|
+ })
|
|
|
+ recorderManager.onResume(()=>{
|
|
|
+ //录音继续监听事件
|
|
|
+ console.log('录音继续');
|
|
|
+ this.recorderStatus='doing'
|
|
|
+ // this.timer=setInterval(() => {
|
|
|
+ // this.time+=1
|
|
|
+ // }, 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)
|
|
|
+ }
|
|
|
+
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.timer=null
|
|
|
+ })
|
|
|
+ recorderManager.onError((e)=>{
|
|
|
+ //录音事件错误监听
|
|
|
+ console.log('录音错误哦',e);
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //点击录音操作按钮
|
|
|
+ handleClickBtn(){
|
|
|
+ if(this.recorderStatus==='start'){
|
|
|
+ recorderManager.start({
|
|
|
+ duration:600000,
|
|
|
+ format:'mp3'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(this.recorderStatus==='doing'){
|
|
|
+ recorderManager.pause()//暂停录音
|
|
|
+ }
|
|
|
+ if(this.recorderStatus==='pause'){
|
|
|
+ recorderManager.resume()//继续录音
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //点击重置录音状态
|
|
|
+ handleResetRecorder(){
|
|
|
+ this.isReset=true
|
|
|
+ recorderManager.stop()
|
|
|
+ this.recorderStatus='start'
|
|
|
+ },
|
|
|
+
|
|
|
+ //点击完成录音
|
|
|
+ handleEndRecorder(){
|
|
|
+ //点击完成时还不是已结束录音状态
|
|
|
+ this.isReset=false
|
|
|
+ recorderManager.stop()
|
|
|
+ },
|
|
|
+
|
|
|
+ //拖动音频播放进度条
|
|
|
+ handleAudioSliderChange(e){
|
|
|
+ const value=e.detail.value
|
|
|
+ // this.globalBgMusic.seek(value)
|
|
|
}
|
|
|
+
|
|
|
},
|
|
|
}
|
|
|
</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>
|
|
|
-.img-move-box{
|
|
|
- position: relative;
|
|
|
- height: 200rpx;
|
|
|
- .img1{
|
|
|
+.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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.animat-box{
|
|
|
+ height: 50vh;
|
|
|
+ .con-box{
|
|
|
+ height: 80%;
|
|
|
+ background-color: #FAFAFA;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .img{
|
|
|
position: absolute;
|
|
|
width: 100vw;
|
|
|
- transform: translateX(100vw);
|
|
|
-
|
|
|
+ top: 50%;
|
|
|
+ transform: translateX(100vw) translateY(-50%);
|
|
|
}
|
|
|
.move1{
|
|
|
animation: move 30s linear infinite;
|
|
|
@@ -39,6 +337,12 @@ export default {
|
|
|
.move3{
|
|
|
animation: move 30s 20s linear infinite;
|
|
|
}
|
|
|
+ .animat-pause{
|
|
|
+ animation-play-state: paused;
|
|
|
+ }
|
|
|
+ .animat-run{
|
|
|
+ animation-play-state: running;
|
|
|
+ }
|
|
|
|
|
|
@keyframes move {
|
|
|
0%{
|
