Browse Source

修改短录音页面

test
douzhuo 2 years ago
parent
commit
748e0eec24
4 changed files with 97 additions and 257 deletions
  1. +29
    -31
      components/yz-audio/yz-audio.vue
  2. +1
    -1
      pages/index/customer.vue
  3. +57
    -198
      pages/mine/details.vue
  4. +10
    -27
      pages/mine/details2.vue

+ 29
- 31
components/yz-audio/yz-audio.vue View File

@@ -39,7 +39,7 @@
</view>
</view>
<!--video在ios中不能完全隐藏,否则无法播放-->
<video id="videoPlayer" class="videoPlayer" :src="src" :muted="false" style="width: 10rpx;height:10rpx;"
<video id="videoPlayer" :autoplay="true" class="videoPlayer" :src="src" :muted="false" style="width: 10rpx;height:10rpx;"
@play="playerOnPlay" @pause="playerOnPause" @ended="playerOnEnded" @timeupdate="playerOnTimeupdate"
@waiting="playerOnWaiting" @error="playerOnError"></video>
</template>
@@ -86,11 +86,18 @@
type: String,
default: ''
},
// src: {
// type: String,
// default: ''
// },
nowFileTime: {
type: [String, Number],
default: 0
},
},
watch: {
nowFileTime(oValue, nValue) {
this.duration = nValue
}
},
data() {
return {
src: '', //
@@ -108,37 +115,31 @@
created() {
// 自定义组件,需要传递第二个参数为this,否则后续的pause等操作不起作用
this.videoCtx = uni.createVideoContext("videoPlayer", this);
this.createPageAudio()
this.audio = uni.createInnerAudioContext();
this.audio.autoplay = false;
this.createAudio()
},

mounted() {
this.audio.onCanplay((e) => {
if (this.audio.duration != 0) {
this.playState = "pause"
this.$forceUpdate()
}
})
},

methods: {
...mapMutations(['createAudio', 'setAudio']),

createPageAudio() {
this.audio = uni.createInnerAudioContext();
this.audio.autoplay = false;
this.audio.onCanplay(() => {
// this.duration = this.audio.duration
console.log(this.audio, 'audio')
console.log(this.audio.duration, 'audio')
})
},

resetSrc(value) {
this.resetParams()
this.videoCtx.src = value
// this.audio.src = value;
this.$forceUpdate()
},

setSrc(value) {
console.log(this, ' 我打印this')
this.src = value;
this.playState = 'pause'
console.log(this.src, '我在这儿里更换src')
// 获取当前音频的总时长
this.audio.src = value;
this.$forceUpdate()
},

setPoster(value) {
this.poster = value;
},
@@ -149,11 +150,6 @@
this.singer = value;
},

resetParams() {
this.currentTime = 0;
this.$forceUpdate()
},

playerOnPlay(e) {
this.playState = "playing";
console.log('playerOnPlay', e)
@@ -169,6 +165,7 @@
console.log('playerOnEnded', e)
this.$emit("ended");
},

playerOnTimeupdate(e) {
if (this.isFirst) this.playState = "playing";
this.isFirst = true
@@ -176,6 +173,7 @@
this.currentTime = e.detail.currentTime;
this.$emit("timeUpdate", e.detail);
},

playerOnWaiting(e) {
this.playState = "loading";
console.log('playerOnWaiting', e)
@@ -197,7 +195,7 @@
let s = Math.floor(result % 60) < 10 ?
"0" + Math.floor(result % 60) :
Math.floor(result % 60);
return `${m}:${s}`;
return `${h}:${m}:${s}`;
},
stop() {
this.videoCtx.stop();


+ 1
- 1
pages/index/customer.vue View File

@@ -86,7 +86,7 @@
<view class="" v-if="item.zkEquipmentState.onLine!=0" style="display: flex;">
<view class="">
<!-- 电量 -->
<image v-if="item.zkEquipmentState.electricity>=80" class="you-img"
<image v-if="item.zkEquipmentState.electricity>=20" class="you-img"
src="../../static/images/cus2.png" mode=""></image>
<image v-else class="you-img" src="../../static/images/cus5.png" mode=""></image>
</view>


+ 57
- 198
pages/mine/details.vue View File

@@ -27,23 +27,8 @@
src="../../static/images/nopike.png" mode=""></image>
</view>
</view>
<view class="audio-container">
<view class="audio-play" @tap="changePlayState">
<image class="image" mode="widthFix"
:src="audioPlay ? 'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/pause.png' : 'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/play.png'">
</image>
</view>
<view class="audio-slider">
<view class="audio-time">
<text>{{currentTimeStr}}</text>
</view>
<slider class="slider" min="0" :max="sliderMax" @change="sliderChangeComplate" block-size="14"
:value="sliderValue" activeColor="blue"></slider>
<view class="audio-time">
<text>{{timeStr}}</text>
</view>
</view>
</view>
<yz-audio :nowFileTime="nowTime" class="audio-container" ref="zyAudio" @ended="qeihuanwenjian" @timeUpdate="TimeUpdate"
@sliderChangeComplate="sliderChangeComplate"></yz-audio>
</view>
<scroll-view :scroll-top="scrollTop" lower-threshold='20px' @scrolltolower="ltolower()"
:scroll-into-view="scrollId" scroll-y="true" class="text scroll-Y">
@@ -195,12 +180,6 @@
export default {
data() {
return {
audioPlay: false, //当前的播放状态控制
sliderValue: 0, //进度条最小值
sliderMax: 0, //进度条最大值
innerAudioContext: "", //播放实例
currentTimeStr: "00:00", //当前进度的时间
timeStr: "00:00", //总的时间
recordPath: "",
customerId: "",
luyinList: [], //录音文件
@@ -231,8 +210,6 @@
itemobj: {},
buildingID: '',
userlistobj: {},
// Menulist:[],
// Menulistisshow:false,

effective: false,
effectiveindex: '0',
@@ -269,7 +246,13 @@
}
};
},
onLoad: function(options) {
computed: {
nowTime() {
return this.getTime(this.luyinList[this.csdFileindex].recordDuration)
},
},
onLoad(options) {
this.status = options.status;
this.customerId = options.customerId;
this.itemobj = uni.getStorageSync('searchobj');
@@ -277,13 +260,9 @@
},
onShow() {
let newmenulist = uni.getStorageSync('weapp_session_Menu_data');
this.permissions.commonly2 = newmenulist.jdwxbj;
this.permissions.commonly3 = newmenulist.swyxal;
this.permissions.commonly4 = newmenulist.ccc;
//1 接待无效标记 jdwxbj
//1 设为优秀案例 swyxal
// 常错词 ccc

this.permissions.commonly2 = newmenulist.jdwxbj;//1 接待无效标记 jdwxbj
this.permissions.commonly3 = newmenulist.swyxal;//1 设为优秀案例 swyxal
this.permissions.commonly4 = newmenulist.ccc;// 常错词 ccc
this.buildingID = uni.getStorageSync('buildingID').id;
if (this.stateisshow == 2) {
var info = this.itemobj;
@@ -294,34 +273,9 @@
}

this.gituserlist()

this.innerAudioContext = uni.createInnerAudioContext();
this.innerAudioContext.autoplay = false;
this.innerAudioContext.title = '音频';

this.onPlay()
this.onPause()
this.onCanplay()
this.onEnded()
this.onSeeking()
this.onSeeked()
this.TimeUpdate()
this.init(info)
},
// 在组件实例被从页面节点树移除时执行
destroyed: function() {
//暂停
// this.innerAudioContext.pause()
// 销毁
this.innerAudioContext.destroy();
},
// 销毁实例
onUnload: function() {
//暂停
// this.innerAudioContext.pause()
// 销毁
this.innerAudioContext.destroy();
},

methods: {
effectiveAdd() {
if (this.effectiveindex == 4) {
@@ -398,84 +352,35 @@
})
},
toKeywordsearch() {
this.innerAudioContext.destroy();
this.stateisshow = 1;
uni.navigateTo({
url: '/pages/learning/Keywordsearch?customerId=' + this.customerId + "&status=" + this.status +
"&skpl=" + "1"
})
},
onPlay() {
this.innerAudioContext.onPlay(() => {
// 播放监听
console.log('播放!');
this.audioPlay = true;
});
},
onPause() {
this.innerAudioContext.onPause(() => {
// 暂停监听
console.log('暂停播放!');
this.audioPlay = false
});
},
onCanplay() {
this.innerAudioContext.onCanplay((callback) => {
console.log("缓冲回调", this.innerAudioContext.duration);
})
},
onEnded() {
this.innerAudioContext.onEnded(() => {
// 结束播放监听
console.log('播放结束!');
this.audioPlay = false;
this.qeihuanwenjian()
});
},
onSeeking() {
this.innerAudioContext.onSeeking((res) => {
console.log("进行跳转", res);
})
},
onSeeked() {
this.innerAudioContext.onSeeked((res) => {
console.log("结束跳转", res);
this.$forceUpdate()
});
},
TimeUpdate() {
this.innerAudioContext.onTimeUpdate(() => {
const {
currentTime,
duration
} = this.innerAudioContext;
this.playNow = parseInt(currentTime * 1000)
if (this.dialogList.length == 0) {

} else {
const message = this.dialogList[0].message
for (let i = 0; i < message.length; i++) {
if (Number(message[i].bg) < this.playNow && Number(message[i].ed) > this.playNow) {
this.scrollId = "dialog" + this.csdFileindex + "text" + message[i].bg;
break;
}
TimeUpdate(e) {
const {
currentTime,
duration
} = e;
this.playNow = parseInt(currentTime * 1000)
if (this.dialogList.length == 0) {
return
} else {
const message = this.dialogList[0].message
for (let i = 0; i < message.length; i++) {
if (Number(message[i].bg) < this.playNow && Number(message[i].ed) > this.playNow) {
this.scrollId = "dialog" + this.csdFileindex + "text" + message[i].bg;
break;
}
}
const currTimeStr = this.formatTime(currentTime);
this.sliderValue = parseInt(currentTime);
// 变动的时间
this.currentTimeStr = currTimeStr;
//进度条最大值
this.sliderMax = this.luyinList[this.csdFileindex].recordDuration;
console.log(duration)
this.$forceUpdate()
});
}
this.$forceUpdate()
},


init(info) {
this.sliderMax = 0; //进度条最大值
this.timeStr = "00:00"; //总的时间
const parames = {
pageNum: 1,
pageSize: 100,
@@ -490,51 +395,45 @@
item.recordDuration = item.recordDuration / 1
alltime += item.recordDuration
})
console.log(res, alltime, "999999999999")
this.alltimeStr = this.getTime(alltime)
if (info) {
res.forEach((item, index) => {
console.log(item, '打印音频列表内容')
if (item.id == info.id) {
this.luyinList = res;
this.csdFileindex = index;
this.recordPath = res[index].recordPath
this.sliderMax = this.getTime(res[index].recordDuration)
this.timeStr = this.getTime(res[index].recordDuration)
this.date = res[index].receptionTime;

this.isshowFile = false;
this.getCorpusAnalysis(info);
this.creatAudio()
var itc = parseInt(info.bg / 1000)
this.adasdasdasd(itc)
}
})
} else {
this.recordPath = res[0].recordPath
this.sliderMax = this.getTime(res[0].recordDuration)
this.timeStr = this.getTime(res[0].recordDuration)
this.date = res[0].receptionTime
this.innerAudioContext.src = this.recordPath;
// if(uni.getStorageSync('entrance')==2){
// this.changePlayState()
// }

this.luyinList = res;
this.getCorpusAnalysis()
}
console.log(res, '打印音频列表内容')
this.zyAudio()
}
})
},

//录音实例
zyAudio() {
console.log('this.recordPath', this.recordPath)
this.$refs.zyAudio.setSrc(this.recordPath)
},

//搜索跳转
adasdasdasd(e) {
const currTimeStr = this.formatTime(e)
this.currentTimeStr = currTimeStr
this.innerAudioContext.seek(e);
// if(uni.getStorageSync('entrance')==1){
// return
// }else{
// this.innerAudioContext.play();
// }
this.$refs.zyAudio.seek(e)
this.$refs.zyAudio.play();
},
//下一页
ltolower() {
@@ -554,8 +453,7 @@
this.$u.get(config.service.getCorpusAnalysis, obj).then(data => {
console.log(data)
if (!data.audioContent) {
setTimeout(function() {
}, 2000);
setTimeout(function() {}, 2000);
} else {
const jsonInfo = JSON.parse(data.audioContent);
this.dialogList.push({
@@ -574,7 +472,7 @@
})
}
},
// 取消全部加精
notappick() {
uni.showModal({
@@ -613,7 +511,7 @@
"status": 0,
"itemId": that.buildingID,
}
this.$u.post(config.service.addATD, objdata).then(data => {
this.status = 0
uni.showToast({
@@ -884,7 +782,7 @@
message: jsonInfo.splice(0, 80),
backindex: this.csdFileindex
});
var auth_timetimer = setInterval(() => {
stusnum -= 100;
console.log("还剩下" + stusnum)
@@ -893,7 +791,7 @@
clearInterval(auth_timetimer);
} else {
console.log("添加")
var newlistwang = [];
newlistwang = jsonInfo.splice(0, 100);
console.log("新数组", newlistwang)
@@ -926,24 +824,14 @@
getTime(time) {
return util.formatSecond(time)
},
// 录音暂停播放
changePlayState() {
if (this.audioPlay == false) {
this.innerAudioContext.play();
} else {
this.innerAudioContext.pause()
}
},
//音频前进回退
sliderChangeComplate(e) {
const currTimeStr = this.formatTime(e.detail.value)
this.currentTimeStr = currTimeStr
this.innerAudioContext.seek(e.detail.value);
this.innerAudioContext.play();
this.$refs.zyAudio.seek(e.detail.value);
this.$refs.zyAudio.play();
},
//长按点击播放
clickbofang(dialog, item) {
this.innerAudioContext.pause()
this.dialogList.forEach(res => {
res.message.forEach(asd => {
asd.isshow = false;
@@ -952,60 +840,31 @@
this.$forceUpdate()
if (dialog == this.csdFileindex) {
let time = parseInt(item.bg / 1000)
const currTimeStr = this.formatTime(time)
this.currentTimeStr = currTimeStr
this.innerAudioContext.seek(time);
this.innerAudioContext.play();
this.$refs.zyAudio.seek(time);
this.$refs.zyAudio.play();
return
} else {
let time = parseInt(item.bg / 1000)
this.innerAudioContext.destroy()

this.csdFileindex = dialog;
this.recordPath = this.luyinList[dialog].recordPath;
this.sliderMax = this.getTime(this.luyinList[dialog].recordDuration);
this.timeStr = this.getTime(this.luyinList[dialog].recordDuration);
this.date = this.luyinList[dialog].receptionTime;
this.creatAudio()
this.getCorpusAnalysis()

const currTimeStr = this.formatTime(time)
this.currentTimeStr = currTimeStr
this.innerAudioContext.seek(time);
this.innerAudioContext.play();
this.$refs.zyAudio.seek(time);
this.$refs.zyAudio.play();
}
},
// 文件切换播放
filechange(item, i) {
this.num = i; //下拉起始位置
this.Bnum = i;
this.innerAudioContext.destroy();
this.csdFileindex = i;
this.recordPath = item.recordPath;
this.sliderMax = this.getTime(item.recordDuration);
this.timeStr = this.getTime(item.recordDuration);
this.date = item.receptionTime;
this.isshowFile = false;
this.creatAudio()
this.zyAudio()
this.getCorpusAnalysis()
},
//录音实例
creatAudio() {
this.innerAudioContext = uni.createInnerAudioContext();
// if(uni.getStorageSync('entrance')==1){
this.innerAudioContext.autoplay = false;
// }else{
// this.innerAudioContext.autoplay = true;
// }
this.innerAudioContext.src = this.recordPath;
this.innerAudioContext.title = '音频';
this.onPlay()
this.onPause()
this.onCanplay()
this.onEnded()
this.onSeeking()
this.onSeeked()
this.TimeUpdate()
this.$forceUpdate()
},
// 自动播放下一个文件
qeihuanwenjian() {


+ 10
- 27
pages/mine/details2.vue View File

@@ -429,8 +429,6 @@
roleindex: 0,
roleindexbiaoji: 0,
sliderValue: 0, //进度条最小值
sliderMax: 0, //进度条最大值
timeStr: "00:00", //总的时间
recordPath: "",
customerId: "",
luyinList: [], //录音文件
@@ -442,7 +440,6 @@
scrollTop: 0,
scrollId: "",
playNow: 0,
alltimeStr: "00:00:00",
ratelist: [], //评分列表
totalRate: "",
thewrongword: "", //错误词
@@ -530,7 +527,7 @@
},
},

onLoad: function(options) {
onLoad(options) {
this.status = options.status;
this.customerId = options.customerId;
this.itemobj = uni.getStorageSync('searchobj');
@@ -564,14 +561,7 @@
this.init(info)

},
// 在组件实例被从页面节点树移除时执行
destroyed: function() {
//暂停
// 销毁
},
// 销毁实例
onUnload: function() {},

methods: {
// 关闭弹窗
close() {
@@ -1031,8 +1021,6 @@


init(info) {
this.sliderMax = 0; //进度条最大值
this.timeStr = "00:00"; //总的时间
const parames = {
pageNum: 1,
pageSize: 100,
@@ -1049,22 +1037,15 @@
} else {
this.kehuyixiangcenterindex = 1;
}
this.alltimeStr = this.getTime(alltime)
if (info.bg != 0) {
this.luyinList = res;
this.recordPath = res[0].recordPath
this.sliderMax = this.getTime(res[0].recordDuration)
this.timeStr = this.getTime(res[0].recordDuration)
this.date = res[0].receptionTime;

this.getCorpusAnalysis(info);
} else {
this.luyinList = res;
this.recordPath = res[0].recordPath
this.sliderMax = this.getTime(res[0].recordDuration)
this.timeStr = this.getTime(res[0].recordDuration)
this.date = res[0].receptionTime;

this.getCorpusAnalysis(info);
}
this.zyAudio()
@@ -1584,12 +1565,6 @@
})
},


//录音实例
zyAudio() {
console.log('this.recordPath', this.recordPath)
this.$refs.zyAudio.setSrc(this.recordPath)
},
formatTime(num) {
//格式化时间格式
num = num.toFixed(0);
@@ -1604,6 +1579,14 @@
asd.isshow = false;
})
},
//录音实例
zyAudio() {
console.log('this.recordPath', this.recordPath)
this.$refs.zyAudio.setSrc(this.recordPath)
},
},
}
</script>


Loading…
Cancel
Save