为可视化音频的频谱整体添加频谱均值加成，使频谱显示更有节奏感

publish/changeLog.md

@@ -1,40 +1,3 @@
-这算是一个大版本，对主窗口部分的代码逻辑做了较大改动，但由于界面的改动不大，所以没有更新大版本号。
-虽然经过一个月的测试与问题修复，但可能仍然存在未发现的问题，若你发现某些界面异常、某些行为与旧版本存在差异等问题，欢迎反馈！
-另外祝大家元旦快乐~！
-
-### 新增
-
-- 播放详情页新增音量控制条
-- 播放详情页新增桌面歌词切换按钮
-- 新增将我的列表保存为TXT、CSV格式，可以去设置-备份与恢复中使用（注意：此类格式的备份目前不支持恢复到LX Music中）
-- 新增根据歌曲名、歌手名等字段对列表自动排序的功能，可以在我的列表右击列表名弹出的菜单中使用
-- 新增将播放与下载的歌词转换为繁体中文选项，默认关闭，可在设置-播放设置中开启
-- 现在已允许进入临时播放列表，即：使用歌单详情页、排行榜名称右键菜单的“播放”按钮播放歌曲时，可右击播放封面进入此临时列表
-- 播放详情页新增音频可视化功能（实验性）
-- 我的列表新增拖动调整位置功能，按住Ctrl键（Mac上对应Command键）的时候将进入“拖动模式”，此时可以拖动列表的位置来调整顺序
-
 ### 优化
 
-- 优化列表性能，软件整体性能
-- 调整Mac平台下的图标大小
-- 同步功能添加对列表顺序调整的控制，确保手动调整位置后的列表与不同的电脑同步时，列表位置不会被还原
-- 优化歌单详情、排行榜名右键的播放按钮的播放机制，现在不用等待整个列表（多页时）加载完成才能播放了
-- 为播放详情页、桌面歌词添加延迟滚动，播放详情页略微减小已激活歌词的缩放大小及桌面歌词翻译大小
-- 修改右边控制按钮为windows风格
-- 更新了新年皮肤的背景与配色，欢迎体验~
-
-### 修复
-
-- 修复kw源某些歌曲的歌词提取异常的问题
-
-### 变更
-
-- 现在使用繁体中文语言时将不再自动转换歌词，转换行为将由上面新增的转换开关控制
-
-### 移除
-
-- 移除我的列表右键菜单的“上移、下移列表”功能，调整改用新增的拖动功能去调整位置
-
-### 其他
-
-- 升级vue到 3.x
+- 为可视化音频的频谱整体添加频谱均值加成，使频谱显示更有节奏感

src/renderer/components/common/AudioVisualizer.vue

@@ -42,6 +42,11 @@ export default {
     let isPlaying = false
     let animationFrameId
 
+    let num
+    let mult
+    const maxNum = 255
+    let frequencyAvg = 0
+
     const theme = useRefGetter('theme')
     // const setting = useRefGetter('setting')
     let themeColor = themes[theme.value || 'green']
@@ -49,7 +54,7 @@ export default {
       themeColor = themes[theme || 'green']
     })
 
-    // https://codepen.io/nfj525/pen/rVBaab
+    // https://developer.mozilla.org/zh-CN/docs/Web/API/AnalyserNode/smoothingTimeConstant
     const renderFrame = () => {
       animationFrameId = null
       if (isPlaying) animationFrameId = window.requestAnimationFrame(renderFrame)
@@ -60,6 +65,19 @@ export default {
 
       ctx.clearRect(0, 0, WIDTH, HEIGHT)
       // ctx.fillRect(0, 0, WIDTH, HEIGHT)
+      ctx.fillStyle = themeColor
+
+      for (let i = 0; i < bufferLength; i++) {
+        mult = Math.floor(i / maxNum)
+        num = mult % 2 === 0 ? (i - maxNum * mult) : (maxNum - (i - maxNum * mult))
+        let spectrum = num > 36 ? 0 : dataArray[num + 20]
+        frequencyAvg += spectrum * 1.2
+      }
+      frequencyAvg /= bufferLength
+      frequencyAvg *= 1.7
+
+      frequencyAvg = frequencyAvg / maxNum
+      // ctx.scale(1, 1 + frequencyAvg)
 
       for (let i = 0; i < bufferLength; i++) {
         barHeight = dataArray[i]
@@ -69,7 +87,7 @@ export default {
         // let b = 50
 
         // ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')'
-        ctx.fillStyle = themeColor
+        barHeight = barHeight * frequencyAvg + barHeight * 0.6
         ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight)
 
         x += barWidth