静音开关

components/common/audio/index.vue

@@ -21,6 +21,7 @@ export default {
       'play',
       'uiClick',
       'uiClickType',
+      'mute', // 静音状态
     ]),
   },
   watch: {
@@ -38,6 +39,17 @@ export default {
           break
       }
     },
+    mute(value) {
+      if (value) { // 静音
+        console.log('静音')
+        this.bgAudio.pause()
+        this.uiClickAudio.pause()
+      } else { // 取消静音
+        console.log('取消静音')
+        this.bgAudio.play()
+        this.uiClickAudio.play()
+      }
+    },
   },
   mounted() {
     this.init()
@@ -50,13 +62,23 @@ export default {
       this.uiClickAudio.src = 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/sound/ui_click.mp3' // 通用ui点击音乐
     },
     playBgAudio() {
+      const { mute } = this
+      if (mute) { // 如果静音
+        return
+      }
       this.bgAudio.play()
     },
     // ui点击音效
     playClickAudio() {
+      const { mute } = this
+      if (mute) { // 如果静音
+        return
+      }
       this.uiClickAudio.currentTime = 0
       this.uiClickAudio.play()
     },
+    // 设置音量
+    setVolume() {},
   },
 }
 </script>

pages/index/game/components/keyboard.vue

@@ -376,7 +376,7 @@ export default {
         background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_02.png);
         background-size: 100% 100%;
         position: relative;
-        z-index: 2;
+        z-index: 20;
         .btn {
           width: 66px;
           height: 54px;

pages/index/game/index.vue

@@ -16,6 +16,10 @@
         <RightPlayer :device="device"/>
       </div>
     </div>
+    <!-- 音量控制，临时 -->
+    <div class="audio-ctrl-box">
+      <AudioCtrl />
+    </div>
     <!-- 底部键盘 -->
     <Keyboard v-if="deviceButtonPanel.id" :id="id" :device-button-panel="deviceButtonPanel" />
   </div>
@@ -27,12 +31,14 @@ import { mapActions, mapState, mapMutations, } from 'vuex'
 import WebRTCPlayer from './components/WebRTCPlayer'
 import RightPlayer from './components/right-player'
 import Keyboard from './components/keyboard'
+import AudioCtrl from './components/audio-ctrl'
 export default {
   components: {
     WebRTCPlayer, // 直播视频
     Background,
     RightPlayer, // 右侧的直播板块
     Keyboard, // 键盘组件
+    AudioCtrl, // 音量控制
   },
   data() {
     return {
@@ -253,6 +259,14 @@ export default {
   }
 }
 
+// 音量控制
+.audio-ctrl-box {
+  position: absolute;
+  right: 30px;
+  top: 120px;
+  z-index: 1000;
+}
+
 /* .game-btn-block {
   display: flex;
   .game-btn {

store/audio.js

@@ -2,6 +2,7 @@ export const state = () => ({
   play: '',
   uiClick: '',
   uiClickType: '',
+  mute: false, // 是否静音
 })
 
 export const mutations = {
@@ -13,4 +14,8 @@ export const mutations = {
     state.uiClickType = type
     state.uiClick = new Date().getTime()
   },
+  // 设置静音
+  SetMute: (state, data) => {
+    state.mute = data
+  },
 }