Decent cava linear visualizer

Modules/Audio/CircularSpectrum.qml

@@ -0,0 +1,52 @@
+import QtQuick
+import qs.Services
+
+Item {
+  id: root
+  property int innerRadius: 32 * scaling
+  property int outerRadius: 64 * scaling
+  property color fillColor: Colors.accentPrimary
+  property color strokeColor: Colors.textPrimary
+  property int strokeWidth: 0 * scaling
+  property var values: []
+  property int usableOuter: 64
+
+  width: usableOuter * 2
+  height: usableOuter * 2
+
+  Repeater {
+    model: root.values.length
+    Rectangle {
+      property real value: root.values[index]
+      property real angle: (index / root.values.length) * 360
+      width: Math.max(2 * scaling, (root.innerRadius * 2 * Math.PI) / root.values.length - 4 * scaling)
+      height: value * (usableOuter - root.innerRadius)
+      radius: width / 2
+      color: root.fillColor
+      border.color: root.strokeColor
+      border.width: root.strokeWidth
+      antialiasing: true
+
+      x: root.width / 2 - width / 2 * Math.cos(Math.PI / 2 + 2 * Math.PI * index / root.values.length) - width / 2
+      y: root.height / 2 - height
+
+      transform: [
+        Rotation {
+          origin.x: width / 2
+          origin.y: height
+          //angle: (index / root.values.length) * 360
+        },
+        Translate {
+          x: root.innerRadius * Math.cos(2 * Math.PI * index / root.values.length)
+          y: root.innerRadius * Math.sin(2 * Math.PI * index / root.values.length)
+        }
+      ]
+
+      Behavior on height {
+        SmoothedAnimation {
+          duration: 120
+        }
+      }
+    }
+  }
+}

Modules/Audio/LinearSpectrum.qml

@@ -0,0 +1,61 @@
+import QtQuick
+import qs.Services
+
+Item {
+  id: root
+  property color fillColor: Colors.accentPrimary
+  property color strokeColor: Colors.textPrimary
+  property int strokeWidth: 0
+  property var values: []
+
+  property real xScale: width / (values.length * 2)
+
+  Repeater {
+    model: values.length
+    Rectangle {
+      property real amp: values[values.length - 1 - index]
+
+      color: fillColor
+      border.color: strokeColor
+      border.width: strokeWidth
+      antialiasing: true
+
+      x: index * xScale
+      y: root.height - height
+
+      width: xScale * 0.5
+      height: root.height * amp
+
+      Behavior on height {
+        SmoothedAnimation {
+          duration: 5
+        }
+      }
+    }
+  }
+
+  Repeater {
+    model: values.length
+    Rectangle {
+      property real amp: values[index]
+
+      color: fillColor
+      border.color: strokeColor
+      border.width: strokeWidth
+      antialiasing: true
+
+      x: (values.length + index) * xScale
+      y: root.height - height
+
+      width: xScale * 0.5
+      height: root.height * amp
+
+      Behavior on height {
+        SmoothedAnimation {
+          duration: 5
+        }
+      }
+    }
+  }
+
+}