adds autoplay option
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {
|
import {
|
||||||
|
audio_autoplay,
|
||||||
audio_current_time,
|
audio_current_time,
|
||||||
audio_element,
|
audio_element,
|
||||||
audio_metadata,
|
audio_metadata,
|
||||||
@@ -22,7 +23,7 @@
|
|||||||
<audio
|
<audio
|
||||||
bind:this={element}
|
bind:this={element}
|
||||||
{src}
|
{src}
|
||||||
autoplay={false}
|
autoplay={$audio_autoplay}
|
||||||
bind:currentTime
|
bind:currentTime
|
||||||
bind:muted
|
bind:muted
|
||||||
preload="metadata"
|
preload="metadata"
|
||||||
|
|||||||
@@ -1,9 +1,11 @@
|
|||||||
import type { PlayerElement, PlayerMetadata } from '$lib/types/types';
|
import type { PlayerElement, PlayerMetadata } from '$lib/types/types';
|
||||||
import { writable } from 'svelte/store';
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
export const audio_element = writable<PlayerElement>();
|
||||||
export const audio_current_time = writable<number>(0);
|
export const audio_current_time = writable<number>(0);
|
||||||
export const audio_src = writable<string | null>(null);
|
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>({
|
export const audio_metadata = writable<PlayerMetadata>({
|
||||||
duration: 0,
|
duration: 0,
|
||||||
muted: false,
|
muted: false,
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import {
|
import {
|
||||||
|
audio_autoplay,
|
||||||
audio_current_time,
|
audio_current_time,
|
||||||
audio_element,
|
audio_element,
|
||||||
audio_metadata,
|
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);
|
info('load: ', src);
|
||||||
|
audio_autoplay.set(opts.autoplay);
|
||||||
audio_src.set(src);
|
audio_src.set(src);
|
||||||
return audio_element.subscribe((el) => {
|
return audio_element.subscribe((el) => {
|
||||||
if (!el) return warn('no audio element');
|
if (!el) return warn('no audio element');
|
||||||
|
|||||||
@@ -16,8 +16,12 @@
|
|||||||
<a href="/another-page">Another Page</a>
|
<a href="/another-page">Another Page</a>
|
||||||
|
|
||||||
<h5>Load Audio</h5>
|
<h5>Load Audio</h5>
|
||||||
<button type="button" on:click={() => audio.load(sources['syntax'])}>Syntax</button>
|
<button type="button" on:click={() => audio.load(sources['syntax'], { autoplay: true })}
|
||||||
<button type="button" on:click={() => audio.load(sources['knomii'])}>Knomii</button>
|
>Syntax</button
|
||||||
|
>
|
||||||
|
<button type="button" on:click={() => audio.load(sources['knomii'], { autoplay: false })}
|
||||||
|
>Knomii</button
|
||||||
|
>
|
||||||
<button type="button" on:click={() => audio.unload()}>None</button>
|
<button type="button" on:click={() => audio.unload()}>None</button>
|
||||||
|
|
||||||
<h5>Custom audio controls</h5>
|
<h5>Custom audio controls</h5>
|
||||||
|
|||||||
Reference in New Issue
Block a user