TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

本地发出的语音播放优化，必须从远端下载到本地之后再播放就好了，版本号升级，发布demo

Browse Source
This commit is contained in:
Jason.Chen
2022-02-22 17:20:51 +08:00
parent 5a52bdf2dd
commit 17e443fdeb
2 changed files with 63 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
pages/im/components/show/showVoice.vue
View File

@@ -2,9 +2,12 @@
<view class="">
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
<view class="msg--voice">
<view :class="['voice', isRemote ? 'left': 'right', {'onPlay': onPlay}]" :style="{width: width + 'rpx'}" @click="startPlay">
<image v-if="isRemote" class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }" src="@/static/icon/audio_green.png" mode="widthFix"></image>
<image v-else class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }" src="@/static/icon/audio_white.png" mode="widthFix"></image>
<view :class="['voice', isRemote ? 'left': 'right', {'onPlay': onPlay}]" :style="{width: width + 'rpx'}"
@click="startPlay">
<image v-if="isRemote" class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
src="@/static/icon/audio_green.png" mode="widthFix"></image>
<image v-else class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
src="@/static/icon/audio_white.png" mode="widthFix"></image>
<text class="duration">{{ duration }}"</text>
</view>
<u-badge isDot :show="message.content.local =='' && isRemote" />
@@ -27,13 +30,13 @@
isGroup: {
type: Boolean,
default: false
}
}
},
data() {
return {
onPlay: false,
innerAC: null,
msgId : null
innerAC: null,
msgId: null
}
},
computed: {
@@ -47,13 +50,13 @@
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
},
width() {
if (this.duration > 3) {
return (this.duration * 5) + 150
} else {
return 120
}
},
width() {
if (this.duration > 3) {
return (this.duration * 5) + 150
} else {
return 120
}
}
},
mounted() {
@@ -63,12 +66,12 @@
this.stopPlay()
}
})
},
created() {
console.log(this.message.messageId)
},
},
created() {
console.log(this.message.messageId)
},
methods: {
// 播放语音消息
startPlay() {
@@ -76,9 +79,10 @@
if (this.onPlay) {
this.stopPlay()
return
}
}
this.onPlay = true
// 如果下载到了本地，那么直接播放，否则调用下载语音消息接口，下载后再播放
if (this.message.content.local) {
if (this.message.content.local && this.message.content.local.indexOf('///data/user/') < 0) {
this.playVoice(this.message.content.local)
} else {
RongIMLib.downloadMediaMessage(this.message.messageId, {
@@ -88,27 +92,27 @@
},
progress: (progress, messageId) => {},
cancel: (messageId) => {},
error: (errorCode, messageId) => {
uni.showToast({
icon: 'none',
title: '语音播放失败'
})
error: (errorCode, messageId) => {
uni.showToast({
icon: 'none',
title: '语音播放失败'
})
}
})
}
},
playVoice(path) {
playVoice(path) {
console.log('准备播放', this.message.content);
this.innerAC = uni.createInnerAudioContext()
this.innerAC.src = path
this.innerAC.autoplay = false
this.msgId = this.message.messageId
this.innerAC.onCanplay(res => {
this.innerAC.autoplay = false
this.msgId = this.message.messageId
this.innerAC.onCanplay(res => {
console.log('onCanplay')
this.innerAC.play()
})
this.innerAC.onPlay(res => {
this.onPlay = true
})
this.innerAC.onPlay(res => {
console.log('onPlay')
uni.$emit('onVoiceMessagePlay', this.message.messageId)
})
this.innerAC.onEnded(res => {
@@ -117,11 +121,11 @@
this.innerAC.onStop(() => {
this.onPlay = false
this.innerAC.destroy()
this.innerAC = null
this.msgId = null
this.innerAC = null
this.msgId = null
uni.$emit('onVoiceMessageStop', this.message.messageId)
})
this.innerAC.onError(err => {
this.innerAC.onError(err => {
uni.showToast({
icon: 'none',
title: '语音播放失败'
@@ -129,31 +133,32 @@
})
},
stopPlay() {
// 停止播放语音消息
if (this.innerAC) {
this.innerAC.stop()
}
}
}
}
</script>
<style>
@keyframes playFlicker{
0%{
opacity: 1;
}
50%{
opacity: .5;
}
100%{
opacity: 1;
}
}
.videoFlicker{
animation: playFlicker 1s infinite;
}
</script>
<style>
@keyframes playFlicker {
0% {
opacity: 1;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
.videoFlicker {
animation: playFlicker 1s infinite;
}
</style>
<style scoped lang="scss">