1.0.2 • Published 12 months ago
headless-audioplayer-svelte v1.0.2
Documentation
Installation
Choose your favorite package manager
pnpm install headless-audioplayer-svelte
npm install headless-audioplayer-svelte
yarn add headless-audioplayer-svelte
Getting started
Headless audio player is a unstyled wrapper to handle all the stuff related to progress, downloadProgress, change current time of playing
etc...
You can make the player as you want, with your own styles.
Basic example
// +page.svelte
<script lang="ts">
import { PlayerProvider } from "headless-audioplayer-svelte";
import YourPlayerComponent from "./lib/YourPlayerComponent.svelte";
import { writable } from "svelte/store";
let src = writable("your audio media or audio url");
</script>
<PlayerProvider {src}>
<YourPlayerComponent />
</PlayerProvider>
// lib/YourPlayerComponent.svelte
<script lang="ts">
import {
type PlayerContextProps,
PlayerSlider,
VolumeSlider,
} from "headless-audioplayer-svelte";
import { getContext } from "svelte";
let context = getContext<PlayerContextProps>("playerContext");
const {
decreaseVolume,
downloadProgress,
increaseVolume,
isPlaying,
onSliderChange,
onSliderVolumeChange,
progress,
timestamp,
togglePlay,
volume,
toggleMute,
mute
} = context;
</script>
<PlayerSlider
downloadProgress={$downloadProgress}
onChange={onSliderChange}
{progress}
/>
<button on:click={togglePlay}>{$isPlaying ? "Pause" : "Play"}</button>
<p>current: {$timestamp.current}</p>
<p>total: {$timestamp.total}</p>
<VolumeSlider onChange={onSliderVolumeChange} {volume} />
<button on:click={increaseVolume}>+1</button>
<button on:click={decreaseVolume}>-1</button>
<button on:click={toggleMute}
>{$mute.state == "muted" ? "Unmute" : "mute"}</button
>