重构语音播放动画和展示效果；解决复制语音转文字内容错误问题；增加语音转文字loading

src/components/talk/message/AudioMessage.vue

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
 import { PlayOne, PauseOne } from '@icon-park/vue-next'
 import { ITalkRecordExtraAudio, ITalkRecord } from '@/types/chat'
 import { onHide } from '@dcloudio/uni-app'
+import aTrumpet from '@/uni_modules/a-trumpet/components/a-trumpet/a-trumpet.vue'
+import { useUserStore } from '@/store'
 
 const props = defineProps<{
   extra: ITalkRecordExtraAudio
@@ -10,6 +12,11 @@ const props = defineProps<{
   maxWidth?: Boolean
 }>()
 
+const userStore = useUserStore()
+const talkParams = reactive({
+  uid: computed(() => userStore.uid),
+})
+
 const audioContext = ref<any>(null)
 const durationDesc = ref('-')
 const state = reactive({
@@ -101,27 +108,48 @@ const formatTime = (value: number = 0) => {
 }
 </script>
 <template>
-  <div class="im-message-audio">
-    <div class="play">
-      <div class="btn pointer" @click.stop="onPlay">
-        <n-icon
-          :size="18"
-          :component="state.isAudioPlay ? PauseOne : PlayOne"
-        />
-      </div>
+  <div
+    class="audio-message"
+    @click.stop="onPlay"
+    :class="
+      props?.data?.user_id == talkParams.uid
+        ? 'justify-end py-[22rpx] pl-[30rpx] pr-[16rpx]'
+        : 'justify-start py-[22rpx] pr-[30rpx] pl-[16rpx]'
+    "
+  >
+    <a-trumpet
+      v-if="props?.data?.user_id != talkParams.uid"
+      :isPlay="state.isAudioPlay"
+      color="#C1C1C1"
+      :size="30"
+    ></a-trumpet>
+    <div
+      :class="
+        props?.data?.user_id == talkParams.uid ? 'mr-[8rpx]' : 'ml-[8rpx]'
+      "
+    >
+      {{ props?.extra?.duration }}s
     </div>
-    <div class="desc">
-      <span class="line" v-for="i in 23" :key="i"></span>
-      <span
-        class="indicator"
-        :style="{ left: state.progress + '%' }"
-        v-show="state.progress > 0"
-      ></span>
-    </div>
-    <div class="time">{{ durationDesc }}</div>
+    <a-trumpet
+      v-if="props?.data?.user_id == talkParams.uid"
+      :isPlay="state.isAudioPlay"
+      color="#C1C1C1"
+      :size="30"
+      direction="left"
+    ></a-trumpet>
   </div>
 </template>
 <style lang="less" scoped>
+.audio-message {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+}
+
 .im-message-audio {
   --audio-bg-color: #f5f5f5;
   --audio-btn-bg-color: #ffffff;

src/pages/dialog/index.vue

@@ -229,10 +229,19 @@
               >
                 <div
                   class="talk-tools voice-content"
-                  v-if="item.voiceContent"
+                  v-if="
+                    item?.voiceContent ||
+                    (!item?.voiceContent && item?.isVoiceToTexting)
+                  "
                   @click="copyVoiceContent(item?.voiceContent || '')"
                 >
-                  <span>{{ item.voiceContent }}</span>
+                  <wd-loading
+                    v-if="item?.isVoiceToTexting && !item?.voiceContent"
+                    color="#46299D"
+                    :size="20"
+                    style="margin: 0 12rpx 0 0;"
+                  />
+                  <span v-if="item?.voiceContent">{{ item.voiceContent }}</span>
                 </div>
               </div>
 
@@ -2773,17 +2782,21 @@ const sendMediaMessage = (mediaUrl, duration, size) => {
 
 //语音转文字
 const convertText = (msgItem) => {
+  msgItem.isVoiceToTexting = true
   const resp = ServeConvertText({
     voiceUrl: msgItem.extra.url,
     msgId: msgItem.msg_id,
   })
   // console.log(resp, 'resp')
   resp.then(({ code, data }) => {
+    msgItem.isVoiceToTexting = false
     // console.log(code, data, 'data')
     if (code === 200) {
       console.log(data.convText, 'convText')
       msgItem.voiceContent = data.convText
     }
+  }).catch(() => {
+    msgItem.isVoiceToTexting = false
   })
 }
 //语音输入框高度
@@ -2826,9 +2839,16 @@ const copyVoiceContent = (voiceContent) => {
   if (!voiceContent) {
     return
   }
-  clipboard(voiceContent, () => {
-    message.success('复制成功')
+  uni.setClipboardData({
+    data: voiceContent,
+    showToast: false,
+    success: () => {
+      message.success('复制成功')
+    },
   })
+  // clipboard(voiceContent, () => {
+  //   message.success('复制成功')
+  // })
 }
 </script>
 <style scoped lang="less">

src/uni_modules/a-trumpet/changelog.md

@@ -0,0 +1,2 @@
+## 1.0.0（2023-09-05）
+实现基础功能

src/uni_modules/a-trumpet/components/a-trumpet/a-trumpet.vue

@@ -0,0 +1,130 @@
+<template>
+	<view :style="[boxStyel]" class="box">
+		<view class="audio-style" :style="[audioStyel]" :class="{ 'animation': isPlay }">
+			<view class="small" :style="{'background-color': color}"></view>
+			<view class="middle" :style="{'border-right-color': color}"></view>
+			<view class="large" :style="{'border-right-color': color}"></view>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+	emits: [],
+	props: {
+		isPlay: {
+			type: [Boolean],
+			default: false
+		},
+		direction: {
+			type: String,
+			default: 'right'
+		},
+		size: {
+			type: Number,
+			default: 24
+		},
+		color: {
+			type: String,
+			default: '#222'
+		}
+	},
+	data() {
+		return {
+		};
+	},
+	computed: {
+		audioStyel() {
+			return {
+				transform: `scale(${this.size / 24})`
+			};
+		},
+		boxStyel() {
+			const directDic = { right: '0deg', bottom: '90deg', left: '180deg', top: '270deg' };
+			const dir = directDic[this.direction || 'left'];
+			const style = {
+				transform: `rotate(${dir})`,
+				width: this.size + 'px',
+				height: this.size + 'px'
+			};
+			return style;
+		}
+	},
+	methods: {}
+};
+</script>
+<style lang="scss" scoped>
+view{
+	box-sizing: border-box;
+}
+.box {
+	// border: 1px solid #4c4c4c;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+}
+.audio-style {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	& > view {
+		border: 2px solid transparent;
+		border-radius: 50%;
+	}
+}
+.small {
+	border: 0px solid;
+	width: 3px;
+	height: 3px;
+}
+
+.middle {
+	width: 16px;
+	height: 16px;
+	margin-left: -11px;
+	opacity: 1;
+}
+
+.large {
+	width: 24px;
+	height: 24px;
+	margin-left: -19px;
+	opacity: 1;
+}
+.animation {
+	.middle {
+		animation: middle 1.2s ease-in-out infinite;
+	}
+	.large {
+		animation: large 1.2s ease-in-out infinite;
+	}
+}
+// 语音播放动画
+@keyframes middle {
+	0% {
+		opacity: 0;
+	}
+	10% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+
+@keyframes large {
+	0% {
+		opacity: 0;
+	}
+	50% {
+		opacity: 1;
+	}
+	60% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+</style>

src/uni_modules/a-trumpet/package.json

@@ -0,0 +1,83 @@
+{
+  "id": "a-trumpet",
+  "displayName": "纯css语音播放，语音聊天，播放小喇叭动画组件",
+  "version": "1.0.0",
+  "description": "纯css语音播放，语音聊天，播放小喇叭动画组件",
+  "keywords": [
+    "a-trumpet",
+    "语音播报",
+    "播放小喇叭",
+    "动画"
+],
+  "repository": "",
+"engines": {
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y",
+          "钉钉": "y",
+          "快手": "y",
+          "飞书": "y",
+          "京东": "y"
+        },
+        "快应用": {
+          "华为": "y",
+          "联盟": "y"
+        }
+      }
+    }
+  }
+}

src/uni_modules/a-trumpet/readme.md

@@ -0,0 +1,18 @@
+# a-trumpet
+
+## 用法
+```html
+<a-trumpet :isPlay="isplay"></a-trumpet>
+<a-trumpet :isPlay="isplay" color="#1100ff"></a-trumpet>
+<a-trumpet :isPlay="isplay" :size="50"></a-trumpet>
+<a-trumpet :isPlay="isplay" direction="right"></a-trumpet>
+```
+
+## 属性说明：
+
+|  属性名  |  类型  |  默认值  |  说明  |
+| ---- | ---- | ---- | ---- |
+|  isplay  |  Boolean  |  false  |  是否播放动画  |
+|  size  |  Number |  24 |  宽高的尺寸 |
+|  color  |  String |  #222 | 颜色  |
+|  direction  |  String |  top、bottom、left、ringt| 方向，上下左右  |