From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/mp/components/wx-voice-play/main.vue | 105 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 105 insertions(+), 0 deletions(-)
diff --git a/src/views/mp/components/wx-voice-play/main.vue b/src/views/mp/components/wx-voice-play/main.vue
new file mode 100644
index 0000000..fe7f0ca
--- /dev/null
+++ b/src/views/mp/components/wx-voice-play/main.vue
@@ -0,0 +1,105 @@
+<!--
+ - Copyright (C) 2018-2019
+ - All rights reserved, Designed By www.joolun.com
+ 銆愬井淇℃秷鎭� - 璇煶銆�
+ 鑺嬮亾婧愮爜锛�
+ 鈶� bug 淇锛�
+ 1锛塲oolun 鐨勫仛娉曪細浣跨敤 mediaId 浠庡井淇″叕浼楀彿锛屼笅杞藉搴旂殑 mp4 绱犳潗锛屼粠鑰屾挱鏀惧唴瀹癸紱
+ 瀛樺湪鐨勯棶棰橈細mediaId 鏈夋晥鏈熸槸 3 澶╋紝瓒呰繃鏃堕棿鍚庢棤娉曟挱鏀�
+ 2锛夐噸鏋勫悗鐨勫仛娉曪細鍚庣鎺ユ敹鍒板井淇″叕浼楀彿鐨勮棰戞秷鎭悗锛屽皢瑙嗛娑堟伅鐨� media_id 鐨勬枃浠跺唴瀹逛繚瀛樺埌鏂囦欢鏈嶅姟鍣ㄤ腑锛岃繖鏍峰墠绔彲浠ョ洿鎺ヤ娇鐢� URL 鎾斁銆�
+ 鈶� 浠ｇ爜浼樺寲锛氬皢 props 涓殑 reply 璋冩垚涓� data 涓搴旂殑灞炴�э紝骞惰ˉ鍏呯浉鍏虫敞閲�
+-->
+<template>
+ <div class="wx-voice-div" @click="playVoice">
+ <el-icon>
+ <Icon v-if="playing !== true" icon="ep:video-play" :size="32" />
+ <Icon v-else icon="ep:video-pause" :size="32" />
+ <span class="amr-duration" v-if="duration">{{ duration }} 绉�</span>
+ </el-icon>
+ <div v-if="content">
+ <el-tag type="success" size="small">璇煶璇嗗埆</el-tag>
+ {{ content }}
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+// 鍥犱负寰俊璇煶鏄� amr 鏍煎紡锛屾墍浠ラ渶瑕佺敤鍒� amr 瑙ｇ爜鍣細https://www.npmjs.com/package/benz-amr-recorder
+import BenzAMRRecorder from 'benz-amr-recorder'
+
+defineOptions({ name: 'WxVoicePlayer' })
+
+const props = defineProps({
+ url: {
+ type: String, // 璇煶鍦板潃锛屼緥濡傝锛歨ttps://www.iocoder.cn/xxx.amr
+ required: true
+ },
+ content: {
+ type: String, // 璇煶鏂囨湰
+ required: false
+ }
+})
+
+const amr = ref()
+const playing = ref(false)
+const duration = ref()
+
+/** 澶勭悊鐐瑰嚮锛屾挱鏀炬垨鏆傚仠 */
+const playVoice = () => {
+ // 鎯呭喌涓�锛氭湭鍒濆鍖栵紝鍒欏垱寤� BenzAMRRecorder
+ if (amr.value === undefined) {
+ amrInit()
+ return
+ }
+ // 鎯呭喌浜岋細宸茬粡鍒濆鍖栵紝鍒欐牴鎹儏鍐垫挱鏀炬垨鏆傛椂
+ if (amr.value.isPlaying()) {
+ amrStop()
+ } else {
+ amrPlay()
+ }
+}
+
+/** 闊抽鍒濆鍖� */
+const amrInit = () => {
+ amr.value = new BenzAMRRecorder()
+ // 璁剧疆鎾斁
+ amr.value.initWithUrl(props.url).then(function () {
+ amrPlay()
+ duration.value = amr.value.getDuration()
+ })
+ // 鐩戝惉鏆傚仠
+ amr.value.onEnded(function () {
+ playing.value = false
+ })
+}
+
+/** 闊抽鎾斁 */
+const amrPlay = () => {
+ playing.value = true
+ amr.value.play()
+}
+
+/** 闊抽鏆傚仠 */
+const amrStop = () => {
+ playing.value = false
+ amr.value.stop()
+}
+// TODO 鑺嬭壙锛氫笅闈㈡牱寮忔湁鐐归棶棰�
+</script>
+<style lang="scss" scoped>
+.wx-voice-div {
+ display: flex;
+ width: 120px;
+ height: 50px;
+ padding: 5px;
+ background-color: #eaeaea;
+ border-radius: 10px;
+ justify-content: center;
+ align-items: center;
+}
+
+.amr-duration {
+ margin-left: 5px;
+ font-size: 11px;
+}
+</style>
--
Gitblit v1.8.0