新增音效设置

2023-05-03 17:45:43 +08:00
parent ea5e8b56dd
commit 7b9eefdf2d
24 changed files with 1182 additions and 156 deletions
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill="currentColor"
+    d="M8 13C6.14 13 4.59 14.28 4.14 16H2V18H4.14C4.59 19.72 6.14 21 8 21S11.41 19.72 11.86 18H22V16H11.86C11.41 14.28 9.86 13 8 13M8 19C6.9 19 6 18.1 6 17C6 15.9 6.9 15 8 15S10 15.9 10 17C10 18.1 9.1 19 8 19M19.86 6C19.41 4.28 17.86 3 16 3S12.59 4.28 12.14 6H2V8H12.14C12.59 9.72 14.14 11 16 11S19.41 9.72 19.86 8H22V6H19.86M16 9C14.9 9 14 8.1 14 7C14 5.9 14.9 5 16 5S18 5.9 18 7C18 8.1 17.1 9 16 9Z" />
+</svg>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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
@@ -31,6 +31,7 @@ import useWatchList from './useWatchList'
 import { HOTKEY_PLAYER } from '@common/hotKey'
 import { playNext, pause, playPrev, togglePlay } from '@renderer/core/player'
 import usePlaybackRate from './usePlaybackRate'
+import useSoundEffect from './useSoundEffect'


 export default () => {
@@ -41,6 +42,7 @@ export default () => {
  usePlayEvent()
  useLyric()
  useVolume()
+  useSoundEffect()
  usePlaybackRate()
  useWatchList()

@@ -0,0 +1,147 @@
+import { watch } from '@common/utils/vueTools'
+import {
+  freqs,
+  convolutions,
+  getAudioContext,
+  getBiquadFilter,
+  setConvolver,
+  setPannerSoundR,
+  setPannerSpeed,
+  startPanner,
+  stopPanner,
+} from '@renderer/plugins/player'
+
+import { appSetting } from '@renderer/store/setting'
+
+const cache = new Map<string, AudioBuffer>()
+const loadBuffer = async(name: string) => new Promise<AudioBuffer>((resolve, reject) => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const path = require('@static/medias/filters/' + name) as string
+  if (cache.has(path)) {
+    resolve(cache.get(path) as AudioBuffer)
+    return
+  }
+  // Load buffer asynchronously
+  let request = new XMLHttpRequest()
+  request.open('GET', path, true)
+  request.responseType = 'arraybuffer'
+
+  request.onload = function() {
+    // Asynchronously decode the audio file data in request.response
+    void getAudioContext().decodeAudioData(request.response, (buffer) => {
+      if (!buffer) {
+        reject(new Error('error decoding file data: ' + path))
+        return
+      }
+      cache.set(path, buffer)
+      resolve(buffer)
+    },
+    function(error) {
+      reject(error)
+      console.error('decodeAudioData error', error)
+    })
+  }
+
+  request.onerror = function() {
+    reject(new Error('XHR error'))
+  }
+
+  request.send()
+})
+
+export default () => {
+  console.log(appSetting['player.soundEffect.panner.enable'])
+  if (appSetting['player.soundEffect.panner.enable']) startPanner()
+  setPannerSoundR(appSetting['player.soundEffect.panner.soundR'] / 10)
+  setPannerSpeed(2 * (appSetting['player.soundEffect.panner.speed'] / 10))
+  if (freqs.some(v => appSetting[`player.soundEffect.biquadFilter.hz${v}`] != 0)) {
+    const bfs = getBiquadFilter()
+    for (const item of freqs) {
+      bfs.get(`hz${item}`)!.gain.value = appSetting[`player.soundEffect.biquadFilter.hz${item}`]
+    }
+  }
+  if (appSetting['player.soundEffect.convolution.fileName']) {
+    void loadBuffer(appSetting['player.soundEffect.convolution.fileName']).then((buffer) => {
+      const target = convolutions.find(c => c.source == appSetting['player.soundEffect.convolution.fileName'])
+      setConvolver(buffer, target!.sendGain, target!.mainGain)
+    })
+  }
+
+
+  watch(() => appSetting['player.soundEffect.panner.enable'], (enable) => {
+    if (enable) {
+      startPanner()
+    } else {
+      stopPanner()
+    }
+  })
+  watch(() => appSetting['player.soundEffect.panner.soundR'], (soundR) => {
+    setPannerSoundR(soundR / 10)
+  })
+  watch(() => appSetting['player.soundEffect.panner.speed'], (speed) => {
+    setPannerSpeed(2 * (speed / 10))
+  })
+  watch(() => appSetting['player.soundEffect.convolution.fileName'], (fileName) => {
+    setTimeout(() => {
+      if (fileName) {
+        void loadBuffer(fileName).then((buffer) => {
+          const target = convolutions.find(c => c.source == fileName)
+          setConvolver(buffer, target!.sendGain, target!.mainGain)
+        })
+      } else {
+        setConvolver(null, 0, 0)
+      }
+    })
+  })
+  watch(() => appSetting['player.soundEffect.biquadFilter.hz31'], (hz31) => {
+    const bfs = getBiquadFilter()
+    bfs.get('hz31')!.gain.value = hz31
+  })
+  watch(() => appSetting['player.soundEffect.biquadFilter.hz62'], (hz62) => {
+    const bfs = getBiquadFilter()
+    bfs.get('hz62')!.gain.value = hz62
+  })
+  watch(() => appSetting['player.soundEffect.biquadFilter.hz125'], (hz125) => {
+    const bfs = getBiquadFilter()
+    bfs.get('hz125')!.gain.value = hz125
+  })
+  watch(() => appSetting['player.soundEffect.biquadFilter.hz250'], (hz250) => {
+    const bfs = getBiquadFilter()
+    bfs.get('hz250')!.gain.value = hz250
+  })
+  watch(() => appSetting['player.soundEffect.biquadFilter.hz500'], (hz500) => {
+    const bfs = getBiquadFilter()
+    bfs.get('hz500')!.gain.value = hz500
+  })
+  watch(() => appSetting['player.soundEffect.biquadFilter.hz1000'], (hz1000) => {
+    const bfs = getBiquadFilter()
+    bfs.get('hz1000')!.gain.value = hz1000
+  })
+  watch(() => appSetting['player.soundEffect.biquadFilter.hz2000'], (hz2000) => {
+    const bfs = getBiquadFilter()
+    bfs.get('hz2000')!.gain.value = hz2000
+  })
+  watch(() => appSetting['player.soundEffect.biquadFilter.hz4000'], (hz4000) => {
+    const bfs = getBiquadFilter()
+    bfs.get('hz4000')!.gain.value = hz4000
+  })
+  watch(() => appSetting['player.soundEffect.biquadFilter.hz8000'], (hz8000) => {
+    const bfs = getBiquadFilter()
+    bfs.get('hz8000')!.gain.value = hz8000
+  })
+  watch(() => appSetting['player.soundEffect.biquadFilter.hz16000'], (hz16000) => {
+    const bfs = getBiquadFilter()
+    bfs.get('hz16000')!.gain.value = hz16000
+  })
+
+
+  // window.key_event.on(HOTKEY_PLAYER.volume_up.action, hotkeyVolumeUp)
+  // window.key_event.on(HOTKEY_PLAYER.volume_down.action, hotkeyVolumeDown)
+  // window.app_event.on('setPlaybackRate', handleSetPlaybackRate)
+
+  // onBeforeUnmount(() => {
+  //   // window.key_event.off(HOTKEY_PLAYER.volume_up.action, hotkeyVolumeUp)
+  //   // window.key_event.off(HOTKEY_PLAYER.volume_down.action, hotkeyVolumeDown)
+  //   window.app_event.off('setPlaybackRate', handleSetPlaybackRate)
+  // })
+}
@@ -2,6 +2,57 @@ let audio: HTMLAudioElement | null = null
 let audioContext: AudioContext
 let mediaSource: MediaElementAudioSourceNode
 let analyser: AnalyserNode
+// https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext
+// https://benzleung.gitbooks.io/web-audio-api-mini-guide/content/chapter5-1.html
+export const freqs = [31, 62, 125, 250, 500, 1000, 2000, 4000, 8000, 16000] as const
+type Freqs = (typeof freqs)[number]
+let biquads: Map<`hz${Freqs}`, BiquadFilterNode>
+export const convolutions = [
+  {
+    name: 'telephone', // 电话
+    mainGain: 0.0,
+    sendGain: 3.0,
+    source: 'filter-telephone.wav',
+  },
+  {
+    name: 'spreader', // 室内
+    mainGain: 1.0,
+    sendGain: 2.5,
+    source: 'spreader50-65ms.wav',
+  },
+  {
+    name: 'feedback_spring', // 山洞
+    mainGain: 0.0,
+    sendGain: 2.4,
+    source: 'feedback-spring.wav',
+  },
+  {
+    name: 'church', // 教堂
+    mainGain: 1.8,
+    sendGain: 0.9,
+    source: 's2_r4_bd.wav',
+  },
+  {
+    name: 'kitchen', // 厨房
+    mainGain: 0.6,
+    sendGain: 3.0,
+    source: 'kitchen-true-stereo.wav',
+  },
+  {
+    name: 'bedroom', // 大厅
+    mainGain: 0.6,
+    sendGain: 2.1,
+    source: 'living-bedroom-leveled.wav',
+  },
+] as const
+let convolver: ConvolverNode
+let convolverSourceGainNode: GainNode
+let convolverOutputGainNode: GainNode
+let convolverDynamicsCompressor: DynamicsCompressorNode
+let gainNode: GainNode
+let panner: PannerNode
+export const soundR = 0.5
+

 export const createAudio = () => {
  if (audio) return
@@ -11,20 +62,154 @@ export const createAudio = () => {
  audio.preload = 'auto'
 }

-export const getAnalyser = (): AnalyserNode | null => {
-  if (!audio) throw new Error('audio not defined')
+const initAnalyser = () => {
+  analyser = audioContext.createAnalyser()
+  analyser.fftSize = 256
+}

-  if (audioContext == null) {
-    audioContext = new window.AudioContext()
-    mediaSource = audioContext.createMediaElementSource(audio)
-    analyser = audioContext.createAnalyser()
-    analyser.fftSize = 256
-    mediaSource.connect(analyser)
-    analyser.connect(audioContext.destination)
+const initBiquadFilter = () => {
+  biquads = new Map()
+  let i
+
+  for (const item of freqs) {
+    const filter = audioContext.createBiquadFilter()
+    biquads.set(`hz${item}`, filter)
+    filter.type = 'peaking'
+    filter.frequency.value = item
+    filter.Q.value = 1.4
+    filter.gain.value = 0
  }
+
+  for (i = 1; i < freqs.length; i++) {
+    (biquads.get(`hz${freqs[i - 1]}`) as BiquadFilterNode).connect(biquads.get(`hz${freqs[i]}`) as BiquadFilterNode)
+  }
+}
+
+const initConvolver = () => {
+  convolverSourceGainNode = audioContext.createGain()
+  convolverOutputGainNode = audioContext.createGain()
+  convolverDynamicsCompressor = audioContext.createDynamicsCompressor()
+  convolver = audioContext.createConvolver()
+  convolver.connect(convolverOutputGainNode)
+  convolverSourceGainNode.connect(convolverDynamicsCompressor)
+  convolverOutputGainNode.connect(convolverDynamicsCompressor)
+}
+
+const initPanner = () => {
+  panner = audioContext.createPanner()
+}
+
+const initGain = () => {
+  gainNode = audioContext.createGain()
+}
+
+const initAdvancedAudioFeatures = () => {
+  if (audioContext) return
+  if (!audio) throw new Error('audio not defined')
+  audioContext = new window.AudioContext()
+  mediaSource = audioContext.createMediaElementSource(audio)
+
+  initAnalyser()
+  mediaSource.connect(analyser)
+  // analyser.connect(audioContext.destination)
+
+  initBiquadFilter()
+  analyser.connect(biquads.get(`hz${freqs[0]}`) as BiquadFilterNode)
+
+  initConvolver()
+  const lastBiquadFilter = (biquads.get(`hz${freqs.at(-1) as Freqs}`) as BiquadFilterNode)
+  lastBiquadFilter.connect(convolverSourceGainNode)
+  lastBiquadFilter.connect(convolver)
+
+  initPanner()
+  convolverDynamicsCompressor.connect(panner)
+
+  initGain()
+  panner.connect(gainNode)
+
+  gainNode.connect(audioContext.destination)
+}
+
+export const getAudioContext = () => {
+  initAdvancedAudioFeatures()
+  return audioContext
+}
+
+
+export const getAnalyser = (): AnalyserNode | null => {
+  initAdvancedAudioFeatures()
  return analyser
 }

+export const getBiquadFilter = () => {
+  initAdvancedAudioFeatures()
+  return biquads
+}
+
+// let isConvolverConnected = false
+export const setConvolver = (buffer: AudioBuffer | null, sendGain: number, mainGain: number) => {
+  initAdvancedAudioFeatures()
+  convolver.buffer = buffer
+  if (buffer) {
+    convolverOutputGainNode.gain.value = sendGain
+    convolverSourceGainNode.gain.value = mainGain
+  } else {
+    convolverOutputGainNode.gain.value = 0
+    convolverSourceGainNode.gain.value = 1
+  }
+}
+
+let pannerInfo = {
+  x: 0,
+  y: 0,
+  z: 0,
+  soundR: 0.5,
+  rad: 0,
+  speed: 1,
+  intv: null as NodeJS.Timeout | null,
+}
+const setPannerXYZ = (nx: number, ny: number, nz: number) => {
+  pannerInfo.x = nx
+  pannerInfo.y = ny
+  pannerInfo.z = nz
+  // console.log(pannerInfo)
+  panner.positionX.value = nx * pannerInfo.soundR
+  panner.positionY.value = ny * pannerInfo.soundR
+  panner.positionZ.value = nz * pannerInfo.soundR
+}
+export const setPannerSoundR = (r: number) => {
+  pannerInfo.soundR = r
+}
+
+export const setPannerSpeed = (speed: number) => {
+  pannerInfo.speed = speed
+  if (pannerInfo.intv) startPanner()
+}
+export const stopPanner = () => {
+  if (pannerInfo.intv) {
+    clearInterval(pannerInfo.intv)
+    pannerInfo.intv = null
+    pannerInfo.rad = 0
+  }
+  panner.positionX.value = 0
+  panner.positionY.value = 0
+  panner.positionZ.value = 0
+}
+
+export const startPanner = () => {
+  initAdvancedAudioFeatures()
+  if (pannerInfo.intv) {
+    clearInterval(pannerInfo.intv)
+    pannerInfo.intv = null
+    pannerInfo.rad = 0
+  }
+  pannerInfo.intv = setInterval(() => {
+    pannerInfo.rad += 1
+    if (pannerInfo.rad > 360) pannerInfo.rad -= 360
+    setPannerXYZ(Math.sin(pannerInfo.rad * Math.PI / 180), Math.cos(pannerInfo.rad * Math.PI / 180), Math.cos(pannerInfo.rad * Math.PI / 180))
+  }, pannerInfo.speed * 10)
+}
+
 export const hasInitedAnalyser = (): boolean => audioContext != null

 export const setResource = (src: string) => {