diff --git a/client/src/lib/Dashboard/MediaDisplay/Controls.svelte b/client/src/lib/Dashboard/MediaDisplay/Controls.svelte
deleted file mode 100644
index 1cebede..0000000
--- a/client/src/lib/Dashboard/MediaDisplay/Controls.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-
-
- {#if playing}
-
- {:else}
-
- {/if}
-
-
-
-
diff --git a/client/src/lib/Dashboard/MediaDisplay/MediaDisplay.svelte b/client/src/lib/Dashboard/MediaDisplay/MediaDisplay.svelte
deleted file mode 100644
index bee6783..0000000
--- a/client/src/lib/Dashboard/MediaDisplay/MediaDisplay.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-
-
-
-
-
-
-
Danger Zone
-
Kenny Loggins
-
-
-
-
diff --git a/client/src/lib/Dashboard/MediaPlayer/Controls.svelte b/client/src/lib/Dashboard/MediaPlayer/Controls.svelte
new file mode 100644
index 0000000..5dfeb28
--- /dev/null
+++ b/client/src/lib/Dashboard/MediaPlayer/Controls.svelte
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
diff --git a/client/src/lib/Dashboard/MediaPlayer/MediaDisplay.svelte b/client/src/lib/Dashboard/MediaPlayer/MediaDisplay.svelte
new file mode 100644
index 0000000..60847d0
--- /dev/null
+++ b/client/src/lib/Dashboard/MediaPlayer/MediaDisplay.svelte
@@ -0,0 +1,37 @@
+
+
+{#if songData}
+
+
+
+
+
+
+
{songData.title}
+
{songData.artist}
+
+
+
+
+{/if}
diff --git a/client/src/lib/Dashboard/MediaPlayer/Player.svelte b/client/src/lib/Dashboard/MediaPlayer/Player.svelte
new file mode 100644
index 0000000..4e244d6
--- /dev/null
+++ b/client/src/lib/Dashboard/MediaPlayer/Player.svelte
@@ -0,0 +1,26 @@
+
diff --git a/client/src/lib/Dashboard/MediaPlayer/audioManager.ts b/client/src/lib/Dashboard/MediaPlayer/audioManager.ts
new file mode 100644
index 0000000..63bc198
--- /dev/null
+++ b/client/src/lib/Dashboard/MediaPlayer/audioManager.ts
@@ -0,0 +1,102 @@
+export class AudioManager {
+ private audioContext: AudioContext | null = null
+ private currentSource: AudioBufferSourceNode | null = null
+ private currentBuffer: AudioBuffer | null = null // Stores the current audio buffer
+ private startTime: number = 0 // When the current playback started
+ private pauseTime: number = 0 // Track where we paused
+ private currentToken: number = 0 // Unique token for each play request
+ private isPaused: boolean = false
+
+ constructor() {
+ this.initAudioContext()
+ }
+
+ private async initAudioContext() {
+ if (!this.audioContext) {
+ this.audioContext = new AudioContext()
+ }
+ }
+
+ public async playAudio(url: string): Promise
{
+ if (this.isPaused && this.currentBuffer) {
+ // If paused, resume instead of reloading
+ this.resume()
+ return
+ }
+
+ this.pauseTime = 0 // Reset pause time for a new track
+ const playToken = ++this.currentToken // Update the token for this request
+ await this.initAudioContext()
+
+ if (this.audioContext) {
+ this.stopAudio() // Stop any currently playing audio
+
+ try {
+ const response = await fetch(url)
+ const arrayBuffer = await response.arrayBuffer()
+ if (this.currentToken !== playToken) {
+ return // Abort if a newer request has been made
+ }
+ const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer)
+ this.currentBuffer = audioBuffer // Save the buffer for potential pausing/resuming
+
+ this.startPlayback(audioBuffer, 0) // Start playback from the beginning
+ } catch (error) {
+ console.error('Error playing audio:', error)
+ }
+ }
+ }
+
+ private startPlayback(buffer: AudioBuffer, offset: number) {
+ const source = this.audioContext!.createBufferSource()
+ source.buffer = buffer
+ source.connect(this.audioContext!.destination)
+ source.start(0, offset)
+ this.startTime = this.audioContext!.currentTime - offset
+ this.currentSource = source
+ this.isPaused = false
+
+ source.onended = () => {
+ if (!this.isPaused) {
+ this.currentBuffer = null // Clear the buffer if playback finishes normally
+ }
+ }
+ }
+
+ public pause() {
+ if (!this.isPaused && this.currentSource && this.audioContext) {
+ this.pauseTime = this.audioContext.currentTime - this.startTime
+ this.currentSource.stop()
+ this.isPaused = true
+ }
+ }
+
+ public resume() {
+ if (this.isPaused && this.currentBuffer) {
+ this.startPlayback(this.currentBuffer, this.pauseTime)
+ }
+ }
+
+ public stopAudio() {
+ if (this.currentSource) {
+ this.currentSource.stop()
+ this.currentSource = null
+ this.currentBuffer = null // Clear the current buffer
+ this.isPaused = false
+ this.pauseTime = 0
+ }
+ }
+}
+
+// Usage example:
+const audioManager = new AudioManager()
+const audioUrl = 'https://example.com/path/to/your/audio/file.mp3'
+
+// To play the audio
+audioManager.playAudio(audioUrl)
+
+// To pause the audio
+audioManager.pause()
+
+// To resume the audio
+audioManager.resume()
diff --git a/client/src/lib/Dashboard/MediaPlayer/songList.ts b/client/src/lib/Dashboard/MediaPlayer/songList.ts
new file mode 100644
index 0000000..d0a0dd6
--- /dev/null
+++ b/client/src/lib/Dashboard/MediaPlayer/songList.ts
@@ -0,0 +1,14 @@
+export const songList: { [key: string]: SongData } = {
+ 'danger-zone': {
+ title: 'Danger Zone',
+ artist: 'Kenny Loggins',
+ src: '/static/songs/danger-zone/audio.mp3',
+ coverImg: '/static/songs/danger-zone/cover.png',
+ },
+ 'monko-zone': {
+ title: 'Danger Zone',
+ artist: 'Kenny Loggins',
+ src: '/static/songs/danger-zone/audio.mp3',
+ coverImg: '/static/songs/danger-zone/cover.png',
+ },
+}
diff --git a/client/src/lib/stores/musicStore.ts b/client/src/lib/stores/musicStore.ts
new file mode 100644
index 0000000..b608c65
--- /dev/null
+++ b/client/src/lib/stores/musicStore.ts
@@ -0,0 +1,60 @@
+import { writable } from 'svelte/store'
+
+interface MusicQueue {
+ queue: string[]
+ currentIndex: number
+ playing: boolean
+}
+
+function createMusicStore() {
+ const { subscribe, set, update } = writable({
+ queue: [],
+ currentIndex: 0,
+ playing: false,
+ })
+
+ return {
+ subscribe,
+ push: (songSlug: string) =>
+ update(store => {
+ store.queue.push(songSlug)
+ return store
+ }),
+ skip: () =>
+ update(store => {
+ let next = store.queue[store.currentIndex + 1]
+
+ if (next !== undefined) {
+ store.currentIndex++
+ }
+ return store
+ }),
+ setCurrent: (songSlug: string) =>
+ update(store => {
+ store.currentIndex = store.queue.length
+ store.queue.push(songSlug)
+ return store
+ }),
+ queueNext: (songSlug: string) =>
+ update(store => {
+ store.queue.splice(store.currentIndex + 1, 0, songSlug)
+ return store
+ }),
+ pause: update(store => {
+ store.playing = false
+ return store
+ }),
+ play: update(store => {
+ store.playing = true
+ return store
+ }),
+ toggle: () =>
+ update(store => {
+ store.playing = !store.playing
+ return store
+ }),
+ reset: () => set({ queue: [], currentIndex: 0, playing: false }),
+ }
+}
+
+export const musicStore = createMusicStore()