From 20aaf18f0453f12fad4ec20f486d55b878818d6d Mon Sep 17 00:00:00 2001
From: X5ZJ <x5zj@qq.com>
Date: Mon, 15 Jul 2024 22:33:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A7=E5=88=B6=E5=8F=B0=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E9=9F=B3=E4=B9=90=E6=92=AD=E6=94=BE=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/home/widgets/components/audio.vue   |  41 +++
 .../home/widgets/components/audioPlayer.vue   | 291 ++++++++++++++++++
 .../home/widgets/components/img/Pause.png     | Bin 0 -> 1165 bytes
 .../home/widgets/components/img/Pause1.png    | Bin 0 -> 1095 bytes
 .../widgets/components/img/audio_high.png     | Bin 0 -> 957 bytes
 .../widgets/components/img/audio_high1.png    | Bin 0 -> 1024 bytes
 .../home/widgets/components/img/mute.png      | Bin 0 -> 941 bytes
 .../home/widgets/components/img/mute1.png     | Bin 0 -> 960 bytes
 .../home/widgets/components/img/play.png      | Bin 0 -> 1449 bytes
 .../home/widgets/components/img/play1.png     | Bin 0 -> 1560 bytes
 10 files changed, 332 insertions(+)
 create mode 100644 Web/src/views/home/widgets/components/audio.vue
 create mode 100644 Web/src/views/home/widgets/components/audioPlayer.vue
 create mode 100644 Web/src/views/home/widgets/components/img/Pause.png
 create mode 100644 Web/src/views/home/widgets/components/img/Pause1.png
 create mode 100644 Web/src/views/home/widgets/components/img/audio_high.png
 create mode 100644 Web/src/views/home/widgets/components/img/audio_high1.png
 create mode 100644 Web/src/views/home/widgets/components/img/mute.png
 create mode 100644 Web/src/views/home/widgets/components/img/mute1.png
 create mode 100644 Web/src/views/home/widgets/components/img/play.png
 create mode 100644 Web/src/views/home/widgets/components/img/play1.png

