ZhHealth/pages/im/components/show/showVoice.vue

<template>
    <view class="msg--voice">
        <message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />

        <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>
                    <text class="duration">{{ duration }}"</text>
                </view>
                <u-badge isDot :show="message.content.local =='' && isRemote" />
            </view>
        </view>
    </view>
</template>

<script>
    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
    import messageState from './messageState'
    import imBase from '../../mixins/imBase.js'
    
    export default {
        props: {
            message: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            isGroup: {
                type: Boolean,
                default: false
            }
        },
        components: {
            messageState
        },
        data() {
            return {
                onPlay: false,
                innerAC: null,
                msgId: null
            }
        },
        computed: {
            duration() {
                return this.message.content.duration
            },
            isRemote() {
                return this.message.messageDirection == 2
            },
            width() {
                if (this.duration > 3) {
                    return (this.duration * 5) + 150
                } else {
                    return 120
                }
            }
        },
        mounted() {
            // 这样能临时解决，但是会一直监听
            uni.$on('onVoiceMessagePlay', (messageId) => {
                if (this.message.messageId != messageId) {
                    this.stopPlay()
                }
            })
        },
        methods: {
            // 播放语音消息
            startPlay() {
                // 如果是正在播放的，停止当前播放
                if (this.onPlay) {
                    this.stopPlay()
                    return
                }
                this.onPlay = true
                // 如果下载到了本地，那么直接播放，否则调用下载语音消息接口，下载后再播放
                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, {
                        success: (path) => {
                            this.message.content.local = path
                            this.playVoice(path)
                        },
                        progress: (progress, messageId) => {},
                        cancel: (messageId) => {},
                        error: (errorCode, messageId) => {
                            uni.showToast({
                                icon: 'none',
                                title: '语音播放失败'
                            })
                        }
                    })
                }
            },
            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 => {
                    console.log('onCanplay')
                    this.innerAC.play()
                })
                this.innerAC.onPlay(res => {
                    console.log('onPlay')
                    uni.$emit('onVoiceMessagePlay', this.message.messageId)
                })
                this.innerAC.onEnded(res => {
                    this.innerAC.stop()
                })
                this.innerAC.onStop(() => {
                    this.onPlay = false
                    this.innerAC.destroy()
                    this.innerAC = null
                    this.msgId = null
                    uni.$emit('onVoiceMessageStop', this.message.messageId)
                })
                this.innerAC.onError(err => {
                    uni.showToast({
                        icon: 'none',
                        title: '语音播放失败'
                    })
                })
            },
            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;
    }
</style>

<style scoped lang="scss">
    .msg--voice {
        display: flex;
        align-items: flex-end;

        .state {
            padding: 10rpx;
            border-radius: 30rpx;
            width: 40rpx;
            background-color: #ddd;
            display: flex;
            margin-right: 10rpx;

            .sent {
                z-index: 2;
            }

            .receive {
                z-index: 1;
                margin-left: -20rpx;
            }
        }

        .name {
            font-size: 24rpx;
            color: $text-gray-m;
        }

        .msg-voice {
            display: flex;
            align-items: center;

            .u-badge {
                margin-left: 20rpx;
            }

            .voice {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                height: 84rpx;
                padding: 0 30rpx;
                box-sizing: border-box;

                .icon {
                    width: 38rpx;
                    height: 38rpx;
                }

                &.left {
                    border-radius: 0 20rpx 20rpx 20rpx;
                    background: white;

                    &.onPlay {
                        background-color: #EEEEEE;
                    }

                    .duration {
                        color: #333;
                        font-size: 30rpx;
                    }
                }

                &.right {
                    border-radius: 20rpx 0 20rpx 20rpx;
                    background: $main-color;
                    flex-direction: row-reverse;

                    &.onPlay {
                        background-color: darken($main-color, 10);
                    }

                    .duration {
                        color: white;
                        font-size: 30rpx;
                    }
                }
            }
        }
    }
</style>