新增音效设置

src/renderer/components/common/BiquadFilterBtn.vue

@@ -0,0 +1,211 @@
+<template>
+  <material-popup-btn :class="$style.btnContent">
+    <button :class="$style.btn" :aria-label="'音效设置'">
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 24 24" space="preserve">
+        <use xlink:href="#icon-volume-high-outline" />
+      </svg>
+    </button>
+    <template #content>
+      <div :class="$style.content">
+        <div :class="$style.row">
+          <h3 :class="$style.title">{{ $t('player__sound_effect_biquad_filter') }}</h3>
+          <div :class="$style.eqList">
+            <div v-for="(v, i) in labels" :key="i" :class="$style.eqItem">
+              <span :class="$style.label">{{ v }}</span>
+              <base-slider-bar :class="$style.slider" :value="values[i]" :min="-30" :max="30" @change="handleUpdate(i, $event)" />
+              <span :class="$style.value">{{ values[i] }}db</span>
+            </div>
+          </div>
+          <div :class="$style.footer">
+            <!-- <span>{{ playbackRate.toFixed(2) }}x</span> -->
+            <base-btn min @click="handleReset">{{ $t('player__sound_effect_biquad_filter_reset_btn') }}</base-btn>
+          </div>
+        </div>
+        <div :class="$style.row">
+          <h3 :class="$style.title">{{ $t('player__sound_effect_convolution') }}</h3>
+          <div :class="$style.convolutionList">
+            <base-checkbox
+              v-for="item in convolutions"
+              :id="`player__convolution_${item.name}`"
+              :key="item.name"
+              :model-value="convolution"
+              :label="$t(`player__sound_effect_convolution_${item.name}`)"
+              :value="item.source"
+              @update:model-value="updateConvolution($event)"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </material-popup-btn>
+</template>
+
+<script setup>
+import { reactive, ref } from '@common/utils/vueTools'
+// import useNextTogglePlay from '@renderer/utils/compositions/useNextTogglePlay'
+// import useToggleDesktopLyric from '@renderer/utils/compositions/useToggleDesktopLyric'
+// import { musicInfo, playMusicInfo } from '@renderer/store/player/state'
+// import { saveVolumeIsMute } from '@renderer/store/setting'
+// import { volume, isMute } from '@renderer/store/player/volume'
+// import fs from 'node:fs'
+import { freqs, getBiquadFilter, convolutions, setConvolver, getAudioContext } from '@renderer/plugins/player'
+
+const values = reactive(Array(freqs.length).fill(0))
+const labels = freqs.map(num => num < 1000 ? num : `${num / 1000}k`)
+// const handleUpdateVolume = (val) => {
+//   window.app_event.setVolume(val)
+// }
+
+
+const handleUpdate = (index, value) => {
+  // const { } =
+  value = Math.round(value)
+  const bfs = getBiquadFilter()
+  values[index] = value
+  bfs[index].gain.value = value
+  console.log(bfs[index].gain.value)
+  // console.log(index, event.target.value, bfs)
+}
+
+const handleReset = () => {
+  const bfs = getBiquadFilter()
+  for (let i = 0; i < values.length; i++) {
+    values[i] = 0
+    bfs[i].gain.value = 0
+  }
+}
+
+const convolution = ref('')
+
+const cache = {}
+const loadBuffer = (url) => new Promise((resolve, reject) => {
+  if (cache[url]) {
+    resolve(cache[url])
+    return
+  }
+  // Load buffer asynchronously
+  let request = new XMLHttpRequest()
+  request.open('GET', url, true)
+  request.responseType = 'arraybuffer'
+
+  request.onload = function() {
+    // Asynchronously decode the audio file data in request.response
+    getAudioContext().decodeAudioData(request.response, function(buffer) {
+      if (!buffer) {
+        alert('error decoding file data: ' + url)
+        return
+      }
+      cache[url] = buffer
+      resolve(buffer)
+    },
+    function(error) {
+      reject(error)
+      console.error('decodeAudioData error', error)
+    })
+  }
+
+  request.onerror = function() {
+    reject(new Error('XHR error'))
+  }
+
+  request.send()
+})
+
+const updateConvolution = async val => {
+  convolution.value = val
+  if (val) {
+    const path = require('@static/medias/filters/' + val)
+    const buffer = await loadBuffer(path)
+    const target = convolutions.find(c => c.source == val)
+    setConvolver(buffer, target.sendGain, target.mainGain)
+  } else {
+    setConvolver(null, 0, 0)
+  }
+}
+
+</script>
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+.btnContent {
+  flex: none;
+  height: 100%;
+}
+
+.btn {
+  position: relative;
+  // color: var(--color-button-font);
+  justify-content: center;
+  align-items: center;
+  transition: color @transition-normal;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  width: 24px;
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 0;
+
+  svg {
+    transition: opacity @transition-fast;
+    opacity: .6;
+    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
+  }
+  &:hover {
+    svg {
+      opacity: .9;
+    }
+  }
+  &:active {
+    svg {
+      opacity: 1;
+    }
+  }
+}
+
+.content {
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 5px 3px;
+  gap: 15px;
+  width: 300px;
+}
+.eqList {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 15px;
+  width: 100%;
+}
+.eqItem {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 8px;
+}
+.label {
+  flex: none;
+  width: 40px;
+  font-size: 14px;
+  text-align: center;
+}
+.value {
+  flex: none;
+  width: 40px;
+  font-size: 14px;
+  text-align: center;
+}
+.footer {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  // font-size: 13px;
+  span {
+    line-height: 1;
+  }
+}
+
+.slider {
+  flex: auto;
+}
+
+</style>

