From d7d81ce7325cc691fa79c3f9e56663c0468db7f8 Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Fri, 24 Feb 2023 14:01:43 +0000
Subject: [PATCH] adds autoplay option

---
 src/lib/components/audio-loader.svelte | 3 ++-
 src/lib/context/audio-internals.ts     | 4 +++-
 src/lib/context/audio.ts               | 8 +++++++-
 src/routes/+page.svelte                | 8 ++++++--
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/audio-loader.svelte b/src/lib/components/audio-loader.svelte
index d396daf..f46a025 100644
--- a/src/lib/components/audio-loader.svelte
+++ b/src/lib/components/audio-loader.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import {
+		audio_autoplay,
 		audio_current_time,
 		audio_element,
 		audio_metadata,
@@ -22,7 +23,7 @@
 	<audio
 		bind:this={element}
 		{src}
-		autoplay={false}
+		autoplay={$audio_autoplay}
 		bind:currentTime
 		bind:muted
 		preload="metadata"
diff --git a/src/lib/context/audio-internals.ts b/src/lib/context/audio-internals.ts
index 5083a48..cfe7a51 100644
--- a/src/lib/context/audio-internals.ts
+++ b/src/lib/context/audio-internals.ts
@@ -1,9 +1,11 @@
 import type { PlayerElement, PlayerMetadata } from '$lib/types/types';
 import { writable } from 'svelte/store';
 
+export const audio_element = writable<PlayerElement>();
 export const audio_current_time = writable<number>(0);
 export const audio_src = writable<string | null>(null);
-export const audio_element = writable<PlayerElement>();
+export const audio_autoplay = writable<boolean>(false);
+
 export const audio_metadata = writable<PlayerMetadata>({
 	duration: 0,
 	muted: false,
diff --git a/src/lib/context/audio.ts b/src/lib/context/audio.ts
index c91a837..0a4e4b5 100644
--- a/src/lib/context/audio.ts
+++ b/src/lib/context/audio.ts
@@ -1,4 +1,5 @@
 import {
+	audio_autoplay,
 	audio_current_time,
 	audio_element,
 	audio_metadata,
@@ -65,8 +66,13 @@ function unmute(type: HandleType = 'set') {
 	})();
 }
 
-function load(src: string) {
+type LoadOptions = {
+	autoplay: boolean;
+};
+
+function load(src: string, opts: LoadOptions) {
 	info('load: ', src);
+	audio_autoplay.set(opts.autoplay);
 	audio_src.set(src);
 	return audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 734dd87..c775cfe 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -16,8 +16,12 @@
 <a href="/another-page">Another Page</a>
 
 <h5>Load Audio</h5>
-<button type="button" on:click={() => audio.load(sources['syntax'])}>Syntax</button>
-<button type="button" on:click={() => audio.load(sources['knomii'])}>Knomii</button>
+<button type="button" on:click={() => audio.load(sources['syntax'], { autoplay: true })}
+	>Syntax</button
+>
+<button type="button" on:click={() => audio.load(sources['knomii'], { autoplay: false })}
+	>Knomii</button
+>
 <button type="button" on:click={() => audio.unload()}>None</button>
 
 <h5>Custom audio controls</h5>