From 1d4a3468ee4897965d8361cf5c15a1eaadd537c2 Mon Sep 17 00:00:00 2001
From: wvffle <funkwhale@wvffle.net>
Date: Fri, 29 Jul 2022 11:29:08 +0000
Subject: [PATCH] Revert "Rewrite player logic"

This reverts commit ec630a234ab5ea0dccddaf06c462536bbf1ed329.
---
 front/package.json                            |   2 -
 front/src/components/Queue.vue                |  61 +--
 .../src/components/audio/ChannelEntryCard.vue |   4 +-
 front/src/components/audio/PlayButton.vue     |   2 +-
 front/src/components/audio/Player.vue         | 108 ++---
 front/src/components/audio/VolumeControl.vue  |  16 +-
 .../components/audio/podcast/MobileRow.vue    |   4 +-
 .../src/components/audio/track/MobileRow.vue  |   4 +-
 front/src/components/audio/track/Row.vue      |   4 +-
 front/src/composables/audio/usePlayOptions.ts |  33 +-
 front/src/composables/audio/usePlayer.ts      | 265 ++++++++++++
 front/src/composables/audio/useQueue.ts       | 110 +++--
 front/src/composables/audio/useSound.ts       | 160 ++++++++
 front/src/composables/audio/useSoundCache.ts  |  38 ++
 .../src/composables/audio/useTrackSources.ts  |  18 +-
 .../composables/audio/useWebAudioPlayer.ts    | 377 ------------------
 front/src/init/mediaSession.ts                |  11 +-
 front/src/store/index.ts                      |  68 ++--
 front/src/store/player.ts                     | 130 ++++--
 front/src/store/queue.ts                      | 211 +++-------
 front/yarn.lock                               |  26 +-
 21 files changed, 859 insertions(+), 793 deletions(-)
 create mode 100644 front/src/composables/audio/usePlayer.ts
 create mode 100644 front/src/composables/audio/useSound.ts
 create mode 100644 front/src/composables/audio/useSoundCache.ts
 delete mode 100644 front/src/composables/audio/useWebAudioPlayer.ts

diff --git a/front/package.json b/front/package.json
index 19cda8790..3b0b8e075 100644
--- a/front/package.json
+++ b/front/package.json
@@ -35,7 +35,6 @@
     "howler": "2.2.3",
     "js-logger": "1.6.1",
     "lodash-es": "4.17.21",
-    "lru-cache": "^7.13.1",
     "mavon-editor": "^3.0.0-beta",
     "moment": "2.29.4",
     "qs": "6.11.0",
@@ -43,7 +42,6 @@
     "sanitize-html": "2.7.1",
     "sass": "1.54.0",
     "showdown": "2.1.0",
-    "standardized-audio-context": "^25.3.29",
     "text-clipper": "2.2.0",
     "tiptap-markdown": "^0.5.0",
     "transliteration": "2.3.5",
diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 759f8a0f9..7d82055f5 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -11,7 +11,7 @@ import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import { whenever, watchDebounced, useCurrentElement, useScrollLock } from '@vueuse/core'
 import { useGettext } from 'vue3-gettext'
 import useQueue from '~/composables/audio/useQueue'
-import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer'
+import usePlayer from '~/composables/audio/usePlayer'
 
 import VirtualList from '~/components/vui/list/VirtualList.vue'
 import QueueItem from '~/components/QueueItem.vue'