src/renderer/components/common/SoundEffectBtn/AudioConvolution.vue

@@ -0,0 +1,48 @@
+<template>
+  <div :class="$style.contnet">
+    <h3 class="player__sound_effect_title">{{ $t('player__sound_effect_convolution') }}</h3>
+    <div :class="$style.convolutionList">
+      <base-checkbox
+        v-for="item in convolutions"
+        :id="`player__convolution_${item.name}`"
+        :key="item.name"
+        :class="$style.checkbox"
+        :model-value="appSetting['player.soundEffect.convolution.fileName']"
+        :label="$t(`player__sound_effect_convolution_${item.name}`)"
+        :value="item.source"
+        @update:model-value="updateConvolution($event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+// import { ref } from '@common/utils/vueTools'
+import { appSetting, updateSetting } from '@renderer/store/setting'
+import { convolutions } from '@renderer/plugins/player'
+
+const updateConvolution = val => {
+  console.log(val)
+  updateSetting({ 'player.soundEffect.convolution.fileName': val })
+}
+
+</script>
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+.contnet {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 3px;
+}
+.convolutionList {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 8px;
+  width: 100%;
+}
+.checkbox {
+  margin-right: 10px;
+  font-size: 12px;
+}
+</style>

src/renderer/components/common/SoundEffectBtn/AudioPanner.vue

