Files
oki-podcast-reader/src/lib/context/audio.ts
T

188 lines
4.0 KiB
TypeScript
Raw Normal View History

2023-02-24 13:47:07 +00:00
import {
2023-02-24 14:01:43 +00:00
audio_autoplay,
2023-02-24 13:47:07 +00:00
audio_current_time,
2023-02-24 15:38:08 +00:00
audio_duration,
2023-02-24 13:47:07 +00:00
audio_element,
2023-02-24 15:38:08 +00:00
audio_ended,
audio_loading,
2023-02-24 14:43:33 +00:00
audio_muted,
2023-02-24 15:38:08 +00:00
audio_paused,
2023-02-24 14:43:33 +00:00
audio_playback_rate,
2023-02-24 13:47:07 +00:00
audio_src,
2023-02-24 14:43:33 +00:00
audio_start_at,
audio_volume,
2023-02-24 13:47:07 +00:00
} from '$lib/context/audio-internals';
2023-02-24 15:38:33 +00:00
import { audio_metadata, type AudioMetadata } from '$lib/context/audio-metadata';
import { episode_progress } from '$lib/context/progress';
2023-02-24 13:15:34 +00:00
import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp';
2023-02-24 13:32:10 +00:00
import { info, warn } from '$pkg/log';
2023-02-22 23:41:29 +00:00
import clamp from 'just-clamp';
2023-02-24 13:47:07 +00:00
import { derived } from 'svelte/store';
2023-02-22 23:41:29 +00:00
2023-02-24 14:43:33 +00:00
const audio_state = derived(
[
audio_current_time,
2023-02-24 15:38:08 +00:00
audio_duration,
audio_ended,
audio_loading,
audio_paused,
audio_start_at,
audio_autoplay,
2023-02-24 14:43:33 +00:00
audio_muted,
audio_playback_rate,
audio_src,
audio_volume,
2023-02-24 15:38:33 +00:00
audio_metadata,
2023-02-24 14:43:33 +00:00
],
2023-02-24 15:38:08 +00:00
([
$current_time,
$duration,
$ended,
$loading,
$paused,
$start_at,
$autoplay,
$muted,
$playback_rate,
$src,
$volume,
2023-02-24 15:38:33 +00:00
$metadata,
2023-02-24 15:38:08 +00:00
]) => {
2023-02-24 14:43:33 +00:00
return {
current_time: $current_time,
2023-02-24 15:38:08 +00:00
duration: $duration,
ended: $ended,
loading: $loading,
paused: $paused,
start_at: $start_at,
autoplay: $autoplay,
2023-02-24 14:43:33 +00:00
muted: $muted,
playback_rate: $playback_rate,
src: $src,
volume: $volume,
2023-02-24 15:38:33 +00:00
metadata: $metadata,
2023-02-24 15:38:08 +00:00
timestamp: secondsToTimestamp($current_time),
2023-02-24 14:43:33 +00:00
};
},
);
2023-02-22 23:41:29 +00:00
type HandleType = 'toggle' | 'set';
function play(type: HandleType = 'set') {
2023-02-24 13:27:53 +00:00
info('play: ', type);
2023-02-24 13:47:07 +00:00
return audio_element.subscribe((el) => {
2023-02-22 23:41:29 +00:00
if (!el) return warn('no audio element');
if (type === 'toggle') {
el.paused ? el.play() : el.pause();
} else {
el.play();
}
})();
}
function pause(type: HandleType = 'set') {
2023-02-24 13:27:53 +00:00
info('pause: ', type);
2023-02-24 13:47:07 +00:00
return audio_element.subscribe((el) => {
2023-02-22 23:41:29 +00:00
if (!el) return warn('no audio element');
if (type === 'toggle') {
el.paused ? el.play() : el.pause();
} else {
el.pause();
}
})();
}
function mute(type: HandleType = 'set') {
2023-02-24 13:27:53 +00:00
info('mute: ', type);
2023-02-24 14:43:33 +00:00
if (type === 'toggle') {
audio_muted.update((muted) => !muted);
} else {
audio_muted.set(true);
}
2023-02-22 23:41:29 +00:00
}
function unmute(type: HandleType = 'set') {
2023-02-24 13:27:53 +00:00
info('unmute: ', type);
2023-02-24 14:43:33 +00:00
if (type === 'toggle') {
audio_muted.update((muted) => !muted);
} else {
audio_muted.set(false);
}
2023-02-22 23:41:29 +00:00
}
2023-02-24 15:38:08 +00:00
export type AudioLoadData = AudioMetadata & { src: string };
export type AudioLoadOptions = {
2023-02-24 14:01:43 +00:00
autoplay: boolean;
2023-02-24 14:43:33 +00:00
start_at?: number;
2023-02-24 14:01:43 +00:00
};
2023-02-24 15:38:08 +00:00
const load = (data: AudioLoadData, opts: AudioLoadOptions) => {
episode_progress.stash();
2023-02-24 15:38:08 +00:00
const { src, ...metadata } = data;
const progress = episode_progress.use(src);
const start_at = progress?.start_at || opts.start_at || 0;
console.log('progress', progress);
2023-02-24 13:27:53 +00:00
info('load: ', src);
2023-02-24 14:01:43 +00:00
audio_autoplay.set(opts.autoplay);
2023-02-24 14:43:33 +00:00
audio_volume.set(1);
2023-02-24 13:47:07 +00:00
audio_src.set(src);
2023-02-24 15:38:08 +00:00
audio_metadata.set(metadata);
audio_start_at.set(start_at);
2023-02-24 14:43:33 +00:00
// opts.current_time ? seek(opts.current_time) : null;
//opts.autoplay && play();
2023-02-24 15:38:08 +00:00
};
2023-02-22 23:41:29 +00:00
function unload() {
episode_progress.stash();
2023-02-24 13:27:53 +00:00
info('unload: ');
2023-02-24 14:43:33 +00:00
pause();
audio_autoplay.set(false);
audio_volume.set(1);
audio_src.set('');
2023-02-24 15:38:08 +00:00
audio_metadata.set(null);
2023-02-24 14:43:33 +00:00
audio_start_at.set(0);
2023-02-22 23:41:29 +00:00
}
function setPlaybackRate(rate: number) {
2023-02-24 13:27:53 +00:00
info('setPlaybackRate: ', rate);
2023-02-24 14:43:33 +00:00
audio_playback_rate.set(clamp(0, 10, rate));
2023-02-22 23:41:29 +00:00
}
function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
2023-02-24 13:27:53 +00:00
info('seek: ', seconds, from);
2023-02-24 13:47:07 +00:00
return audio_element.subscribe((el) => {
2023-02-22 23:41:29 +00:00
if (!el) return warn('no audio element');
if (from === 'from-end') {
el.currentTime = clamp(0, el.duration, el.duration - seconds);
} else {
el.currentTime = clamp(0, el.duration, seconds);
}
})();
}
function skip(seconds: number, type: 'forward' | 'backward' = 'forward') {
2023-02-24 13:27:53 +00:00
info('skip: ', seconds, type);
2023-02-24 13:47:07 +00:00
return audio_element.subscribe((el) => {
2023-02-22 23:41:29 +00:00
if (!el) return warn('no audio element');
if (type === 'backward') {
el.currentTime = clamp(0, el.duration, el.currentTime - seconds);
} else {
el.currentTime = clamp(0, el.duration, el.currentTime + seconds);
}
})();
}
export const audio = {
2023-02-24 13:47:07 +00:00
subscribe: audio_state.subscribe,
2023-02-22 23:41:29 +00:00
play,
pause,
mute,
unmute,
load,
unload,
setPlaybackRate,
seek,
skip,
};