diff --git a/Web/src/views/home/widgets/components/audio.vue b/Web/src/views/home/widgets/components/audio.vue
new file mode 100644
index 000000000..d4e8149f9
--- /dev/null
+++ b/Web/src/views/home/widgets/components/audio.vue
@@ -0,0 +1,41 @@
+<template>
+	<el-card shadow="hover" header="音乐播放器">
+		<template #header>
+			<el-icon style="display: inline; vertical-align: middle"> <ele-Promotion /> </el-icon>
+			<span style=""> 音乐播放器 </span>
+		</template>	
+		<div class="layout-audioPlayer">
+			  <div class="page" @click="handleChangeAudioVolume">
+				<audio-player
+				  ref="audio"
+				  class="audio-box"
+				  fileurl="http://music.163.com/song/media/outer/url?id=447925558.mp3"
+				></audio-player>
+			  </div>
+		</div>
+	</el-card>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import AudioPlayer from "./audioPlayer.vue";
+let audio = ref(null);
+
+function handleChangeAudioVolume() {
+  // 点击页面关闭音量键显示
+  if (audio.value) {
+    audio.value.audioHuds = false;
+  }
+}
+
+const handleFileChange = (event) => {
+  const file = event.target.files[0];
+  console.log(file,"文件路径");
+  if(file)
+  {
+	//audio.value.fileurl=file;
+	alert(file.name);
+	//fileurl = URL.createObjectURL(file);
+  }
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/views/home/widgets/components/audioPlayer.vue b/Web/src/views/home/widgets/components/audioPlayer.vue
new file mode 100644
index 000000000..6eb05d949
--- /dev/null
+++ b/Web/src/views/home/widgets/components/audioPlayer.vue
@@ -0,0 +1,291 @@
+<template>
+  <div>
+    <audio
+      @timeupdate="updateProgress"
+      controls
+      ref="audioRef"
+      style="display: none"
+    >
+      <source :src="fileurl" type="audio/mpeg" />
+      您的浏览器不支持音频播放
+    </audio>
+	
+    <div class="audio-right">
+	  
+      <img
+        v-if="audioStatus == 'pause'"
+        @click="playAudio"
+        class="dialogAudioPlay"
+        src="./img/play.png"
+        alt="点击播放"
+      />
+      <img
+        v-if="audioStatus != 'pause'"
+        @click="playAudio"
+        class="dialogAudioPlay"
+        src="./img/pause.png"
+        alt="点击暂停"
+      />
+      
+	  <div class="progress-bar-bg" id="progressBarBg" v-dragto="setAudioIcon">
+        <div class="progress-bar" id="progressBar"></div>
+      </div>
+	  
+      <div class="audio-time" style="min-height: 10px">
+        <span class="audio-length-current" id="audioCurTime">{{
+          audioStart
+        }}</span
+        >/
+        <span class="audio-length-total">{{ duration }}</span>
+      </div>
+      
+	  <div class="volume">
+        <div
+          @click.stop="
+            () => {
+              return false;
+            }
+          "
+          class="volume-progress"
+          v-show="audioHuds"
+        >
+          <div
+            class="volume-bar-bg"
+            id="volumeBarBg"
+            v-adjuster="handleShowMuteIcon"
+          >
+            <div class="volume-bar" id="volumeBar"></div>
+          </div>
+        </div>
+        <!-- <i class="iconfont pl-1" :class="audioIcon" @click.stop="audioHuds = !audioHuds"> </i> -->
+        <img
+          class="audio_high"
+          @click.stop="audioHuds = !audioHuds"
+          src="./img/audio_high.png"
+          alt="音量"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, reactive, computed, onUpdated } from "vue";
+const props = defineProps({
+  fileurl: "",
+});
+const audioStatus = ref("play");
+const audioStart = ref("0:00");
+const currentTime = ref("0:00");
+const duration = ref("0:00");
+const audioVolume = ref(0.5);
+const audioHuds = ref(false);
+const audioRef = ref();
+const VDragto = reactive({
+  mounted: function (el, binding, vnode) {
+    el.addEventListener(
+      "click",
+      (e) => {
+        let wdiv = document.getElementById("progressBarBg").clientWidth;
+        let audio = vnode.ctx.refs.audioRef;
+        // return;
+        // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
+        let ratemin = e.offsetX / wdiv;
+        let rate = ratemin * 100;
+        document.getElementById("progressBar").style.width = rate + "%";
+        audio.currentTime = audio.duration * ratemin;
+        audio.play();
+        binding.value();
+      },
+      false
+    );
+  },
+});
+const VAdjuster = reactive({
+  mounted: function (el, binding, vnode) {
+    el.addEventListener(
+      "click",
+      (e) => {
+        let hdiv = document.getElementById("volumeBarBg").clientHeight;
+        let audio = vnode.ctx.refs.audioRef;
+        // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
+        let ratemin = e.offsetY / hdiv;
+        let rate = ratemin * 100;
+        document.getElementById("volumeBar").style.height = rate + "%";
+        audio.volume = ratemin;
+        binding.value(rate / 100);
+      },
+      false
+    );
+  },
+});
+onMounted(() => {
+  fetch();
+});
+
+function fetch() {
+  // let that = this;
+  var myVid = audioRef.value;
+  myVid.loop = true;//循环
+  // 监听音频播放完毕
+  myVid.addEventListener(
+    "ended",
+    function () {
+      audioStatus.value = "play"; // 显示播放icon
+      document.getElementById("progressBar").style.width = "0%"; // 进度条初始化
+    },
+    false
+  );
+  if (myVid != null) {
+    myVid.oncanplay = function () {
+      duration.value = transTime(myVid.duration); // 计算音频时长
+    };
+    myVid.volume = 0.5; // 设置音量50%
+  }
+}
+// 播放暂停控制
+function playAudio() {
+  let recordAudio = audioRef.value; // 获取audio元素
+  if (recordAudio.paused) {
+    recordAudio.play();
+    audioStatus.value = "pause";
+  } else {
+    recordAudio.pause();
+    audioStatus.value = "play";
+  }
+}
+// 更新进度条与当前播放时间
+function updateProgress(e) {
+  var value = e.target.currentTime / e.target.duration;
+  if (document.getElementById("progressBar")) {
+    document.getElementById("progressBar").style.width = value * 100 + "%";
+    if (e.target.currentTime === e.target.duration) {
+      audioStatus.value = "pause";
+    }
+  } else {
+    audioStatus.value = "pause";
+  }
+
+  audioStart.value = transTime(audioRef.value.currentTime);
+}
+/**
+ * 音频播放时间换算
+ * @param {number} value - 音频当前播放时间，单位秒
+ */
+function transTime(time) {
+  var duration = parseInt(time);
+  var minute = parseInt(duration / 60);
+  var sec = (duration % 60) + "";
+  var isM0 = ":";
+  if (minute === 0) {
+    minute = "00";
+  } else if (minute < 10) {
+    minute = "0" + minute;//分保留2位
+  }
+  if (sec.length === 1) {
+    sec = "0" + sec;//秒保留2位
+  }
+  return minute + isM0 + sec;//00:00
+}
+function setAudioIcon() {
+  audioStatus.value = "pause";
+}
+function handleShowMuteIcon(val) {
+  audioVolume.value = val;
+}
+computed(() => {
+  function audioIcon() {
+    if (audioHuds.value) {
+      return audioVolume.value < 0.01
+        ? "checked icon-jingyin"
+        : "checked icon-shengyin";
+    } else {
+      return "icon-shengyin";
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.volume {
+  position: relative;
+  .volume-progress {
+    position: absolute;
+    top: -42%;
+	left: 42px;
+    width: 24px;
+    height: 90px;
+    background: rgb(0,0,0,0.3);//声音背景色
+    border-radius: 5px;
+    padding-top: 5px;
+  }
+  .volume-bar-bg {
+    margin: 0 auto;
+    width: 6px;
+    height: 80px;//声音进度条高度
+    background: #dcdcdc;
+    flex: 1;
+    position: relative;
+	border-radius: 5px;
+    transform: rotate(180deg);//自下而上
+    cursor: pointer;
+    .volume-bar {
+      width: 6px;
+      height: 50%;
+      background: #ff6600;//声音进度条颜色
+      border-radius: 5px;
+    }
+  }
+  .checked {
+    color: #56bf8b;
+  }
+}
+.audio-right {
+  width: 100%;
+  height: 49px;
+  line-height: 49px;
+  background: #f8f8f8;
+  border-radius: 10px;
+  display: flex;
+  padding: 0 15px;
+  .dialogAudioPlay {
+    width: 48px;
+    height: 48px;
+    cursor: pointer;
+  }
+  .progress-bar-bg {//进度条背景
+    background-color: #d1edc4;
+	border-radius: 5px;//与进度条同样弧度
+    flex: 1;
+    position: relative;
+    height: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-top: -1px;
+    cursor: pointer;
+    margin: 0 10px;
+  }
+  .progress-bar {
+    background-color: #529b2e;//进度条颜色
+    width: 0%;
+    height: 10px;
+    border-radius: 5px;
+  }
+
+  .audio-time {//时间
+    overflow: hidden;
+    font-size: 14px;
+    .audio-length-total {//总时长
+      float: right;
+    }
+    .audio-length-current {//播放时间
+      float: left;
+    }
+  }
+}
+.audio_high {
+  width: 50px;
+  height: 50px;
+}
+</style>
+
diff --git a/Web/src/views/home/widgets/components/img/Pause.png b/Web/src/views/home/widgets/components/img/Pause.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e35a404ce3fead3cdce7bfc8fe4ed02990fc6fa
GIT binary patch
literal 1165
zcmV;81akX{P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px(M@d9MRA@uhT3v`6RTTctWOL)z2c<qqlZgu5%&fH{R@A=OLTfAfVp0374~n)R
zRlybn>w|xwMbs+#VCkFIMM3=cp{oyySSxDHOt$!wNs3PveXwh8HuuP6lj+Q4l1X;6
zx_4k%xaZt+&Ueq>{Ru(yk2JR*V*}t`o-3h+9UxfDY!YB%@z4J}20SA2|CcjNA5MAy
z{4$QkTNVKKvfNH$wVj!^1Gs8LgHAB;87cb0sy99!ac;oABmho+Vhb6@9sqYNRdH<I
z3@dfmt}o1vDsLnJ<$~B?7<dSbyGK<t6hGkzT6n>#%O8f~2Zql9r#NvVv2hf@`Xu25
ze5Z(K(c<?A##ut<k2RP->+_z&<XT4S5{6n!WNc$#8xgMWW909Ov2VI2-x>zQP#!p4
z$lcr`{v<)*0)XcY!qKU!bcRvb<#E>KrYOVr0C*U{M0_q0?JZRshtp)H0&q-mkbuV%
z1RW#h=SsEaH)%=+(JO`QbxiaKfV<*+3_M|b^5CHP0|8WuxjoGMa<5>%&-R+HFURos
zT*nmq33xg_o?+UtzSj7(pRT?D$_268AiSAi{3hFLemhR%yRyo8al2vQogST}Hrv&O
zulnR(@35N}8)3k&&6kF$mM2p~ZXCc|Q*cbqX~ozzU6ZGJawSQjTNH1^OQllSHC>nQ
zj>Et-8IGB~mOv*We1s!bRr*OE8;%Whn$+>|Farl{Pd<~Tc${>{%-&0&*CKW(wKd-C
zdP2fA#oMtCd(86W?lj}t)r$EhpO1+?k5`X0dSWD)!tVv)>NI0{^3E`C1b~~*?S#P}
zg%}oydGj!(vSNx;3|#5YCE%x$CpUx@rO}fBbV}@(kv?J2E!J=6_f8Q2jwzlZ;6O;&
zvz90Kr>(wEk0)L{;nV2-bhxJQL-)}xorn*Ws!hN7wZEtbOyM`BO<f|lsAQjM%>ADL
z=8D2rjB?0^A1zOA>;W)mUT}qi`Z+M3@wHu(Hw<I^N_xPTT`|Q;2CfNg$&h9J+NeZ4
z;1qLviTR~~iSeXWlaH+i08TM`h?w@Bw}l?GyvB<W0B$k&3YhN?JdjYb27yV7@ih7%
z**&G5=vAxQcp&NlQ@l^Wt$`qgt4G<Frx}<=AGkP+JA?0o#RWdFJ$YNy1E%l~5y7#L
zR3=}l&!1ThAymmvu4AKBPfFyV3c05E6Tn4XrVEu^Q>bHpH2|pPG5NP4&V_9G%kt#K
zaSvz@K<^N8v`=E~%c$;+O#7`wXFsFwX3hto|8{yA2O77KJr1HR?PkL~Yt@=t!%Z-a
zp42c$KG1Z+Xvs%PqjTA-fSIHt<sf<z0C&_QWjl-(Z=Ur%)VIB$^R-GFfbJJtJ_xO^
z7P|?h_2q6Cgx1&VT@YG7a0H&v`H86uLhDDqaHrJvnKj<-wSDML+_&iXQ-fizTvn3r
fKY8<7NdW%>dOH$cXb;>^00000NkvXXu0mjfC>1rU

literal 0
HcmV?d00001

diff --git a/Web/src/views/home/widgets/components/img/Pause1.png b/Web/src/views/home/widgets/components/img/Pause1.png
new file mode 100644
index 0000000000000000000000000000000000000000..e9e08d84611caa9021643b776ad624d05f571a5a
GIT binary patch
literal 1095
zcmV-N1i1T&P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px(0ZBwbRA@uhT1|)?MHK$tv=<kaNIZ$+K`@E*s~N<IZZ0N}7)37zf6nHhXaW)=
zn1G-jG!aY)(I|Q_<fbtwi2oj3J-CQ}%+zZ|MGvBQG8h)t%g#KfLibYB+cVX(JF8m-
zeVBf)-g{rytM^kigvbX)Za*dlpxJD0?)7@R0c-(qwfDGh^jq-|(f0t}x7PkTiI2A`
z0BM@u24EKv?E+xNH0WyppQ!5RS(be`=G-Or6#-!8?L@RsRqtM@Vt*bHom16QA~HL!
zys-c@n@#TZdXECQe_Ta1`A-8lAtIfc{Pp*MF=j?p&j7f#N;naH2VhoJ-vMwwNs_;&
zrl!t2-i3vQjoohdasV3v>{QjAM0C>-BmV?&Kt$fC1ESUnF!QYdKB^G7sH(?^=!}T`
zP)A|G(`vOgEiNwZC8C1>E-BAd)%{tPoeIee0$}E+06bYC=&Y(fpJmxsAtj^eX`0?h
zM2`Wuw}S6!5pnv5j*$S;G~Gu;FP3K$(Sz37S65?rd9E?$kg6W3khxn#J|3oPC;(=@
zuOHK2uP}bAwf37y8ehm_=DPsARiSg6wRWy@?^V5I<|Y6ao3HTcA`*1DNdRMJEy?-0
z(P-@HbULyO+z<e-RfNhtBJ%bm3=GLI#@wK)F46hpw215t0&qzRz^6VV5goSH9t|m;
zB;6SEfU3SylDVUt?3THNG3L!uhCSO4k#0YX9C@_5C1?7q96dtxA)erJ!BTW`8QWTW
z&%np^f4JJFpI|=l-nlrxtxl*k#)zt>ZY~jJ)>`&uhv-!R@(}xlpC?rHcE5HSSOI2!
z7Qo>`n5sUPW!a(7*LU>t#w&055Pg`AG)<2Z(c_*?$FnSR$?xJQ18_-cYe7tsWOKXS
z{^|b&z|7b6-N=>T#jqmcqU0a|W6U+G`iqD3%l=Z`T*vseTmdKB81t>FUSHVKXf(ET
zI-MT}R=^muUsYf541PvLo>(UUj;rbc&z46-<m3PVW_}64LmtzzkTnWS$j3wUfb4Q;
ze_2ExE(3TMz#X2T);M)}$iNUi0KoZt+v9mpMD8pDa81NgTbLxtRqb~BkM-a}tyb&G
zZnyh;)ka>5Ld^U(fDHxH^z`)9+}zwh>jA*b%*>_p^YaUyEf+-OvhoT<4<LFMihdKv
z9Y&*1WYL!rc|8+vF_!~~yPRH4L&MCj4Rtk(8?z#^!%u=CdR4+4yP?TT*A=&vM0D}6
zS5?ndwUndiRRH?Ez<4cX?nZGp^*M-mk5zI2aUX2uAmTk*EH+fshr0!csE^k@5b<7c
z6d<C$Vk$sHeaTlU3*x+HEvNfvFS@JhmMH&fQ1{4XE&2YFJFm3_@Go4Z4qox+2Sfk>
N002ovPDHLkV1iD=2`K;o

literal 0
HcmV?d00001

diff --git a/Web/src/views/home/widgets/components/img/audio_high.png b/Web/src/views/home/widgets/components/img/audio_high.png
new file mode 100644
index 0000000000000000000000000000000000000000..8017ca931b348ecdeb3948fe340cd75e8a1b6b96
GIT binary patch
literal 957
zcmV;u148_XP)<h;3K|Lk000e1NJLTq002Dz001xu1^@s6qWp3<00001b5ch_0Itp)
z=>Px&cS%G+RA@u(nMr6AQ4ogzdNCIdN)!>j2to+St41WafZ_rwxST{h#CQ+{LCj4Q
zL{U*t@ESq!pol>vcv2&xxZp*-IbE-ZxZpwDKvd962<c~@OiLRxnRb#Mo9XG(F#VSL
zURAwXnvlbXa>$GZbY8UH&~!u7b$kL1^RAV0nRzRK9&7CjBDyLf4{Noz+o$H5)>@w?
zqJwcrBHHfzet)gNYYNTG=K$;hFr<{~4#V&>fCm8jMPz$9==S#Zc}l4kV@xm=2U8R1
z&d$#1LqkIs0XVR)MAYs3{s1$tDM3FJk+tQ3nE5P#y+qXG`+o0a!BdBBYipa|+}!Md
zHvo7CpgZ#6e}Fy);AjbUi-_Es40x*0TI&uXx&&YefR|wyb_YT5ED|^=v>VUNS4P*^
z0pKkWZT5ZNuNFKtXsz`MB61pT1@Jr!!yQ2on7E+jpiBR+85tSrD;A3{-5jm;ETz<d
zwRV}cw$~WblPPFs-VDG2&jIj6Db-ad6yA&#asuecobQRq`e>f#c^j>@0|0(lYZn`1
zUR48Lm8O~53AK8H4Oaq~Mnv~VV{w;=d>U_TIp~sGIJgA>&WOl?m`nUJb0RwF`~Hzy
zLfZtJ-5ees?iw5%{64|0T=w?XTJI*J3vRAbYE_|7c<g?6baX6JN<9JaMno1SkmIi*
z)oMC|K0eN-?v`~SXdQr&iG-?jkumeNQkc6gBHLoxz6)SowMosSphe`5`IR7&`gF{P
zJ!|bF04>(q*2ssMdA~FJN=Z$*1J5+H6Wa5<K6fv~waUzM0ep1t#~yqVbI&}q*7`6J
zod9r3L=MGF{2PFo*4o*|m@i3SqcNF>X67vbZj8p~+s2qpG3eI-7RJp!DR}0gU9r*B
z)b!q&vxv-#K|cksGz`P#K@hm#iJ#0v$NcxZh|I_fv@2BZxQ2r<rY#rd9Scu?l%LF8
z*B9Ak06VR<`;0NJu67ky{e~>h^L{5M02YZzp#+`T<fJ~+P?uwm6DM2|;hwrHIBHp1
zj?KjWPia{x3z(`Vg0=RNF=kh+0QrASgi6rv{S>u}&KHZt52f|8-7bm_C3lU%2t0Q!
z;0Qc-&HlLm=jyXg96Wa)@M0BGzCP6^33q9asj7*PwoqxW-+)g0gtM}KL(^H&MA~vR
fG@bSdXJ!4LcFoF9p3H@+00000NkvXXu0mjf86Ux!

literal 0
HcmV?d00001

diff --git a/Web/src/views/home/widgets/components/img/audio_high1.png b/Web/src/views/home/widgets/components/img/audio_high1.png
new file mode 100644
index 0000000000000000000000000000000000000000..0788014e376b28299692edac1f49942ecbcc0a6f
GIT binary patch
literal 1024
zcmV+b1poVqP)<h;3K|Lk000e1NJLTq002Dz001xu1^@s6qWp3<00001b5ch_0Itp)
z=>Px&x=BPqRA@u(nO%rXVHn5%&)L~CSt2CS?ipWe&e$XuK8jeymX9lGFV?zHO3B`d
z5+RCmyNX<pNRlh8M6BE_xk1d?U934XzDg(`nfJ`R4`=L*F?P%}yJwu{%(<H8ydTf+
z`FP*wc@DvY4|$LoRcNnRy=v*Ir7KtiRrfBJal-+1JxT5$Qu?G!o)5(m-R0Wb-ly!A
zHZ=7JfL%F|t-2{LmJ7VB(1zwe4)9h0aRBWs<$F?;+W;==rfAIv{W4HD#p1;HMpHZ;
z3B{BJ`oUDxjq$0c0JJjjQ6Xv%M&e!JdS7!2nz>t#S}XDa84b0^K(vjCIzo|n=WxLt
zhc+7Orh*bSa0`G}EM<E-hKq#`YwCUi_Svus(Yo1@_|@TnI||*esdJLRX#fiV^d}{^
zH^r>`X@QG{w#OTqdiLiU8v#UFVr?iU9+wL47__1JmH>)v;YK1nR2Ul@P4OgK(0tJL
z|4@`>Rnobcv3S2d=Se*#_-fQHW-KD+&S2E)a20f4z`vG(Q_MVx89k&ZZF=PUK(3H^
zp$FZWz&C@YwJJTYH{f5*%v}J!Bqhynip8Im0$!4(Q!&Q8Jnx1?O9A)*zGc;@ZF2{{
zz8h+6KIp-)u;Bs#j_Rh^nVz3<bH*V(D)yEQ+R#)kv>5?c_?u|c-{W(>vHyzc-azdZ
zW;&TlCRi>DMiX~`xq0oP8ijfQ4CtnqQAm!V-j`(QG&BPTau-dVvdrC&qSne*Ao(w$
z3LRvIre3hGIRKY*Q*6i_fLiSh0<E;)m6Fs93tBhDAM*=A6dTjOPj_`L6x<<TyiZc&
ztic!#2mCvT`Dme}CZEDx4V}8G8q{+jv}IfM#q`mWMbdg}zt2^CG4Aeu=zzKhjDrju
z4w+(i<|NnDPYjGpN-?o1h7ZNSrpLG*x=-`3li<r>T+^dsP1Y&?9Keihw=Wjl_0V>)
z@tqT|8F(8q#gr`QdjJ+DB`<D@S@!RuAJ;=?#qVd`6k|OB9d7Wq5b<>|`t+y>dcwUk
z*HcdU*;~m6nW3p?0Bj<n?ZHU=m~H8bzOusgzmpS4%+q7ykqzzI<fLNLP&>!|>z*KL
zP8A82R&bQFw9L)K{#$8TC<_?5CIU_eO|dzXdj8KQLLul>p)dmNqEX~KF)i}#&96Gz
z<?W)hQaslf%w$epYXPUhJ=g5dj(<;m*7+0MV;}G`y)UnQsx9Wab9zikO$4Wfa(ewL
uw9^`P%lcJIyTuYt%Tcwo(;9Zm`ab}CPe5KjJx4JB0000<MNUMnLSTYq%<4G+

literal 0
HcmV?d00001

diff --git a/Web/src/views/home/widgets/components/img/mute.png b/Web/src/views/home/widgets/components/img/mute.png
new file mode 100644
index 0000000000000000000000000000000000000000..816d70a3a3039262f3b4f8d5ddb0fdfbbc5dc7b9
GIT binary patch
literal 941
zcmV;e15*5nP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px&XGugsRA@u(m_29|K@`W|o4Z&D!4%pkLIfqbof&g-eiSNPKm@T0m@C9aECOPR
z_<^PnO$14_)y7H?6cWV<ezbl;Kor8x%!v>%icLr_LAZTp!)_Qh_pv0o+#cMPvpc*0
z-+TXgZ*~xx{K6*J4=sR3XRwulRtDA?fx1~pN_oojyaEw@C>D#4*QvAO^tu3W&PNgP
zX82V^99Bw=)dONf0XXLlBHjal(-E;sYrQ|w078g!h&WC}JIe{xT5o8uR<gU^sO0nc
z^uofzI3iw-yz2`991h143BWl&6j&y2izlK7#+X4N1SJ+gN;yD8;{dSD5<d?B*R<A8
z{ISFUaL!*b#tv5UcL4C3F?Q8;-5()PA^>a=mDUR)-cm}9M(;NqKnO7b0R2@K`ZOZm
zQA)il_e>H1egnYnK->rbybpyk#%5jD{Zp-qRRVAv=Rhiz+N+eBEH~eAoFf2`iPOQW
z*5-(PdbQRo0CCE1Ie_l&?#^^N{WF+9skJWH?-D``1Hj!dXj<#r)xNdq08+{v5q-5p
ztw3<jFCyYYYYXyBDRnkc06}?;uB}NTdWncnEwQtVu|C&zb>aXjK-fCxJ<mH+EEYf4
zvg)Q=DB|~WRqihU6tvcFYKiynHxxih*-u11gng}A*om}I1@WQQ*boiLK&8k>nr1AB
zO$X@e>S}LmYx5gqhgB{Mep4&c`9~7h2YPyXc9lw{?*P!gya*AO#fLC9#M0*Rkuhc<
zacjW;djo(Ah<INq^)@O{2r&o%$D>`k97rt-EdapwAX0rwsi`=n&5CAYe`tgdej_;=
z02m^AZu!<A;&inQUBh>yj^i9-jD4yWbt1Z9jPd`>R$UDT@D)iZhlt4EA?~OGGLcTF
zug}cP%tbnFV=WYl$!4=1rBW$RL|IGViO^ob*e@cwVvKo_m^Dz%I=NhK>*C^~f1Gm3
ze$GFoP)c3*#}Z+oT2)6%c|JIuur2nHF*f9R-nVdmBF}|FagO6;8DsuJK4}5}Tl%xw
z(i8xpNY42fA}-q}dL=pok;+pD&PY4MaUz;C#_XwO$F<zA%Ykbqli8O_rF={EE>*56
z#@J-JEyG#_N9WW9U?YUZeMbu*Zlvn<Tq^_hifr8XwlWYmQuTVS=`-*jXPvn~dNUU^
P00000NkvXXu0mjf0RNyU

literal 0
HcmV?d00001

diff --git a/Web/src/views/home/widgets/components/img/mute1.png b/Web/src/views/home/widgets/components/img/mute1.png
new file mode 100644
index 0000000000000000000000000000000000000000..6db6beb3d4696bc42643af6004b6a0bb69c88ece
GIT binary patch
literal 960
zcmV;x13&zUP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px&dPzh<RA@u(m`z9&VHn5%&*;pSA$hQix#I@e?s^ELuR{e25k#k;JVcl1AVePQ
z1M?82L9}+QOQ#?x&?19Aj(rJ27#+%XRt4QzJ4p9xNB4bVY-bzB+1){1cNTVz@67wo
z|Mxuq_jzVsLWN&c;rdYpD0c>{8K`DpjS(oBg%T}+<6!O*%<rSA#fNLunRj|g0JNYo
z2*P#itpxOkb>mJcAl4ONT2<PXfFS}-IK+O9=*Dhe18Ayp7C;O@lbg_pZmestY}s8~
zT;2k;O)YYanJzh2`UK#BHRelzL{Q!@Ov?~;*u^vRy=ZE&M^hE{EkInAy9s1kW~(KV
z!3z>_HLNc_GRJ%apsC6W0Q>U!+Z4;dORAwOk=b;@0`dibT|~a!Lcoo%ZVWo_mmNS;
zm0<v<3vBaoBDxh$rr)?d;|Bm8Krm~O0SNKV5?aghOzV%|^Mz_yK7i>Kc~6FEXGAwf
z+~!X<%LgSw)Jq31SexwvScuN({8A3UOYwCBh=(?XNQl|&{E>)mblKO6t4cosx2>Q>
zb>n8CcWpd?D(@xGgiTZqA`z4?Fwy;7RbxDfri?Sb0?3wE=iVBT7|#Xav8}_-WEdyg
zQpPvm0px+m=_K$1z^B6c(pWL8Zn%Z)g7Q?kUlLK*u4MXEG4ba8as!wp+O(7XTCuVH
zY9TlAmR8RYWyyf1Dz1@tG)+$s8xEi~q8@dM*&rKi*61>unsZMuFyOmBkZ9h#ouy11
zKz$ZqS-b^fhak{{u%7Pr-5yx}dt*LNl5{tmOuu#toKgcl0(`{TrQJY^SSaul;6`(z
z_}5fMy_7avG|T%#qp5*0fDdKs?W6#n+B)TAO{QkN&<9=FzeW>k?O}%Wu~5_naIH-@
z%s;agSJ?qfMTuabmm&H=w5<ThFiTQjbnefbqtlkxLY9~>Av6RsN(T|z|67QTTK3A0
zC7EzJnlzsIW)Bpy&O{UHw$#WmBD&~!ZYZJ~edd@iEL5!OXhHcLNm7iNa~5OJ2PV-g
zF@3h?`|@1K5;ql++l5#@VmW35HUKCU0bujId4RiYALr%k3^*!}`HyR6BV-$&i|EFV
zVs>23{gNEGes2!65^;<Oodk@6XvFQ4VKsuCb4miR9>Tn?Q3dcCsZu>x%|NLl>vi2~
i2E0b9RL@m>2L1xTbICy4l6cAh0000<MNUMnLSTXoy1B0a

literal 0
HcmV?d00001

diff --git a/Web/src/views/home/widgets/components/img/play.png b/Web/src/views/home/widgets/components/img/play.png
new file mode 100644
index 0000000000000000000000000000000000000000..df9bf8bc7996fff4d9285196aa7a5f2ee9fded88
GIT binary patch
literal 1449
zcmV;a1y=frP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px)V@X6oRA@u(SxsnMRTMtw#?Y0ZE$T+=LP42#-ovOx<Ho5{K}6Kn6tON8YsD@^
ztJQ^treHy<ZAJWTl?qi9gH`ClzeS^nRkSGc&Ko9TH_?p}V?l(FA@7(I?h7w>e%_sA
zMj7zJkTCDubI*6rJAdCG^!dU*w;%oo;Ce8MqVv-<T?+tfMMVDsB2EIpq%mf)QmOpj
zO|P%m13?g!5OEj))&s!J0I<5iz-a*Z7ywR)$jKy0sw)AsYye>x4vWa605Gx=0{~zQ
z5f8?3d~!K@ItCC$(S>t!b2|`Gjc>Nb0YGng8WHs`h=_V6`;?n)5|M)g0|N&tmCCQ3
z0O<$-5#0d*&jG+C&LIo{@9Bq`Pq#CGh;;8=_Ct=W?%m1EANqpu20%m)0l+Jc;!}ut
zD30Spz6a*z!Z6$>BHIAqDrf(8W`5O2rxySs+C8sqG_Md5A6%~Cu3;9)>(2Lkn0d*W
z%>WewAfgQb@R?)$<~WYWd~V2BCJe(75qaN{zloVYZ>OUzfKsV+jWOn%yaHp)MV$tk
zF9=N#X`23$mrv95+G@4>Z7Uru0a#^<{_<?Ih^$GHWFfQkY6U^C8WI1<>8}}MHnh65
zmH>hvIFL`3MK{q+K(6OC#U@Fz!#f6Sk@`B@(9MAL1?mPiB3{?5*fsS45os`G74{S}
zU+r^nsZ_ec7;~eD5F&oX%y0VaYb8TO-{(^77&C8nWg7rkBYx=g_J@Xs&a2n!U*=;*
zvzK-MC(8lidLd2Ip=!1I<C2W%Dh`6+5$#Rv_Y=&#7{u+22!dccBEH;0=7{Zg;!c4O
zQ4Iht(|y`|B}wu^TL46)W&Cz4^gJ`~^f{D>wCHHT)3qn}f42Q^1(Bwy2Bdc;BO+~G
z9=A$9VrFe;7FWY7L_~iAz&RFi;M?xH09LJ9wQpu-<}f1Ooj*`Seo`RJ{F=|j*mga!
zvS*n2+?D|BF!Gxf7-wef@x7J{AZr7nD7rFDQ#E#-qe$lg^~Uj{1BmDZ04#K|#+VE8
zL(vis5Rqn^@2tXO%)F^cdG@>&fb4k~hFe7BrOdlIy+=jlnRcEgq7MLIqusNPnKe5t
zEEj+Zsj#j$nE8Qj0Z=_7BO?Q~T5VKBb}e}g5R=*2+2M(aiNBhiM?{AKV5@z$iJ6Zz
z1(44`h`29~<0rcbAk!5^5sAod5xFy`e?2qnFx0TZFnm@-p3nzwCR*Zwe+z)t8blmL
z#M?4!(=@%fTCM8vzkC2h)YDg}TrQtAH8r(=e%yT6v9fK#@P37Q8N@{Nn5_+GJH{V1
z#_X+BDif_<SMMP1MH&r);09yNiy{&@26jJ<>H$Qgy?Dm$Tv{}wXGXbcv|g|89~>Nf
zcRnrOk~h55LS{*TpRJB*W?r)-gSl=aqPGEHi~W8VGw=1uL_KUJo&tcUtqt!m^F2iX
z?$;V%g_xN`9{^4h=x$j_Gp7w;M!#%zTl9ur$mu<l*Ysi^nhpQmZl^Vl+=|`RfyOcm
z*&y`ke=^Xh@B4nFR1oe^kBD98f?CCv%Mo=v)T?4kt7vbs$b<Hh6Ux9e;f78dW6B-V
zDz+x*^t0Ic*=DL|+)xuvNRQmuj_mcJ78^+2UT{RsSU><MBzX$~SWo2V-34#^rdOXD
z(t_L_WoDhN+b%Bv7DNNd3jn>M*9%GA43#$k-C*7Pmc#w%Bkd%Qi^!2862KP9`{u#l
zn$ab>E3Tz!dT%>2*L6on0J7}Vw?8rE(f93-e69=acvwcn>n-)Mz$vv^XXfR`MdS++
z8F#6|qM%*zD^zqq-~G^C1gO`~I}YMr8`P=(z6bCR#+?yf(CMEk00000NkvXXu0mjf
D`*End

literal 0
HcmV?d00001

diff --git a/Web/src/views/home/widgets/components/img/play1.png b/Web/src/views/home/widgets/components/img/play1.png
new file mode 100644
index 0000000000000000000000000000000000000000..120ff4ac9946908b041d018c6b21c2edac6b56e0
GIT binary patch
literal 1560
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
KMNUMnLSTZJVCLBX

literal 0
HcmV?d00001

-- 
Gitee