@@ -0,0 +1,116 @@
+<template>
+  <div :class="$style.contnet">
+    <div :class="$style.header">
+      <h3 class="player__sound_effect_title">{{ $t('player__sound_effect_panner') }}</h3>
+      <base-checkbox
+        id="player__sound_effect_panner_enabled"
+        :class="$style.checkbox"
+        :label="$t('player__sound_effect_panner_enabled')"
+        :model-value="appSetting['player.soundEffect.panner.enable']"
+        @update:model-value="updateEnabled"
+      />
+    </div>
+    <div :class="$style.eqList">
+      <div :class="$style.eqItem">
+        <span :class="$style.label">{{ $t('player__sound_effect_panner_sound_r') }}</span>
+        <base-slider-bar :class="$style.slider" :value="appSetting['player.soundEffect.panner.soundR']" :min="1" :max="30" @change="handleUpdateSoundR" />
+        <span :class="[$style.value, { [$style.active]: appSetting['player.soundEffect.panner.soundR'] != 5 }]">{{ appSetting['player.soundEffect.panner.soundR'] }}</span>
+      </div>
+      <div :class="$style.eqItem">
+        <span :class="$style.label">{{ $t('player__sound_effect_panner_sound_speed') }}</span>
+        <base-slider-bar :class="$style.slider" :value="appSetting['player.soundEffect.panner.speed']" :min="1" :max="50" @change="handleUpdateSpeed" />
+        <span :class="[$style.value, { [$style.active]: appSetting['player.soundEffect.panner.speed'] != 25 }]">{{ appSetting['player.soundEffect.panner.speed'] }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// import { reactive } from '@common/utils/vueTools'
+import { appSetting, updateSetting } from '@renderer/store/setting'
+
+// const setting = reactive({
+//   enabled: false,
+//   soundR: 5,
+//   speed: 25,
+// })
+
+const updateEnabled = (enabled) => {
+  // console.log(enabled)
+  updateSetting({ 'player.soundEffect.panner.enable': enabled })
+}
+
+const handleUpdateSoundR = (value) => {
+  updateSetting({ 'player.soundEffect.panner.soundR': Math.round(value) })
+}
+const handleUpdateSpeed = (value) => {
+  updateSetting({ 'player.soundEffect.panner.speed': Math.round(value) })
+}
+
+
+</script>
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+.contnet {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+}
+.header {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+.eqList {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 15px;
+  width: 100%;
+}
+.eqItem {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 8px;
+}
+.label {
+  flex: none;
+  // width: 50px;
+  font-size: 12px;
+}
+.value {
+  flex: none;
+  width: 40px;
+  font-size: 12px;
+  text-align: center;
+
+  &.active {
+    color: var(--color-primary-font);
+  }
+}
+
+.footer {
+  display: flex;
+  flex-flow: row nowrap;
+  // justify-content: space-between;
+  justify-content: center;
+  align-items: center;
+  // font-size: 13px;
+  span {
+    line-height: 1;
+  }
+}
+
+.slider {
+  flex: auto;
+}
+
+.checkbox {
+  margin-right: 10px;
+  font-size: 13px;
+}
+
+</style>

src/renderer/components/common/SoundEffectBtn/BiquadFilter.vue

@@ -0,0 +1,98 @@
+<template>
+  <div :class="$style.contnet">
+    <div :class="$style.header">
+      <h3 class="player__sound_effect_title">{{ $t('player__sound_effect_biquad_filter') }}</h3>
+      <base-btn min @click="handleReset">{{ $t('player__sound_effect_biquad_filter_reset_btn') }}</base-btn>
+    </div>
+    <div :class="$style.eqList">
+      <div v-for="(v, i) in freqs" :key="v" :class="$style.eqItem">
+        <span :class="$style.label">{{ labels[i] }}</span>
+        <base-slider-bar :class="$style.slider" :value="appSetting[`player.soundEffect.biquadFilter.hz${v}`]" :min="-20" :max="20" @change="handleUpdate(v, $event)" />
+        <span :class="$style.value">{{ appSetting[`player.soundEffect.biquadFilter.hz${v}`] }}db</span>
+      </div>
+    </div>
+    <!-- <div :class="$style.footer">
+      <base-btn min @click="handleReset">{{ $t('player__sound_effect_biquad_filter_reset_btn') }}</base-btn>
+    </div> -->
+  </div>
+</template>
+
+<script setup>
+// import { reactive } from '@common/utils/vueTools'
+import { freqs } from '@renderer/plugins/player'
+import { appSetting, updateSetting } from '@renderer/store/setting'
+
+const labels = freqs.map(num => num < 1000 ? num : `${num / 1000}k`)
+
+const handleUpdate = (key, value) => {
+  value = Math.round(value)
+  // values[index] = value
+  updateSetting({ [`player.soundEffect.biquadFilter.hz${key}`]: value })
+  // console.log(index, event.target.value, bfs)
+}
+
+const handleReset = () => {
+  const setting = {}
+  for (const key of freqs) {
+    setting[`player.soundEffect.biquadFilter.hz${key}`] = 0
+  }
+  updateSetting(setting)
+}
+
+</script>
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+.contnet {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+}
+.header {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+.eqList {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 15px;
+  width: 100%;
+}
+.eqItem {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 8px;
+}
+.label {
+  flex: none;
+  width: 40px;
+  font-size: 12px;
+  text-align: center;
+}
+.value {
+  flex: none;
+  width: 40px;
+  font-size: 12px;
+  text-align: center;
+}
+.footer {
+  display: flex;
+  flex-flow: row nowrap;
+  // justify-content: space-between;
+  justify-content: center;
+  align-items: center;
+  // font-size: 13px;
+  span {
+    line-height: 1;
+  }
+}
+
+.slider {
+  flex: auto;
+}
+
+</style>

src/renderer/components/common/SoundEffectBtn/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <material-popup-btn :class="$style.btnContent">
+    <button :class="$style.btn" :aria-label="'音效设置'">
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="90%" viewBox="0 0 24 24" space="preserve">
+        <use xlink:href="#icon-tune-variant" />
+      </svg>
+    </button>
+    <template #content>
+      <div :class="$style.content">
+        <AudioConvolution />
+        <AudioPanner />
+        <BiquadFilter />
+      </div>
+    </template>
+  </material-popup-btn>
+</template>
+
+<script setup>
+// import { reactive, ref } from '@common/utils/vueTools'
+// import useNextTogglePlay from '@renderer/utils/compositions/useNextTogglePlay'
+// import useToggleDesktopLyric from '@renderer/utils/compositions/useToggleDesktopLyric'
+// import { musicInfo, playMusicInfo } from '@renderer/store/player/state'
+// import { saveVolumeIsMute } from '@renderer/store/setting'
+// import { volume, isMute } from '@renderer/store/player/volume'
+// import fs from 'node:fs'
+import BiquadFilter from './BiquadFilter'
+import AudioPanner from './AudioPanner'
+import AudioConvolution from './AudioConvolution'
+
+
+</script>
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+.btnContent {
+  flex: none;
+  height: 100%;
+}
+
+.btn {
+  position: relative;
+  // color: var(--color-button-font);
+  justify-content: center;
+  align-items: center;
+  transition: color @transition-normal;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  width: 24px;
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 0;
+
+  svg {
+    transition: opacity @transition-fast;
+    opacity: .6;
+    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
+  }
+  &:hover {
+    svg {
+      opacity: .9;
+    }
+  }
+  &:active {
+    svg {
+      opacity: 1;
+    }
+  }
+}
+
+.content {
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 5px 3px;
+  gap: 15px;
+  width: 400px;
+
+  :global {
+    // .player__sound_effect_contnet {
+    //   display: flex;
+    // }
+    .player__sound_effect_title {
+      // margin-bottom: 10px;
+      font-size: 14px;
+      padding-bottom: 5px;
+    }
+  }
+}
+
+
+</style>

src/renderer/components/layout/PlayDetail/components/ControlBtns.vue

@@ -14,6 +14,7 @@ div(:class="$style.footerLeftControlBtns")
   button(:class="[$style.footerLeftControlBtn, {[$style.active]: isShowPlayComment}]" @click="toggleVisibleComment" :aria-label="$t('comment__show')")
     svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='95%' viewBox='0 0 24 24' space='preserve')
       use(xlink:href='#icon-comment')
+  common-sound-effect-btn
   common-playback-rate-btn
   common-volume-btn
   common-toggle-play-mode-btn