feat: custom playback rate

src/assets/version.json

@@ -1,3 +1,3 @@
 {
-  "date": "2024-01-21"
+  "date": "2024-07-07"
 }

src/components/Player.vue

@@ -43,6 +43,11 @@ async function Stream() {
         codecs = store.getItem('codec');
 
       await audioPlayer.attach(audio.value);
+      
+      for (const [playerKey, audioKey] of Object.entries({
+        rate: 'playbackRate',
+        pitch: 'preservesPitch',
+      })) audio.value[audioKey] = player.state[playerKey];
 
       audioPlayer.getNetworkingEngine().registerRequestFilter((_type, req) => {
         const headers = req.headers;
@@ -158,10 +163,17 @@ watch(() => player.state.streams, Stream);
 
 watch(
   () => player.state.currentTime,
-  () => {
-    console.log(player.state.currentTime);
-    audio.value.currentTime = player.state.currentTime;
-  },
+  cur => audio.value.currentTime = cur,
+);
+
+watch(
+  () => player.state.rate,
+  cur => audio.value.playbackRate = cur,
+);
+
+watch(
+  () => player.state.pitch,
+  cur => audio.value.preservesPitch = cur,
 );
 
 onMounted(() => {

src/components/Prefs.vue

@@ -10,6 +10,7 @@ import {
 
 import { useStore, useAutoTheme } from '@/scripts/util.js';
 import { SUPPORTED_LOCALES, useI18n } from '@/stores/misc.js';
+import { usePlayer } from '@/stores/player.js';
 
 const date = ref('unknown');
 
@@ -19,6 +20,7 @@ import('@/assets/version.json').then(v => {
 
 const { t, setupLocale } = useI18n(),
   store = useStore(),
+  player = usePlayer(),
   instances = ref([]),
   hypInstances = ref([]),
   next = ref(false),
@@ -81,6 +83,11 @@ function setPRM(prm) {
   else document.body.classList.remove('prm');
 }
 
+function setPitch(pitch) {
+  setStore('pitch', pitch);
+  player.state.pitch = pitch;
+}
+
 function getStoreBool(key, ele, def) {
   ele.value = getStore(key) || def;
 }
@@ -268,6 +275,33 @@ onMounted(() => {
       @change="setStore('vol', $event.target.value)" />
   </div>
 
+  <div class="left">
+    <label for="pref-playback-rate">{{ t('pref.playback_rate') }}</label>
+    <input
+      type="number"
+      name="pref-playback-rate"
+      id="pref-playback-rate"
+      class="input"
+      min="0.1"
+      step="0.1"
+      :value="getStore('rate') || 1"
+      @change="(e) => {
+        setStore('rate', e.target.value);
+        player.state.rate = e.target.value;
+      }" />
+  </div>
+
+  <div class="left">
+    <input
+      type="checkbox"
+      name="pref-chk-preserve-pitch"
+      id="pref-chk-preserve-pitch"
+      class="input"
+      @change="setPitch($event.target.checked)"
+      v-model="player.state.pitch" />
+    <label for="pref-chk-preserve-pitch">{{ t('pref.preserves_pitch') }}</label>
+  </div>
+
   <h2>{{ t('instances.hyp') }}</h2>
 
   <select

src/locales/en.json

@@ -93,7 +93,9 @@
     "home": "Home",
     "explore": "Explore",
     "charts": "Charts",
-    "library": "Library"
+    "library": "Library",
+    "playback_rate": "Playback Rate",
+    "preserves_pitch": "Preserve Pitch"
   },
   "info": {
     "see_all": "See All",

src/stores/player.js

@@ -148,6 +148,8 @@ export const usePlayer = defineStore('player', () => {
     info: false,
     add: false,
     vol: store.vol ? store.vol / 100 : 1,
+    rate: parseFloat(store.rate || '1'),
+    pitch: store.pitch != 'false',
   });
 
   function toggle(i) {