@@ -24,32 +24,32 @@ const scrollLock = useScrollLock(document.body)
 const store = useStore()
 
 const {
+  playing,
+  loading: isLoadingAudio,
+  errored,
+  duration,
+  durationFormatted,
+  currentTimeFormatted,
+  progress,
+  bufferProgress,
+  currentTime,
+  pause,
+  resume
+} = usePlayer()
+
+const {
+  currentTrack,
+  hasNext,
   isEmpty: emptyQueue,
   tracks,
   reorder,
   endsIn: timeLeft,
+  currentIndex,
   removeTrack,
-  clear
-} = useQueue()
-
-const currentIndex = computed(() => store.state.queue.currentIndex)
-const currentTrack = computed(() => store.state.queue.tracks[currentIndex.value])
-const hasNext = computed(() => store.getters['queue/hasNext'])
-const durationFormatted = computed(() => time.parse(Math.floor(duration.value)))
-const currentTimeFormatted = computed(() => time.parse(Math.floor(currentTime.value)))
-
-const {
-  play,
-  pause,
+  clear,
   next,
-  previous,
-  playing,
-  errored,
-  progress,
-  duration,
-  time: currentTime,
-  loading: isLoadingAudio
-} = useWebAudioPlayer()
+  previous
+} = useQueue()
 
 const labels = computed(() => ({
   queue: $pgettext('*/*/*', 'Queue'),
@@ -105,12 +105,13 @@ router.beforeEach(() => store.commit('ui/queueFocused', null))
 
 const progressBar = ref()
 const touchProgress = (event: MouseEvent) => {
-  const percent = (event.clientX - ((event.target as Element).closest('.progress')?.getBoundingClientRect().left ?? 0)) / progressBar.value.offsetWidth
-  progress.value = percent * 100
+  const time = ((event.clientX - (event.target as Element).getBoundingClientRect().left) / progressBar.value.offsetWidth) * duration.value
+  currentTime.value = time
 }
 
-const playIndex = (index: number) => {
-  store.state.queue.currentIndex = index
+const play = (index: unknown) => {
+  store.dispatch('queue/currentIndex', index as number)
+  resume()
 }
 
 const getCover = (track: Track) => {
@@ -254,8 +255,12 @@ const reorderTracks = async (from: number, to: number) => {
               <div
                 ref="progressBar"
                 :class="['ui', 'small', 'vibrant', {'indicating': isLoadingAudio}, 'progress']"
-                @click.stop.prevent="touchProgress"
+                @click="touchProgress"
               >
+                <div
+                  class="buffer bar"
+                  :style="{ 'transform': `translateX(${bufferProgress - 100}%)` }"
+                />
                 <div
                   class="position bar"
                   :style="{ 'transform': `translateX(calc(${progress}% - 100%)` }"
@@ -308,7 +313,7 @@ const reorderTracks = async (from: number, to: number) => {
               :title="labels.play"
               :aria-label="labels.play"
               class="control"
-              @click.prevent.stop="play"
+              @click.prevent.stop="resume"
             >
               <i :class="['ui', 'play', {'disabled': !currentTrack}, 'icon']" />
             </span>
@@ -390,7 +395,7 @@ const reorderTracks = async (from: number, to: number) => {
               :index="index"
               :source="item"
               :class="[...classList, currentIndex === index && 'active']"
-              @play="playIndex"
+              @play="play"
               @remove="removeTrack"
             />
           </template>
diff --git a/front/src/components/audio/ChannelEntryCard.vue b/front/src/components/audio/ChannelEntryCard.vue
index 1e0dde091..cbe9abeae 100644
--- a/front/src/components/audio/ChannelEntryCard.vue
+++ b/front/src/components/audio/ChannelEntryCard.vue
@@ -4,7 +4,7 @@ import type { Cover, Track } from '~/types'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import useQueue from '~/composables/audio/useQueue'
-import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer'
+import usePlayer from '~/composables/audio/usePlayer'
 import { computed } from 'vue'
 
 interface Props {
@@ -16,7 +16,7 @@ interface Props {
 const props = defineProps<Props>()
 
 const { currentTrack } = useQueue()
-const { playing } = useWebAudioPlayer()
+const { playing } = usePlayer()
 
 const cover = computed(() => props.entry.cover ?? null)
 const duration = computed(() => props.entry.uploads.find(upload => upload.duration)?.duration ?? null)
diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue
index 9dc98186b..d2575cf6c 100644
--- a/front/src/components/audio/PlayButton.vue
+++ b/front/src/components/audio/PlayButton.vue
@@ -155,7 +155,7 @@ const openMenu = () => {
           data-ref="enqueue"
           :disabled="!playable"
           :title="labels.addToQueue"
-          @click.stop.prevent="enqueue()"
+          @click.stop.prevent="enqueue"
         >
           <i class="plus icon" /><translate translate-context="*/Queue/Dropdown/Button/Label/Short">Add to queue</translate>
         </button>
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index d4d6a991b..3c3123dc0 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { LoopState } from '~/store/player'
-
-import time from '~/utils/time'
+// TODO (wvffle): Move most of this stufff to usePlayer
 import { useStore } from '~/store'
 import VolumeControl from './VolumeControl.vue'
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
@@ -9,9 +7,9 @@ import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
 import { computed, ref } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { useMouse, useElementSize } from '@vueuse/core'
+import { useMouse, useWindowSize } from '@vueuse/core'
 import useQueue from '~/composables/audio/useQueue'
-import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer'
+import usePlayer from '~/composables/audio/usePlayer'
 
 const store = useStore()
 const { $pgettext } = useGettext()
@@ -21,41 +19,40 @@ const toggleMobilePlayer = () => {
 }
 
 const {
-  currentIndex,
-  currentTrack,
+  isShuffling,
+  shuffle,
+  previous,
+  isEmpty: queueIsEmpty,
   hasNext,
   hasPrevious,
+  currentTrack,
+  currentIndex,
   tracks,
-  isEmpty: queueIsEmpty,
-  isShuffling,
-  isShuffled,
-  unshuffle,
-  shuffle,
-  clear
+  next
 } = useQueue()
 
 const {
-  toggleMute,
-  play,
-  pause,
-  seek,
-  next,
-  previous,
   playing,
+  loading: isLoadingAudio,
+  looping,
+  currentTime,
   progress,
+  durationFormatted,
+  currentTimeFormatted,
+  bufferProgress,
   duration,
-  time: currentTime,
-  loading: isLoadingAudio
-} = useWebAudioPlayer()
-
-const durationFormatted = computed(() => time.parse(Math.floor(duration.value)))
-const currentTimeFormatted = computed(() => time.parse(Math.floor(currentTime.value)))
+  toggleMute,
+  seek,
+  togglePlayback,
+  resume,
+  pause
+} = usePlayer()
 
 // Key binds
 onKeyboardShortcut('e', toggleMobilePlayer)
-onKeyboardShortcut('p', () => playing.value ? pause() : play())
+onKeyboardShortcut('p', togglePlayback)
 onKeyboardShortcut('s', shuffle)
-onKeyboardShortcut('q', () => clear)
+onKeyboardShortcut('q', () => store.dispatch('queue/clean'))
 onKeyboardShortcut('m', () => toggleMute)
 onKeyboardShortcut('l', () => store.commit('player/toggleLooping'))
 onKeyboardShortcut('f', () => store.dispatch('favorites/toggle', currentTrack.value?.id))
@@ -89,19 +86,22 @@ const labels = computed(() => ({
   addArtistContentFilter: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…')
 }))
 
+const setCurrentTime = (time: number) => {
+  currentTime.value = time
+}
+
 const switchTab = () => {
   store.commit('ui/queueFocused', store.state.ui.queueFocused === 'player' ? 'queue' : 'player')
 }
 
 const progressBar = ref()
 const touchProgress = (event: MouseEvent) => {
-  const percent = (event.clientX - ((event.target as Element).closest('.progress')?.getBoundingClientRect().left ?? 0)) / progressBar.value.offsetWidth
-  progress.value = percent * 100
+  const time = ((event.clientX - ((event.target as Element).closest('.progress')?.getBoundingClientRect().left ?? 0)) / progressBar.value.offsetWidth) * duration.value
+  currentTime.value = time
 }
 
-// TODO (wvffle): Use createSharedComposable
 const { x } = useMouse()
-const { width: progressWidth } = useElementSize(progressBar)
+const { width: screenWidth } = useWindowSize()
 </script>
 
 <template>
@@ -128,13 +128,17 @@ const { width: progressWidth } = useElementSize(progressBar)
         :class="['ui', 'top attached', 'small', 'inverted', {'indicating': isLoadingAudio}, 'progress']"
         @click.prevent.stop="touchProgress"
       >
+        <div
+          class="buffer bar"
+          :style="{ 'transform': `translateX(${bufferProgress - 100}%)` }"
+        />
         <div
           class="position bar"
           :style="{ 'transform': `translateX(calc(${progress}% - 100%)` }"
         />
         <div
           class="seek bar"
-          :style="{ 'transform': `translateX(${x / progressWidth * 100 - 100}%)` }"
+          :style="{ 'transform': `translateX(${x / screenWidth * 100 - 100}%)` }"
         />
       </div>
       <div class="controls-row">
@@ -253,7 +257,7 @@ const { width: progressWidth } = useElementSize(progressBar)
             :aria-label="labels.previous"
             :disabled="!hasPrevious"
             class="circular button control tablet-and-up"
-            @click.prevent.stop="previous"
+            @click.prevent.stop="$store.dispatch('queue/previous')"
           >
             <i :class="['ui', 'large', {'disabled': !hasPrevious}, 'backward step', 'icon']" />
           </button>
@@ -262,7 +266,7 @@ const { width: progressWidth } = useElementSize(progressBar)
             :title="labels.play"
             :aria-label="labels.play"
             class="circular button control"
-            @click.prevent.stop="play"
+            @click.prevent.stop="resume"
           >
             <i :class="['ui', 'big', 'play', {'disabled': !currentTrack}, 'icon']" />
           </button>
@@ -280,7 +284,7 @@ const { width: progressWidth } = useElementSize(progressBar)
             :aria-label="labels.next"
             :disabled="!hasNext"
             class="circular button control"
-            @click.prevent.stop="next"
+            @click.prevent.stop="$store.dispatch('queue/next')"
           >
             <i :class="['ui', 'large', {'disabled': !hasNext}, 'forward step', 'icon']" />
           </button>
@@ -291,7 +295,7 @@ const { width: progressWidth } = useElementSize(progressBar)
             <template v-if="!isLoadingAudio">
               <span
                 class="start"
-                @click.stop.prevent="progress = 0"
+                @click.stop.prevent="setCurrentTime(0)"
               >
                 {{ currentTimeFormatted }}
               </span>
@@ -304,53 +308,57 @@ const { width: progressWidth } = useElementSize(progressBar)
           <div class="group">
             <volume-control class="expandable" />
             <button
-              v-if="$store.state.player.looping === LoopState.NO_LOOP"
+              v-if="looping === 0"
               class="circular control button"
               :title="labels.loopingDisabled"
               :aria-label="labels.loopingDisabled"
               :disabled="!currentTrack"
-              @click.prevent.stop="$store.commit('player/toggleLooping')"
+              @click.prevent.stop="$store.commit('player/looping', 1)"
             >
               <i :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'icon']" />
             </button>
             <button
-              v-if="$store.state.player.looping === LoopState.LOOP_CURRENT"
-              class="looping circular control button"
+              v-if="looping === 1"
               :title="labels.loopingSingle"
               :aria-label="labels.loopingSingle"
               :disabled="!currentTrack"
-              @click.prevent.stop="$store.commit('player/toggleLooping')"
+              class="looping circular control button"
+              @click.prevent.stop="$store.commit('player/looping', 2)"
             >
-              <i class="repeat icon">
+              <i
+                class="repeat icon"
+              >
                 <span class="ui circular tiny vibrant label">1</span>
               </i>
             </button>
             <button
-              v-if="$store.state.player.looping === LoopState.LOOP_QUEUE"
+              v-if="looping === 2"
               class="looping circular control button"
               :title="labels.loopingWhole"
               :aria-label="labels.loopingWhole"
               :disabled="!currentTrack"
-              @click.prevent.stop="$store.commit('player/toggleLooping')"
+              @click.prevent.stop="$store.commit('player/looping', 0)"
             >
-              <i class="repeat icon">
+              <i
+                class="repeat icon"
+              >
                 <span class="ui circular tiny vibrant label">&infin;</span>
               </i>
             </button>
             <button
-              class="circular control button shuffling"
-              :disabled="queueIsEmpty"
+              class="circular control button"
+              :disabled="queueIsEmpty || null"
               :title="labels.shuffle"
               :aria-label="labels.shuffle"
-              @click.prevent.stop="() => isShuffled ? unshuffle() : shuffle()"
+              @click.prevent.stop="shuffle()"
             >
               <div
                 v-if="isShuffling"
-                class="ui inline inverted tiny active loader"
+                class="ui inline shuffling inverted tiny active loader"
               />
               <i
                 v-else
-                :class="['ui', 'random', {disabled: queueIsEmpty, vibrant: isShuffled}, 'icon']"
+                :class="['ui', 'random', {'disabled': queueIsEmpty}, 'icon']"
               />
             </button>
           </div>
diff --git a/front/src/components/audio/VolumeControl.vue b/front/src/components/audio/VolumeControl.vue
index b31e561af..1bb7ae64f 100644
--- a/front/src/components/audio/VolumeControl.vue
+++ b/front/src/components/audio/VolumeControl.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
 import { useStore } from '~/store'
+import { useGettext } from 'vue3-gettext'
 import { useTimeoutFn } from '@vueuse/core'
-import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer'
+import usePlayer from '~/composables/audio/usePlayer'
 
-const { mute, unmute } = useWebAudioPlayer()
 const store = useStore()
-
-const sliderVolume = computed({
-  get: () => store.state.player.volume * 100,
-  set: (value) => store.commit('player/volume', value / 100)
-})
+const { volume, mute, unmute } = usePlayer()
 
 const expanded = ref(false)
 const volumeSteps = 100
 
+const sliderVolume = computed({
+  get: () => volume.value * volumeSteps,
+  set: (value) => store.commit('player/volume', value / volumeSteps)
+})
+
 const { $pgettext } = useGettext()
 const labels = computed(() => ({
   unmute: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Unmute'),
diff --git a/front/src/components/audio/podcast/MobileRow.vue b/front/src/components/audio/podcast/MobileRow.vue
index 7bb25a8c9..0ff636dea 100644
--- a/front/src/components/audio/podcast/MobileRow.vue
+++ b/front/src/components/audio/podcast/MobileRow.vue
@@ -9,7 +9,7 @@ import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackModal from '~/components/audio/track/Modal.vue'
 import usePlayOptions from '~/composables/audio/usePlayOptions'
 import useQueue from '~/composables/audio/useQueue'
-import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer'
+import usePlayer from '~/composables/audio/usePlayer'
 
 interface Props extends PlayOptionsProps {
   track: Track
@@ -39,7 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
 const showTrackModal = ref(false)
 
 const { currentTrack } = useQueue()
-const { playing } = useWebAudioPlayer()
+const { playing } = usePlayer()
 const { activateTrack } = usePlayOptions(props)
 
 const { $pgettext } = useGettext()
diff --git a/front/src/components/audio/track/MobileRow.vue b/front/src/components/audio/track/MobileRow.vue
index d0d8b6644..75dce7e2e 100644
--- a/front/src/components/audio/track/MobileRow.vue
+++ b/front/src/components/audio/track/MobileRow.vue
@@ -9,7 +9,7 @@ import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackModal from '~/components/audio/track/Modal.vue'
 import usePlayOptions from '~/composables/audio/usePlayOptions'
 import useQueue from '~/composables/audio/useQueue'
-import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer'
+import usePlayer from '~/composables/audio/usePlayer'
 
 interface Props extends PlayOptionsProps {
   track: Track
@@ -39,7 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
 const showTrackModal = ref(false)
 
 const { currentTrack } = useQueue()
-const { playing } = useWebAudioPlayer()
+const { playing } = usePlayer()
 const { activateTrack } = usePlayOptions(props)
 
 const { $pgettext } = useGettext()
diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index 2021cde77..a42a60d06 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/front/src/components/audio/track/Row.vue
@@ -8,7 +8,7 @@ import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import usePlayOptions from '~/composables/audio/usePlayOptions'
 import useQueue from '~/composables/audio/useQueue'
-import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer'
+import usePlayer from '~/composables/audio/usePlayer'
 import { computed } from 'vue'
 
 interface Props extends PlayOptionsProps {
@@ -44,7 +44,7 @@ const props = withDefaults(defineProps<Props>(), {
   displayActions: true
 })
 
-const { playing, loading } = useWebAudioPlayer()
+const { playing, loading } = usePlayer()
 const { currentTrack } = useQueue()
 const { activateTrack } = usePlayOptions(props)
 
diff --git a/front/src/composables/audio/usePlayOptions.ts b/front/src/composables/audio/usePlayOptions.ts
index 12fa348cb..b220d912f 100644
--- a/front/src/composables/audio/usePlayOptions.ts
+++ b/front/src/composables/audio/usePlayOptions.ts
@@ -5,7 +5,7 @@ import { useStore } from '~/store'
 import { useGettext } from 'vue3-gettext'
 import { computed, markRaw, ref } from 'vue'
 import axios from 'axios'
-import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer'
+import usePlayer from '~/composables/audio/usePlayer'
 import useQueue from '~/composables/audio/useQueue'
 import { useCurrentElement } from '@vueuse/core'
 import jQuery from 'jquery'
@@ -26,8 +26,8 @@ export default (props: PlayOptionsProps) => {
   // TODO (wvffle): Test if we can defineProps in composable
 
   const store = useStore()
-  const { play, pause, next, playing } = useWebAudioPlayer()
-  const { currentTrack, clear } = useQueue()
+  const { resume, pause, playing } = usePlayer()
+  const { currentTrack } = useQueue()
 
   const playable = computed(() => {
     if (props.isPlayable) {
@@ -133,25 +133,32 @@ export default (props: PlayOptionsProps) => {
   }
 
   const el = useCurrentElement()
-  const enqueue = async (skip = false, index?: number) => {
+  const enqueue = async () => {
     jQuery(el.value).find('.ui.dropdown').dropdown('hide')
+
+    const tracks = await getPlayableTracks()
+    await store.dispatch('queue/appendMany', { tracks })
+    addMessage(tracks)
+  }
+
+  const enqueueNext = async (next = false) => {
+    jQuery(el.value).find('.ui.dropdown').dropdown('hide')
+
     const tracks = await getPlayableTracks()
 
     const wasEmpty = store.state.queue.tracks.length === 0
+    await store.dispatch('queue/appendMany', { tracks, index: store.state.queue.currentIndex + 1 })
 
-    await store.dispatch('queue/appendMany', { tracks, index })
-
-    if (skip && !wasEmpty) {
-      await next()
+    if (next && !wasEmpty) {
+      await store.dispatch('queue/next')
+      resume()
     }
 
     addMessage(tracks)
   }
 
-  const enqueueNext = async (skip?: boolean) => enqueue(skip, store.state.queue.currentIndex + 1)
-
   const replacePlay = async () => {
-    await clear()
+    store.dispatch('queue/clean')
 
     jQuery(el.value).find('.ui.dropdown').dropdown('hide')
 
@@ -166,7 +173,7 @@ export default (props: PlayOptionsProps) => {
       store.dispatch('queue/currentIndex', 0)
     }
 
-    play()
+    resume()
     addMessage(tracks)
   }
 
@@ -177,7 +184,7 @@ export default (props: PlayOptionsProps) => {
         return pause()
       }
 
-      return play()
+      return resume()
     }
 
     replacePlay()
diff --git a/front/src/composables/audio/usePlayer.ts b/front/src/composables/audio/usePlayer.ts
new file mode 100644
index 000000000..313e2d0cb
--- /dev/null
+++ b/front/src/composables/audio/usePlayer.ts
@@ -0,0 +1,265 @@
+import type { Track } from '~/types'
+
+import { computed, watchEffect, ref, watch } from 'vue'
+import { Howler } from 'howler'
+import { useRafFn, useTimeoutFn } from '@vueuse/core'
+import useQueue from '~/composables/audio/useQueue'
+import useSound from '~/composables/audio/useSound'
+import toLinearVolumeScale from '~/composables/audio/toLinearVolumeScale'
+import store from '~/store'
+import axios from 'axios'
+
+const PRELOAD_DELAY = 15
+
+const { currentSound, loadSound, onSoundProgress } = useSound()
+const { isShuffling, currentTrack, currentIndex } = useQueue()
+
+const looping = computed(() => store.state.player.looping)
+const playing = computed(() => store.state.player.playing)
+const loading = computed(() => store.state.player.isLoadingAudio)
+const errored = computed(() => store.state.player.errored)
+const focused = computed(() => store.state.ui.queueFocused === 'player')
+
+// Cache sound if we have currentTrack available
+if (currentTrack.value) {
+  loadSound(currentTrack.value)
+}
+
+// Playing
+const playTrack = async (track: Track, oldTrack?: Track) => {
+  const oldSound = currentSound.value
+
+  // TODO (wvffle): Move oldTrack to watcher
+  if (oldSound && track !== oldTrack) {
+    oldSound.stop()
+  }
+
+  if (!track) {
+    return
+  }
+
+  if (!isShuffling.value) {
+    if (!track.uploads.length) {
+      // we don't have any information for this track, we need to fetch it
+      track = await axios.get(`tracks/${track.id}/`)
+        .then(response => response.data, () => null)
+    }
+
+    if (track === null) {
+      store.commit('player/isLoadingAudio', false)
+      store.dispatch('player/trackErrored')
+      return
+    }
+
+    currentSound.value = loadSound(track)
+
+    if (playing.value) {
+      currentSound.value.play()
+      store.commit('player/playing', true)
+    } else {
+      store.commit('player/isLoadingAudio', false)
+    }
+
+    store.commit('player/errored', false)
+    store.dispatch('player/updateProgress', 0)
+  }
+}
+
+const { start: loadTrack, stop: cancelLoading } = useTimeoutFn((track, oldTrack) => {
+  playTrack(track as Track, oldTrack as Track)
+}, 100, { immediate: false }) as {
+  start: (a: Track, b: Track) => void
+  stop: () => void
+}
+
+watch(currentTrack, (track, oldTrack) => {
+  cancelLoading()
+  currentSound.value?.pause()
+  store.commit('player/isLoadingAudio', true)
+  loadTrack(track, oldTrack)
+})
+
+// Volume
+const volume = computed({
+  get: () => store.state.player.volume,
+  set: (value) => store.commit('player/volume', value)
+})
+
+watchEffect(() => Howler.volume(toLinearVolumeScale(volume.value)))
+
+const mute = () => store.dispatch('player/mute')
+const unmute = () => store.dispatch('player/unmute')
+const toggleMute = () => store.dispatch('player/toggleMute')
+
+// Time and duration
+const duration = computed(() => store.state.player.duration)
+const currentTime = computed({
+  get: () => store.state.player.currentTime,
+  set: (time) => {
+    if (time < 0 || time > duration.value) {
+      return
+    }
+
+    if (!currentSound.value?.getSource() || time === currentSound.value.seek()) {
+      return
+    }
+
+    currentSound.value.seek(time)
+
+    // Update progress immediately to ensure updated UI
+    progress.value = time
+  }
+})
+
+const durationFormatted = computed(() => store.getters['player/durationFormatted'])
+const currentTimeFormatted = computed(() => store.getters['player/currentTimeFormatted'])
+
+// Progress
+const progress = computed({
+  get: () => store.getters['player/progress'],
+  set: (time) => {
+    if (currentSound.value?.state() === 'loaded') {
+      store.state.player.currentTime = time
+
+      const duration = currentSound.value.duration()
+      currentSound.value.triggerSoundProgress(time, duration)
+    }
+  }
+})
+
+const bufferProgress = computed(() => store.state.player.bufferProgress)
+onSoundProgress(({ node, time, duration }) => {
+  const toPreload = store.state.queue.tracks[currentIndex.value + 1]
+  if (!nextTrackPreloaded.value && toPreload && (time > PRELOAD_DELAY || duration - time < 30)) {
+    loadSound(toPreload)
+    nextTrackPreloaded.value = true
+  }
+
+  if (time > duration / 2) {
+    if (!isListeningSubmitted.value) {
+      store.dispatch('player/trackListened', currentTrack.value)
+      isListeningSubmitted.value = true
+    }
+  }
+
+  // from https://github.com/goldfire/howler.js/issues/752#issuecomment-372083163
+
+  const { buffered, currentTime } = node
+
+  let range = 0
+  try {
+    while (buffered.start(range) >= currentTime || currentTime >= buffered.end(range)) {
+      range += 1
+    }
+  } catch (IndexSizeError) {
+    return
+  }
+
+  let loadPercentage
+
+  const start = buffered.start(range)
+  const end = buffered.end(range)
+
+  if (range === 0) {
+    // easy case, no user-seek
+    const loadStartPercentage = start / node.duration
+    const loadEndPercentage = end / node.duration
+    loadPercentage = loadEndPercentage - loadStartPercentage
+  } else {
+    const loaded = end - start
+    const remainingToLoad = node.duration - start
+    // user seeked a specific position in the audio, our progress must be
+    // computed based on the remaining portion of the track
+    loadPercentage = loaded / remainingToLoad
+  }
+
+  if (loadPercentage * 100 === bufferProgress.value) {
+    return
+  }
+
+  store.commit('player/bufferProgress', loadPercentage * 100)
+})
+
+const observeProgress = ref(false)
+useRafFn(() => {
+  if (observeProgress.value && currentSound.value?.state() === 'loaded') {
+    progress.value = currentSound.value.seek()
+  }
+})
+
+watch(playing, async (isPlaying) => {
+  if (currentSound.value) {
+    if (isPlaying) {
+      currentSound.value.play()
+    } else {
+      currentSound.value.pause()
+    }
+  } else {
+    await playTrack(currentTrack.value)
+  }
+
+  observeProgress.value = isPlaying
+})
+
+const isListeningSubmitted = ref(false)
+const nextTrackPreloaded = ref(false)
+watch(currentTrack, () => (nextTrackPreloaded.value = false))
+
+// Controls
+const pause = () => store.dispatch('player/pausePlayback')
+const resume = () => store.dispatch('player/resumePlayback')
+
+const { next } = useQueue()
+const seek = (step: number) => {
+  // seek right
+  if (step > 0) {
+    if (currentTime.value + step < duration.value) {
+      store.dispatch('player/updateProgress', (currentTime.value + step))
+    } else {
+      next()
+    }
+
+    return
+  }
+
+  // seek left
+  const position = Math.max(currentTime.value + step, 0)
+  store.dispatch('player/updateProgress', position)
+}
+
+const togglePlayback = () => {
+  if (playing.value) return pause()
+  return resume()
+}
+
+export default () => {
+  return {
+    looping,
+    playing,
+    loading,
+    errored,
+    focused,
+    isListeningSubmitted,
+
+    playTrack,
+
+    volume,
+    mute,
+    unmute,
+    toggleMute,
+
+    duration,
+    currentTime,
+
+    durationFormatted,
+    currentTimeFormatted,
+
+    progress,
+    bufferProgress,
+
+    pause,
+    resume,
+    seek,
+    togglePlayback
+  }
+}
diff --git a/front/src/composables/audio/useQueue.ts b/front/src/composables/audio/useQueue.ts
index 31b7146c6..8eceb1e44 100644
--- a/front/src/composables/audio/useQueue.ts
+++ b/front/src/composables/audio/useQueue.ts
@@ -1,19 +1,35 @@
-import { useTimeAgo, useNow } from '@vueuse/core'
+import type { Track } from '~/types'
+
+import { useTimeoutFn, useThrottleFn, useTimeAgo, useNow, whenever } from '@vueuse/core'
+import { Howler } from 'howler'
 import { gettext } from '~/init/locale'
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 import { sum } from 'lodash-es'
 import store from '~/store'
 
+const { $pgettext } = gettext
+
+const currentTrack = computed(() => store.getters['queue/currentTrack'])
 const currentIndex = computed(() => store.state.queue.currentIndex)
-const currentTrack = computed(() => store.state.queue.tracks[currentIndex.value])
 const hasNext = computed(() => store.getters['queue/hasNext'])
 const hasPrevious = computed(() => store.getters['queue/hasPrevious'])
-const tracks = computed(() => store.state.queue.tracks)
-const isShuffling = computed(() => !!store.state.queue.shuffleAbortController)
-const isShuffled = computed(() => !!store.state.queue.unshuffled.length)
-const isEmpty = computed(() => tracks.value.length === 0)
-const clear = () => store.dispatch('queue/clean')
+
+const isEmpty = computed(() => store.getters['queue/isEmpty'])
+whenever(isEmpty, () => Howler.unload())
+
 const removeTrack = (index: number) => store.dispatch('queue/cleanTrack', index)
+const clear = () => store.dispatch('queue/clean')
+
+const next = () => store.dispatch('queue/next')
+const previous = () => store.dispatch('queue/previous')
+
+const focused = computed(() => store.state.ui.queueFocused === 'queue')
+
+//
+// Track list
+//
+const tracks = computed<Track[]>(() => store.state.queue.tracks)
+
 const reorder = (oldIndex: number, newIndex: number) => {
   store.commit('queue/reorder', {
     oldIndex,
@@ -23,22 +39,30 @@ const reorder = (oldIndex: number, newIndex: number) => {
 
 //
 // Shuffle
-const { $pgettext } = gettext
-const shuffle = async () => {
-  await store.dispatch('queue/shuffle')
-  store.commit('ui/addMessage', {
-    content: $pgettext('Content/Queue/Message', 'Queue shuffled!'),
-    date: new Date()
-  })
-}
+//
+const isShuffling = ref(false)
 
-const unshuffle = async () => {
-  await store.dispatch('queue/unshuffle')
-  store.commit('ui/addMessage', {
-    content: $pgettext('Content/Queue/Message', 'Queue order restored!'),
-    date: new Date()
-  })
-}
+const forceShuffle = useThrottleFn(() => {
+  isShuffling.value = true
+
+  useTimeoutFn(async () => {
+    await store.dispatch('queue/shuffle')
+    store.commit('ui/addMessage', {
+      content: $pgettext('Content/Queue/Message', 'Queue shuffled!'),
+      date: new Date()
+    })
+
+    isShuffling.value = false
+  }, 100)
+})
+
+const shuffle = useThrottleFn(() => {
+  if (isShuffling.value || isEmpty.value) {
+    return
+  }
+
+  return forceShuffle()
+}, 101, false)
 
 //
 // Time left
@@ -56,19 +80,27 @@ const endsIn = useTimeAgo(computed(() => {
   return date
 }))
 
-export default () => ({
-  currentIndex,
-  currentTrack,
-  hasNext,
-  hasPrevious,
-  tracks,
-  isEmpty,
-  shuffle,
-  unshuffle,
-  isShuffling,
-  isShuffled,
-  endsIn,
-  clear,
-  removeTrack,
-  reorder
-})
+export default () => {
+  return {
+    currentTrack,
+    currentIndex,
+    hasNext,
+    hasPrevious,
+    isEmpty,
+    isShuffling,
+
+    removeTrack,
+    clear,
+    next,
+    previous,
+
+    tracks,
+    reorder,
+
+    shuffle,
+    forceShuffle,
+
+    endsIn,
+    focused
+  }
+}
diff --git a/front/src/composables/audio/useSound.ts b/front/src/composables/audio/useSound.ts
new file mode 100644
index 000000000..7648b733a
--- /dev/null
+++ b/front/src/composables/audio/useSound.ts
@@ -0,0 +1,160 @@
+import type { Track } from '~/types'
+
+import { ref, computed } from 'vue'
+import { Howl } from 'howler'
+import useTrackSources from '~/composables/audio/useTrackSources'
+import useSoundCache from '~/composables/audio/useSoundCache'
+import usePlayer from '~/composables/audio/usePlayer'
+import store from '~/store'
+import { createEventHook, useThrottleFn } from '@vueuse/core'
+
+interface Sound {
+  id?: number
+  howl: Howl
+  stop: () => void
+  play: () => void
+  pause: () => void
+  state: () => 'unloaded' | 'loading' | 'loaded'
+  seek: (time?: number) => number
+  duration: () => number
+  getSource: () => boolean
+  triggerSoundProgress: (time: number, duration: number) => void
+}
+
+const soundCache = useSoundCache()
+const currentTrack = computed(() => store.getters['queue/currentTrack'])
+const looping = computed(() => store.state.player.looping)
+
+const currentSound = ref()
+const soundId = ref()
+
+const soundProgress = createEventHook<{ node: HTMLAudioElement, time: number, duration: number }>()
+
+const createSound = (howl: Howl): Sound => ({
+  howl,
+  play () {
+    this.id = howl.play(this.id)
+  },
+  stop () {
+    howl.stop(this.id)
+    this.id = undefined
+  },
+  pause () {
+    howl.pause(this.id)
+  },
+  state: () => howl.state(),
+  seek: (time?: number) => howl.seek(time),
+  duration: () => howl.duration(),
+  getSource: () => (howl as any)._sounds[0],
+  triggerSoundProgress: useThrottleFn((time: number, duration: number) => {
+    const node = (howl as any)._sounds[0]?._node
+    if (node) {
+      soundProgress.trigger({ node, time, duration })
+    }
+  }, 1000)
+})
+
+const loadSound = (track: Track): Sound => {
+  const cached = soundCache.get(track.id)
+  if (cached) {
+    return createSound(cached.howl)
+  }
+
+  const sources = useTrackSources(track)
+
+  const howl = new Howl({
+    src: sources.map((source) => source.url),
+    format: sources.map((source) => source.type),
+    autoplay: false,
+    loop: false,
+    html5: true,
+    preload: true,
+
+    onend () {
+      const onlyTrack = store.state.queue.tracks.length === 1
+      if (looping.value === 1 || (onlyTrack && looping.value === 2)) {
+        currentSound.value.seek(0)
+        store.dispatch('player/updateProgress', 0)
+        soundId.value = currentSound.value.play(soundId.value)
+      } else {
+        store.dispatch('player/trackEnded', currentTrack.value)
+      }
+    },
+
+    onunlock () {
+      if (store.state.player.playing && currentSound.value) {
+        soundId.value = currentSound.value.play(soundId.value)
+      }
+    },
+
+    onload () {
+      const node = (howl as any)._sounds[0]._node as HTMLAudioElement
+
+      node.addEventListener('progress', () => {
+        if (howl !== currentSound.value) {
+          return
+        }
+
+        currentSound.value._triggerSoundProgress()
+      })
+    },
+
+    onplay () {
+      const [otherId] = (this as any)._getSoundIds()
+      const [currentId] = (currentSound.value?.howl as any)._getSoundIds() ?? []
+
+      if (otherId !== currentId) {
+        return (this as any).stop()
+      }
+
+      const time = currentSound.value.seek()
+      const duration = currentSound.value.duration()
+      if (time <= duration / 2) {
+        const { isListeningSubmitted } = usePlayer()
+        isListeningSubmitted.value = false
+      }
+
+      store.commit('player/isLoadingAudio', false)
+      store.commit('player/resetErrorCount')
+      store.commit('player/errored', false)
+      store.commit('player/duration', howl.duration())
+    },
+
+    onplayerror (soundId, error) {
+      console.error('play error', soundId, error)
+    },
+
+    onloaderror (soundId, error) {
+      soundCache.delete(track.id)
+      howl.unload()
+
+      const [otherId] = (this as any)._getSoundIds()
+      const [currentId] = (currentSound.value?.howl as any)._getSoundIds() ?? []
+
+      if (otherId !== currentId) {
+        console.error('load error', soundId, error)
+        return
+      }
+
+      console.error('Error while playing:', soundId, error)
+      store.commit('player/isLoadingAudio', false)
+      store.dispatch('player/trackErrored')
+    }
+  })
+
+  soundCache.set(track.id, {
+    id: track.id,
+    date: new Date(),
+    howl
+  })
+
+  return createSound(howl)
+}
+
+export default () => {
+  return {
+    loadSound,
+    currentSound,
+    onSoundProgress: soundProgress.on
+  }
+}
diff --git a/front/src/composables/audio/useSoundCache.ts b/front/src/composables/audio/useSoundCache.ts
new file mode 100644
index 000000000..5f0a0c242
--- /dev/null
+++ b/front/src/composables/audio/useSoundCache.ts
@@ -0,0 +1,38 @@
+import type { Howl } from 'howler'
+
+import { sortBy } from 'lodash-es'
+import { reactive, watchEffect, ref } from 'vue'
+
+const MAX_PRELOADED = 3
+
+export interface CachedSound {
+  id: string
+  date: Date
+  howl: Howl
+}
+
+const soundCache = reactive(new Map<string, CachedSound>())
+const cleaningCache = ref(false)
+
+watchEffect(() => {
+  const toRemove = soundCache.size - MAX_PRELOADED
+
+  if (toRemove > 0 && !cleaningCache.value) {
+    cleaningCache.value = true
+
+    const excess = sortBy([...soundCache.values()], [(cached: CachedSound) => cached.date])
+      .slice(0, toRemove)
+
+    for (const cached of excess) {
+      console.log('Removing cached element:', cached)
+      soundCache.delete(cached.id)
+      cached.howl.unload()
+    }
+
+    cleaningCache.value = false
+  }
+})
+
+export default () => {
+  return soundCache
+}
diff --git a/front/src/composables/audio/useTrackSources.ts b/front/src/composables/audio/useTrackSources.ts
index 7bf671e33..500cc8606 100644
--- a/front/src/composables/audio/useTrackSources.ts
+++ b/front/src/composables/audio/useTrackSources.ts
@@ -2,26 +2,16 @@ import type { Track } from '~/types'
 
 import store from '~/store'
 import updateQueryString from '~/composables/updateQueryString'
-import axios from 'axios'
 
 export interface TrackSource {
   url: string
   type: string
 }
 
-const audio = document.createElement('audio')
-const allowed = ['probably', 'maybe']
+export default (trackData: Track): TrackSource[] => {
+  const audio = document.createElement('audio')
 
-export default async (trackData: Track, abortSignal?: AbortSignal): Promise<TrackSource[]> => {
-  if (trackData.uploads.length === 0) {
-    trackData = await axios.get(`tracks/${trackData.id}/`, { signal: abortSignal })
-      .then(response => response.data)
-      .catch(() => null)
-  }
-
-  if (!trackData) {
-    return []
-  }
+  const allowed = ['probably', 'maybe']
 
   const sources = trackData.uploads
     .filter(upload => {
@@ -45,8 +35,6 @@ export default async (trackData: Track, abortSignal?: AbortSignal): Promise<Trac
     )
   })
 
-  // TODO: Quality picker - sort sources by quality
-
   const token = store.state.auth.scopedTokens.listen
   if (store.state.auth.authenticated && token !== null) {
     // we need to send the token directly in url
diff --git a/front/src/composables/audio/useWebAudioPlayer.ts b/front/src/composables/audio/useWebAudioPlayer.ts
deleted file mode 100644
index bcbf70cbf..000000000
--- a/front/src/composables/audio/useWebAudioPlayer.ts
+++ /dev/null
@@ -1,377 +0,0 @@
-import type { IAudioContext, IMediaElementAudioSourceNode } from 'standardized-audio-context'
-import type { Track } from '~/types'
-
-import { AudioContext } from 'standardized-audio-context'
-import { ref, reactive, computed, watchEffect, nextTick, shallowRef, shallowReactive } from 'vue'
-import { useRafFn, watchDebounced, computedEager } from '@vueuse/core'
-import { uniq } from 'lodash-es'
-import LRUCache from 'lru-cache'
-import store from '~/store'
-import axios from 'axios'
-
-import useTrackSources from './useTrackSources'
-import { LoopState } from '~/store/player'
-import useLogger from '../useLogger'
-import toLinearVolumeScale from './toLinearVolumeScale'
-
-const TO_PRELOAD = 3
-
-const context = new AudioContext()
-const logger = useLogger()
-
-//
-// Audio loading
-//
-
-// Maximum of 20 song buffers can be cached
-const audioCache = new LRUCache<string, IMediaElementAudioSourceNode<IAudioContext>>({
-  max: 20,
-  disposeAfter (source: IMediaElementAudioSourceNode<IAudioContext>, key: string) {
-    // In case we've disposed the current buffer from cache, add it back
-    if (source === currentNode.value) {
-      audioCache.set(key, source)
-    }
-  }
-})
-
-const loadAudio = async (track: Track, abortSignal?: AbortSignal) => {
-  if (audioCache.has(track.id)) {
-    return audioCache.get(track.id)
-  }
-
-  const sources = await useTrackSources(track, abortSignal)
-  if (!sources.length) return null
-
-  const audio = document.createElement('audio')
-  audio.preload = 'auto'
-
-  // @ts-expect-error Firefox doesn't yet support NetworkInformation
-  //                  without a `dom.netinfo.enabled` flag enabled
-  const type = navigator.connection?.effectiveType
-  const index = type === '2g' || type === '3g'
-    ? sources.length - 1
-    // TODO: Quality picker - get audio quality from store
-    : 0
-
-  audio.src = sources[index].url
-
-  const source = context.createMediaElementSource(audio)
-  source.addEventListener('ended', ended)
-
-  audioCache.set(track.id, source)
-  return source
-}
-
-const ended = () => {
-  // Since pause() also emits ended event, we need to check if we're playing currently
-  if (playerState.playing) {
-    next()
-  }
-}
-
-const createMediaNode = async (track: Track) => {
-  // TODO (wvffle): Sync 
-  const source = await preload(track)
-  if (!source) return null
-  source.connect(gainNode)
-  return source
-}
-
-const preloadControllers = shallowReactive(new Map())
-const preload = (track: Track) => {
-  if (track && audioCache.has(track.id)) {
-    return audioCache.get(track.id)
-  }
-
-  const controller = new AbortController()
-  preloadControllers.set(track.id, controller)
-
-  const msg = `Preloading ${track.artist?.name ?? 'Unknown artist'} - ${track.title}`
-  logger.time(msg)
-
-  const promise = loadAudio(track, controller.signal).then(data => {
-    preloadControllers.delete(track.id)
-    logger.timeEnd(msg)
-    return data
-  })
-
-  return promise
-}
-
-const preloads = computed<Array<Track | undefined>>(() => {
-  const index = store.state.queue.currentIndex
-  const tracks = store.state.queue.tracks
-
-  const preloads = uniq([...Array(TO_PRELOAD).keys()].map(i => {
-    const preloadIndex = (index + i) % tracks.length
-    return tracks[preloadIndex]
-  }))
-
-  return preloads.length === 0
-    ? [tracks[index - 1]]
-    : preloads
-})
-
-// Preloading handler
-watchDebounced([
-  // on index change
-  () => store.state.queue.currentIndex,
-  // on new track
-  () => store.state.queue.tracks,
-  // on shuffle/unshuffle
-  () => store.state.queue.shuffleAbortController
-], async () => {
-  const shouldPreload = preloads.value
-
-  // Abort requests we no longer need
-  for (const [id, controller] of preloadControllers.entries()) {
-    if (!shouldPreload.some(track => track?.id === id)) {
-      controller.abort()
-      logger.info(`Aborted loading track ${id}`)
-    }
-  }
-
-  // Preload new reqests synchronously
-  for (const track of shouldPreload) {
-    if (track && !preloadControllers.has(track.id)) {
-      await preload(track)
-    }
-  }
-}, { immediate: true, debounce: 1000 })
-
-const currentTrack = computedEager(() => store.state.queue.tracks[store.state.queue.currentIndex])
-
-//
-// Audio gain
-//
-const gainNode = context.createGain()
-gainNode.connect(context.destination)
-
-watchEffect(() => (gainNode.gain.value = toLinearVolumeScale(store.state.player.volume)))
-
-const unmute = () => store.dispatch('player/unmute')
-const mute = () => store.dispatch('player/mute')
-
-const toggleMute = () => store.state.player.volume === 0
-  ? unmute()
-  : mute()
-
-//
-// Audio playback
-//
-const currentNode = shallowRef<IMediaElementAudioSourceNode<IAudioContext> | null>(null)
-const playerState = reactive({
-  playing: false,
-  startedAt: 0,
-  pausedAt: 0
-})
-
-const play = () => {
-  if (context.state === 'suspended') context.resume()
-  playerState.playing = true
-}
-
-const pause = () => {
-  playerState.playing = false
-}
-
-const stop = () => {
-  if (currentNode.value) {
-    progress.value = 0
-    stopNode(currentNode.value)
-    currentNode.value = null
-    playerState.playing = false
-    playerState.pausedAt = 0
-  }
-}
-
-const seek = (addTime: number) => {
-  if (currentNode.value) {
-    progress.value = Math.max(0, Math.min(100, progress.value + (addTime / duration.value) * 100))
-  }
-}
-
-const isLastTrack = computedEager(() => store.state.queue.currentIndex + 1 >= store.state.queue.tracks.length)
-const willLoopQueue = computedEager(() => store.state.player.looping === LoopState.LOOP_QUEUE && isLastTrack.value)
-const next = async () => {
-  // Looping queue
-  if (willLoopQueue.value) {
-    return store.dispatch('queue/currentIndex', 0)
-  }
-
-  // Pause if last
-  if (isLastTrack.value) {
-    progress.value = 0
-
-    // We need to wait for the first debounce tick
-    await nextTick()
-    // We need to wait for the play() to run after seeking to the beginning
-    await nextTick()
-
-    return pause()
-  }
-
-  // Play next track
-  if (playerState.pausedAt === 0) {
-    stop()
-    await store.dispatch('queue/currentIndex', store.state.queue.currentIndex + 1)
-    play()
-  }
-}
-
-const previous = async () => {
-  if (store.state.queue.currentIndex > 0 && time.value < 3) {
-    await store.dispatch('queue/currentIndex', store.state.queue.currentIndex - 1)
-  } else {
-    progress.value = 0
-  }
-}
-
-// Stop node, remove handlers and disconnect from gain node
-const stopNode = (node: IMediaElementAudioSourceNode<IAudioContext> | null) => {
-  pauseProgress()
-  if (node === null) return
-
-  node.removeEventListener('ended', ended)
-  node.disconnect(gainNode)
-}
-
-const errored = ref(false)
-
-// Play handler
-watchDebounced([
-  () => playerState.playing,
-  currentTrack
-], async () => {
-  if (playerState.playing && currentTrack.value) {
-    stopNode(currentNode.value)
-    currentNode.value = null
-
-    const source = await createMediaNode(currentTrack.value)
-
-    // Play request is aborted
-    if (source === false) return
-
-    // Play request errored
-    if (source === null) {
-      errored.value = true
-      return
-    }
-
-    // NOTE: We've now list reactivity tracking after the first await call
-
-    // if (playerState.pausedAt !== 0) {
-    //   // Start from the paused moment
-    //   source.start(0, playerState.pausedAt - playerState.startedAt)
-    //   playerState.pausedAt = 0
-    // } else {
-    //   // Start from the beginning
-    //   source.start()
-    //   playerState.startedAt = context.currentTime
-    // }
-
-    source.mediaElement.play()
-    currentNode.value = source
-    resumeProgress()
-  }
-}, { debounce: 0 })
-
-// Pause handler
-watchEffect(() => {
-  if (!playerState.playing && currentTrack.value && currentNode.value) {
-    currentNode.value.mediaElement.pause()
-    pauseProgress()
-  }
-})
-
-// Looping handler
-watchEffect(() => {
-  if (currentNode.value) {
-    currentNode.value.mediaElement.loop = store.state.player.looping === LoopState.LOOP_CURRENT
-      || (store.state.player.looping === LoopState.LOOP_QUEUE && store.state.queue.tracks.length === 1)
-  }
-})
-
-// Progress getter and setter
-const time = ref(0)
-const duration = computedEager(() => currentNode.value?.mediaElement.duration ?? 0)
-const progress = computed({
-  // Get progress
-  get: () => currentNode.value
-    ? Math.min(time.value / duration.value * 100, 100)
-    : 0,
-  // Seek to percent
-  set: async (percent: number) => {
-    // Initialize track if we haven't already
-    if (!currentNode.value) {
-      await play()
-      await nextTick()
-      progress.value = percent
-      return
-    }
-
-    const time = percent / 100 * duration.value
-    pause()
-    playerState.startedAt = context.currentTime - time
-    playerState.pausedAt = context.currentTime
-    await nextTick()
-    play()
-  }
-})
-
-// Progress animation loop
-const { resume: resumeProgress, pause: pauseProgress } = useRafFn(() => {
-  if (playerState.playing) {
-    time.value = context.currentTime - playerState.startedAt
-    return
-  }
-
-  time.value = 0
-}, { immediate: false })
-
-// Animation fix for looped tracks and track listened handler
-const isListened = ref(false)
-watchEffect(() => {
-  // When we are done but looping, reset startedAt
-  if (progress.value === 100 && currentNode.value?.mediaElement.loop) {
-    playerState.startedAt = context.currentTime
-  }
-
-  // If unathenticated, do not track track listenings
-  if (!store.state.auth.authenticated) return
-
-  // When we are half-way through, send track listened
-  if (progress.value > 50 && !isListened.value) {
-    isListened.value = true
-    return axios.post('history/listenings/', { track: currentTrack.value.id })
-      .catch((error) => logger.error('Could not record track in history', error))
-  }
-
-  // When we are before half-way through, reset listened state
-  if (currentNode.value && progress.value <= 50 && isListened.value) {
-    isListened.value = false
-  }
-})
-
-// Exports
-export default () => ({
-  // Audio loading
-  preload,
-  // Audio gain
-  toggleMute,
-  unmute,
-  mute,
-  // Audio playback
-  play,
-  pause,
-  stop,
-  seek,
-  next,
-  previous,
-  errored,
-  time,
-  progress,
-  duration,
-  playing: computedEager(() => playerState.playing),
-  loading: computedEager(() => playerState.playing && currentTrack.value && !currentNode.value)
-})
diff --git a/front/src/init/mediaSession.ts b/front/src/init/mediaSession.ts
index 420ece279..67d74be97 100644
--- a/front/src/init/mediaSession.ts
+++ b/front/src/init/mediaSession.ts
@@ -2,15 +2,15 @@ import type { InitModule } from '~/types'
 
 import { whenever } from '@vueuse/core'
 import useQueue from '~/composables/audio/useQueue'
-import useWebAudioPlayer from '~/composables/audio/useWebAudioPlayer'
+import usePlayer from '~/composables/audio/usePlayer'
 
 export const install: InitModule = ({ app }) => {
-  const { currentTrack } = useQueue()
-  const { play, pause, seek, next, previous } = useWebAudioPlayer()
+  const { currentTrack, next, previous } = useQueue()
+  const { resume, pause, seek } = usePlayer()
 
   // Add controls for notification drawer
   if ('mediaSession' in navigator) {
-    navigator.mediaSession.setActionHandler('play', play)
+    navigator.mediaSession.setActionHandler('play', resume)
     navigator.mediaSession.setActionHandler('pause', pause)
     navigator.mediaSession.setActionHandler('seekforward', () => seek(5))
     navigator.mediaSession.setActionHandler('seekbackward', () => seek(-5))
@@ -25,8 +25,7 @@ export const install: InitModule = ({ app }) => {
 
       const metadata: MediaMetadataInit = {
         title,
-        // TODO (wvffle): translate
-        artist: artist?.name ?? 'Unknown artist'
+        artist: artist.name
       }
 
       if (album?.cover) {
diff --git a/front/src/store/index.ts b/front/src/store/index.ts
index a73386193..eb9bdd38e 100644
--- a/front/src/store/index.ts
+++ b/front/src/store/index.ts
@@ -1,4 +1,3 @@
-import type { Track } from '~/types'
 import type { InjectionKey } from 'vue'
 import type { State as FavoritesState } from './favorites'
 import type { State as ChannelsState } from './channels'
@@ -40,39 +39,8 @@ export interface RootState {
   player: PlayerState
 }
 
-// we keep only valuable fields to make the cache lighter and avoid
-// cyclic value serialization errors
-const trackReducer = (track: Track) => {
-  const artist = track.artist
-    ? {
-        id: track.artist.id,
-        mbid: track.artist.mbid,
-        name: track.artist.name
-      }
-    : {}
-
-  return {
-    id: track.id,
-    title: track.title,
-    mbid: track.mbid,
-    uploads: track.uploads,
-    listen_url: track.listen_url,
-    artist,
-    album: track.album
-      ? {
-          id: track.album.id,
-          title: track.album.title,
-          mbid: track.album.mbid,
-          cover: track.album.cover,
-          artist
-        }
-      : {}
-  }
-}
-
 export const key: InjectionKey<Store<RootState>> = Symbol('vuex state injection key')
 export default createStore<RootState>({
-  // TODO (wvffle): Use strict mode
   modules: {
     ui,
     auth,
@@ -128,16 +96,36 @@ export default createStore<RootState>({
         return {
           queue: {
             currentIndex: state.queue.currentIndex,
-            shuffleAbortController: state.queue.shuffleAbortController && null,
-            tracks: state.queue.tracks.map(trackReducer),
-            unshuffled: state.queue.unshuffled.map(trackReducer)
+            tracks: state.queue.tracks.map((track: any) => {
+              // we keep only valuable fields to make the cache lighter and avoid
+              // cyclic value serialization errors
+              const artist = {
+                id: track.artist.id,
+                mbid: track.artist.mbid,
+                name: track.artist.name
+              }
+              const data = {
+                id: track.id,
+                title: track.title,
+                mbid: track.mbid,
+                uploads: track.uploads,
+                listen_url: track.listen_url,
+                artist,
+                album: {}
+              }
+              if (track.album) {
+                data.album = {
+                  id: track.album.id,
+                  title: track.album.title,
+                  mbid: track.album.mbid,
+                  cover: track.album.cover,
+                  artist
+                }
+              }
+              return data
+            })
           }
         }
-      },
-      rehydrated: async (store) => {
-        if (store.state.queue.shuffleAbortController === null) {
-          await store.dispatch('queue/unshuffle', true)
-        }
       }
     })
   ]
diff --git a/front/src/store/player.ts b/front/src/store/player.ts
index 121d19f27..ed3f83499 100644
--- a/front/src/store/player.ts
+++ b/front/src/store/player.ts
@@ -1,13 +1,9 @@
 import type { Module } from 'vuex'
 import type { RootState } from '~/store/index'
 
+import axios from 'axios'
 import time from '~/utils/time'
-
-export enum LoopState {
-  NO_LOOP,
-  LOOP_CURRENT,
-  LOOP_QUEUE
-}
+import useLogger from '~/composables/useLogger'
 
 export interface State {
   maxConsecutiveErrors: number
@@ -15,13 +11,16 @@ export interface State {
   playing: boolean
   isLoadingAudio: boolean
   volume: number
-  lastVolume: number
+  tempVolume: number
   duration: number
   currentTime: number
   errored: boolean
-  looping: LoopState
+  bufferProgress: number
+  looping: 0 | 1 | 2 // 0 -> no, 1 -> on  track, 2 -> on queue
 }
 
+const logger = useLogger()
+
 const store: Module<State, RootState> = {
   namespaced: true,
   state: {
@@ -30,25 +29,35 @@ const store: Module<State, RootState> = {
     playing: false,
     isLoadingAudio: false,
     volume: 1,
-    lastVolume: 0.5,
+    tempVolume: 0.5,
     duration: 0,
     currentTime: 0,
     errored: false,
-    looping: LoopState.NO_LOOP
+    bufferProgress: 0,
+    looping: 0
   },
   mutations: {
     reset (state) {
       state.errorCount = 0
       state.playing = false
     },
-    volume (state, value: number) {
-      state.volume = Math.min(Math.max(value, 0), 1)
+    volume (state, value) {
+      value = parseFloat(value)
+      value = Math.min(value, 1)
+      value = Math.max(value, 0)
+      state.volume = value
     },
-    lastVolume (state, value: number) {
-      state.lastVolume = Math.min(Math.max(value, 0), 1)
+    tempVolume (state, value) {
+      value = parseFloat(value)
+      value = Math.min(value, 1)
+      value = Math.max(value, 0)
+      state.tempVolume = value
     },
     incrementVolume (state, value) {
-      state.volume = Math.min(Math.max(value, 0), 1)
+      value = parseFloat(state.volume + value)
+      value = Math.min(value, 1)
+      value = Math.max(value, 0)
+      state.volume = value
     },
     incrementErrorCount (state) {
       state.errorCount += 1
@@ -65,23 +74,20 @@ const store: Module<State, RootState> = {
     currentTime (state, value) {
       state.currentTime = value
     },
-    looping (state, value: LoopState) {
+    looping (state, value) {
       state.looping = value
     },
     playing (state, value) {
       state.playing = value
     },
+    bufferProgress (state, value) {
+      state.bufferProgress = value
+    },
     toggleLooping (state) {
-      switch (state.looping) {
-        case LoopState.NO_LOOP:
-          state.looping = LoopState.LOOP_CURRENT
-          break
-        case LoopState.LOOP_CURRENT:
-          state.looping = LoopState.LOOP_QUEUE
-          break
-        case LoopState.LOOP_QUEUE:
-          state.looping = LoopState.NO_LOOP
-          break
+      if (state.looping > 1) {
+        state.looping = 0
+      } else {
+        state.looping += 1
       }
     },
     isLoadingAudio (state, value) {
@@ -103,15 +109,83 @@ const store: Module<State, RootState> = {
     incrementVolume ({ commit, state }, value) {
       commit('volume', state.volume + value)
     },
+    stop ({ commit }) {
+      commit('errored', false)
+      commit('resetErrorCount')
+    },
+    togglePlayback ({ commit, state, dispatch }) {
+      commit('playing', !state.playing)
+      if (state.errored && state.errorCount < state.maxConsecutiveErrors) {
+        setTimeout(() => {
+          if (state.playing) {
+            dispatch('queue/next', null, { root: true })
+          }
+        }, 3000)
+      }
+    },
+    async resumePlayback ({ commit, state, dispatch }) {
+      commit('playing', true)
+      if (state.errored && state.errorCount < state.maxConsecutiveErrors) {
+        await new Promise(resolve => setTimeout(resolve, 3000))
+        if (state.playing) {
+          return dispatch('queue/next', null, { root: true })
+        }
+      }
+    },
+    pausePlayback ({ commit }) {
+      commit('playing', false)
+    },
+    toggleMute ({ commit, state }) {
+      if (state.volume > 0) {
+        commit('tempVolume', state.volume)
+        commit('volume', 0)
+      } else {
+        commit('volume', state.tempVolume)
+      }
+    },
+    trackListened ({ rootState }, track) {
+      if (!rootState.auth.authenticated) {
+        return
+      }
+
+      return axios.post('history/listenings/', { track: track.id }).catch((error) => {
+        logger.error('Could not record track in history', error)
+      })
+    },
+    trackEnded ({ commit, dispatch, rootState }) {
+      const queueState = rootState.queue
+      if (queueState.currentIndex === queueState.tracks.length - 1) {
+        // we've reached last track of queue, trigger a reload
+        // from radio if any
+        dispatch('radios/populateQueue', null, { root: true })
+      }
+      dispatch('queue/next', null, { root: true })
+      if (queueState.ended) {
+        // Reset playback
+        commit('playing', false)
+        dispatch('updateProgress', 0)
+      }
+    },
+    trackErrored ({ commit, dispatch, state }) {
+      commit('errored', true)
+      commit('incrementErrorCount')
+      if (state.errorCount < state.maxConsecutiveErrors) {
+        setTimeout(() => {
+          if (state.playing) {
+            dispatch('queue/next', null, { root: true })
+          }
+        }, 3000)
+      }
+    },
     updateProgress ({ commit }, t) {
       commit('currentTime', t)
     },
     mute ({ commit, state }) {
-      commit('lastVolume', state.volume)
+      commit('tempVolume', state.volume)
       commit('volume', 0)
     },
     unmute ({ commit, state }) {
-      commit('volume', state.lastVolume)
+      commit('volume', state.tempVolume)
     }
   }
 }
diff --git a/front/src/store/queue.ts b/front/src/store/queue.ts
index 18f4b9846..06e1c83ff 100644
--- a/front/src/store/queue.ts
+++ b/front/src/store/queue.ts
@@ -2,99 +2,38 @@ import type { Module } from 'vuex'
 import type { RootState } from '~/store/index'
 import type { Track } from '~/types'
 
-import { shuffle, chunk } from 'lodash-es'
+import { shuffle } from 'lodash-es'
 import useLogger from '~/composables/useLogger'
 
-const CHUNK_SIZE = 50
-
 export interface State {
   tracks: Track[]
-  unshuffled: Track[]
-  // NOTE: It's null when we are rehydrated from local storage
-  //       and we were mid-shuffling before
-  shuffleAbortController?: AbortController | null
   currentIndex: number
+  ended: boolean
 }
 
 const logger = useLogger()
 
-// Load useWebAudioPlayer dynamically to avoid vuex not initialized issues
-const useWebAudioPlayer = async () => {
-  const { default: useWebAudioPlayer } = await import('~/composables/audio/useWebAudioPlayer')
-  return useWebAudioPlayer()
-}
-
-interface DeferredAppendOptions {
-  signal?: AbortSignal
-  mapChunk?: (chunk: Track[]) => Track[]
-  mapChunks?: (chunk: Track[][]) => Track[][]
-  afterChunk?: (i: number, chunk: Track[]) => Promise<void> | void
-}
-
-const deferredAppend = async (from: Track[], to: Track[], options: DeferredAppendOptions = {}) => {
-  const {
-    mapChunk = (i) => i,
-    mapChunks = (i) => i,
-    afterChunk = () => {}
-  } = options
-
-  const chunks = mapChunks(chunk(from, CHUNK_SIZE))
-
-  const firstChunk = mapChunk(chunks[0])
-  if (!firstChunk) return
-
-  to.push(...firstChunk)
-  await afterChunk(0, firstChunk)
-
-  for (let i = 1; i < chunks.length; i++) {
-    // Break if we have aborted
-    if (options.signal?.aborted) {
-      break
-    }
-
-    const chunk = mapChunk(chunks[i])
-    await new Promise<void>(resolve => {
-      requestAnimationFrame(async () => {
-        // Break before modyfing the array, if we have aborted
-        if (options.signal?.aborted) {
-          return resolve()
-        }
-
-        to.push(...chunk)
-        await afterChunk(0, chunk)
-        return resolve()
-      })
-    })
-  }
-}
-
 const store: Module<State, RootState> = {
   namespaced: true,
   state: {
     tracks: [],
-    unshuffled: [],
-    currentIndex: -1
+    currentIndex: -1,
+    ended: true
   },
   mutations: {
     reset (state) {
       state.tracks.length = 0
-      state.unshuffled.length = 0
       state.currentIndex = -1
+      state.ended = true
     },
     currentIndex (state, value) {
       state.currentIndex = value
     },
-    splice (state, { start, size, items = [] }) {
-      state.tracks.splice(start, size, ...items)
+    ended (state, value) {
+      state.ended = value
     },
-    push (state, { items = [], to = state.tracks }) {
-      to.push(...items)
-    },
-    clean (state, array = state.tracks) {
-      array.length = 0
-    },
-    controller (state, controller: AbortController | undefined) {
-      state.shuffleAbortController = controller
+    splice (state, { start, size }) {
+      state.tracks.splice(start, size)
     },
     tracks (state, value) {
       state.tracks = value
@@ -139,7 +78,7 @@ const store: Module<State, RootState> = {
       return dispatch('appendMany', { tracks: [track], index })
     },
 
-    async appendMany ({ commit, state }, { tracks, index = state.tracks.length }) {
+    appendMany ({ state, dispatch }, { tracks, index = state.tracks.length }) {
       logger.info(
         'Enqueueing tracks',
         tracks.map((track: Track) => [track.artist?.name, track.title].join(' - '))
@@ -153,37 +92,31 @@ const store: Module<State, RootState> = {
 
       if (index >= state.tracks.length) {
         // we simply push to the end
-        commit('push', { items: tracks })
+        state.tracks.push(...tracks)
       } else {
         // we insert the track at given position
-        commit('splice', { start: index, size: 0, items: tracks })
-      }
-
-      // If the queue is shuffled, push back to the original queue
-      if (state.unshuffled.length) {
-        commit('push', { items: tracks, to: state.unshuffled })
+        state.tracks.splice(index, 0, ...tracks)
       }
 
       if (shouldPlay) {
-        const { play } = await useWebAudioPlayer()
-        return play()
+        return dispatch('next')
       }
     },
 
-    async cleanTrack ({ state, dispatch, commit }, index) {
-      const { stop, play } = await useWebAudioPlayer()
-
-      // are we removing currently playing track
+    cleanTrack ({ state, dispatch, commit }, index) {
+      // are we removing current playin track
       const current = index === state.currentIndex
-      if (current) stop()
+
+      if (current) {
+        dispatch('player/stop', null, { root: true })
+      }
 
       commit('splice', { start: index, size: 1 })
-
       if (index < state.currentIndex) {
         commit('currentIndex', state.currentIndex - 1)
       } else if (index > 0 && index === state.tracks.length && current) {
-        // If you delete the last track of the queue while it's
-        // playing we set current index to the previous one to
+        // kind of a edge case: if you delete the last track of the queue
+        // while it's playing we set current index to the previous one to
         // avoid the queue tab from being stuck because the player
         // disappeared cf #1092
         commit('currentIndex', state.tracks.length - 1)
@@ -192,87 +125,57 @@ const store: Module<State, RootState> = {
         commit('currentIndex', index)
       }
 
-      if (state.tracks.length > state.currentIndex) {
-        play()
-      }
-
       if (state.currentIndex + 1 === state.tracks.length) {
-        return dispatch('radios/populateQueue', null, { root: true })
+        dispatch('radios/populateQueue', null, { root: true })
       }
     },
 
+    previous ({ state, dispatch, rootState }) {
+      if (state.currentIndex > 0 && rootState.player.currentTime < 3) {
+        dispatch('currentIndex', state.currentIndex - 1)
+      } else {
+        dispatch('currentIndex', state.currentIndex)
+      }
+    },
+    next ({ state, dispatch, commit, rootState }) {
+      if (rootState.player.looping === 2 && state.currentIndex >= state.tracks.length - 1) {
+        logger.info('Going back to the beginning of the queue')
+        return dispatch('currentIndex', 0)
+      } else {
+        if (state.currentIndex < state.tracks.length - 1) {
+          logger.debug('Playing next track')
+          return dispatch('currentIndex', state.currentIndex + 1)
+        } else {
+          commit('ended', true)
+        }
+      }
+    },
     last ({ state, dispatch }) {
       return dispatch('currentIndex', state.tracks.length - 1)
     },
-    async currentIndex ({ commit, state, rootState, dispatch }, index) {
+    currentIndex ({ commit, state, rootState, dispatch }, index) {
+      commit('ended', false)
+      commit('player/currentTime', 0, { root: true })
       commit('currentIndex', index)
 
-      // TODO (wvffle): Move to useRadio
-      if (index === state.tracks.length - 1 && rootState.radios.running) {
+      if (state.tracks.length - index <= 2 && rootState.radios.running) {
         return dispatch('radios/populateQueue', null, { root: true })
       }
     },
-    async clean ({ dispatch, state }) {
-      const { stop } = await useWebAudioPlayer()
-      stop()
-
-      await dispatch('radios/stop', null, { root: true })
+    clean ({ dispatch, commit, state }) {
+      dispatch('radios/stop', null, { root: true })
+      dispatch('player/stop', null, { root: true })
       state.tracks.length = 0
-      state.unshuffled.length = 0
-      state.shuffleAbortController = undefined
-      await dispatch('currentIndex', -1)
+      dispatch('currentIndex', -1)
+      // so we replay automatically on next track append
+      commit('ended', true)
     },
+    async shuffle ({ dispatch, state }) {
+      const shuffled = shuffle(state.tracks)
+      state.tracks.length = 0
 
-    async shuffle ({ commit, dispatch, state }) {
-      const { play, stop } = await useWebAudioPlayer()
-      stop()
-
-      logger.time('Shuffling')
-      const abortController = new AbortController()
-      commit('controller', abortController)
-
-      // This should be rather quick, as it doesn't re-render the UI
-      commit('clean', state.unshuffled)
-      commit('push', { items: state.tracks, to: state.unshuffled })
-      commit('clean')
-
-      await deferredAppend(state.unshuffled, state.tracks, {
-        signal: abortController.signal,
-        mapChunk: shuffle,
-        mapChunks: shuffle,
-        async afterChunk (i) {
-          if (i === 0) {
-            await dispatch('currentIndex', 0)
-            play()
-          }
-        }
-      })
-
-      commit('controller', undefined)
-      logger.timeEnd('Shuffling')
-    },
-
-    async unshuffle ({ commit, dispatch, state }, rehydration = false) {
-      const { play, stop } = await useWebAudioPlayer()
-      stop()
-
-      state.shuffleAbortController?.abort()
-      const abortController = new AbortController()
-      commit('controller', abortController)
-      commit('clean')
-
-      await deferredAppend(state.unshuffled, state.tracks, {
-        signal: abortController.signal,
-        async afterChunk (i) {
-          if (i === 0 && !rehydration) {
-            await dispatch('currentIndex', 0)
-            play()
-          }
-        }
-      })
-
-      commit('clean', state.unshuffled)
-      commit('controller', undefined)
+      await dispatch('appendMany', { tracks: shuffled })
+      await dispatch('currentIndex', 0)
     }
   }
 }
diff --git a/front/yarn.lock b/front/yarn.lock
index 65c8231c6..cbb5ea4c3 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -908,7 +908,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.8.4":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
   integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
@@ -2635,14 +2635,6 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-automation-events@^4.0.20:
-  version "4.0.20"
-  resolved "https://registry.yarnpkg.com/automation-events/-/automation-events-4.0.20.tgz#a103d322db98b9999d04b44a3cf276539a88cc37"
-  integrity sha512-ALTOLrB4vTyXOsLPia8OKM1qZKtlsGC+3VDe3jcCGUpvgKTbqlzvaJU3HqDhU6jlVEMMBqT01XZv3K/3Z5g29w==
-  dependencies:
-    "@babel/runtime" "^7.18.9"
-    tslib "^2.4.0"
-
 axios-auth-refresh@3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/axios-auth-refresh/-/axios-auth-refresh-3.3.3.tgz#f8c2fd0ca3adf89168dfb0caff10f076499ea482"
@@ -5502,11 +5494,6 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-lru-cache@^7.13.1:
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.14.0.tgz#21be64954a4680e303a09e9468f880b98a0b3c7f"
-  integrity sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==
-
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
@@ -6657,15 +6644,6 @@ stack-utils@^2.0.3:
   dependencies:
     escape-string-regexp "^2.0.0"
 
-standardized-audio-context@^25.3.29:
-  version "25.3.29"
-  resolved "https://registry.yarnpkg.com/standardized-audio-context/-/standardized-audio-context-25.3.29.tgz#4f1948a3903323bb831b8c7129bed9320e500be5"
-  integrity sha512-5RqrvuaphiR3W2t8nd8PRBhQKXTTf0gHu8I0BukH3A11C9ZHQQmeE9WywBe68TcYBj9DCm42db8OWTw1PluLUA==
-  dependencies:
-    "@babel/runtime" "^7.18.9"
-    automation-events "^4.0.20"
-    tslib "^2.4.0"
-
 string-length@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
@@ -6965,7 +6943,7 @@ tslib@^1.8.1, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.3.1, tslib@^2.4.0:
+tslib@^2.3.1:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==