test promise in playing audio

src/composables/playAudio.js

@@ -1,39 +1,37 @@
 import { ref } from "@vue/reactivity";
 
 import perks from "./perks";
-import media from "./mediaNotification.js"
+import media from "./mediaNotification.js";
 
 const audio = ref(new Audio()).value;
 const pos = ref(0);
-const playing = ref(false)
+const playing = ref(false);
 
 const url = "http://127.0.0.1:8901/";
 
 const playAudio = (path) => {
   const full_path = url + encodeURIComponent(path);
 
-  setTimeout(() => {
+  new Promise((resolve, reject) => {
     audio.src = full_path;
-  }, 150);
-  audio.load();
+    audio.onloadeddata = resolve;
+    audio.onerror = reject;
+  })
+    .then(() => {
+      audio.play();
+      playing.value = true;
 
-  audio.oncanplaythrough = () => {
-    audio.play();
-  };
-
-  audio.ontimeupdate = () => {
-    pos.value = (audio.currentTime / audio.duration) * 1000;
-  };
-
-  audio.addEventListener("ended", () => {
-    playNext();
-  });
+      audio.ontimeupdate = () => {
+        pos.value = (audio.currentTime / audio.duration) * 1000;
+      };
+    })
+    .catch((err) => console.log(err));
 };
 
 function playNext() {
   playAudio(perks.next.value.filepath);
   perks.current.value = perks.next.value;
-  media.showMediaNotif()
+  media.showMediaNotif();
 }
 
 function playPrev() {
@@ -58,12 +56,15 @@ function playPause() {
   }
 }
 
-audio.addEventListener('play', () => {
+audio.addEventListener("play", () => {
   playing.value = true;
-})
+});
 
-audio.addEventListener('pause', () => {
+audio.addEventListener("pause", () => {
   playing.value = false;
-})
+});
 
+audio.addEventListener("ended", () => {
+  playNext();
+});
 export default { playAudio, playNext, playPrev, playPause, seek, pos, playing };