API

audio

audio data

Property	Type	Description
`is_loaded`	`boolean`	Whether the audio element is loaded or not
`is_paused`	`boolean`	Whether the audio element is paused or not
`current_time`	`number`	The current time of the audio element in seconds
`duration`	`number`	The duration of the audio element in seconds
`timestamp_current`	`string`	The current time of the audio element in timestamp format (hh:mm:ss)
`timestamp_end`	`string`	The end time of the audio element in timestamp format (hh:mm:ss)

Subscribe to specific changes in the audio attributes. This will return a readable store that you can use to access the attributes.

<script>
  import { audio } from 'svelte-podcast';

  // return the current user preferences
  const attributes = $audio;

  // or subscribe to changes in the user preferences
  audio.subscribe((attr) => {
    // do something with the new preferences whenever they change
    console.log(attr);
  });
</script>

<p>Current timestamp {attributes.timestamp_current}.</p>

<p>{attributes.is_paused ? 'Paused...' : 'Playing!'}.</p>

audio.src

Load a new audio source. This will stop the current audio source and replace it with the new one.

Alternatively, unload the current audio source. This will stop the current audio source and remove it from the audio state.

import { audio } from 'svelte-podcast';

// load a new audio source into the player
audio.src.load(
  // path to audio file
  '/episode-377.mp3',

  // custom metadata defined by you
  {
    title: 'Supper Club × Rich Harris, Author of Svelte',
    artwork:
      'https://ssl-static.libsyn.com/p/assets/b/3/c/d/b3cdf28da11ad39fe5bbc093207a2619/Syntax_-_499.jpg',
    guests: ['Rich Harris'],
    hosts: ['Wes Bos', 'Scott Tolinski'],
  },
);

// unload the current audio source
audio.src.unload();

audio.play

Set or toggle the play state.

import { audio } from 'svelte-podcast';

// play the current audio source
audio.play(true);

// pause the current audio source
audio.play(false);

// invert the play state of the current audio source
audio.play('toggle');

audio.mute

Set or toggle the mute state.

import { audio } from 'svelte-podcast';

// mute the current audio source
audio.mute(true);

// unmute the current audio source
audio.mute(false);

// invert the mute state of the current audio source
audio.mute('toggle');

audio.seek

Seek to a specific time in the audio. The `from` parameter determines whether the time is relative to the start or end of the audio.

import { audio } from 'svelte-podcast';

// go to 200 seconds from the start
audio.seek_to(200);

// go to 200 seconds before the end
audio.seek_to(200, 'from-end');

audio.skip

Skip forward or backward in the audio by a specific number of seconds.

import { audio } from 'svelte-podcast';

// skip forward 30 seconds from the current position
audio.skip_by(30);

// skip backward 30 seconds from the current position
audio.skip_by(30, 'backward');

user_preferences

user_preferences data

Property	Type	Description
`playback_rate`	`number`	The audio player playback rate (speed)
`volume`	`number`	The audio player volume.

Subscribe to changes in the user preferences. This will return a readable store that you can use to access the user preferences.

<script>
  import { user_preferences } from 'svelte-podcast';

  // return the current user preferences
  const preferences = $user_preferences;

  // or subscribe to changes in the user preferences
  user_preferences.subscribe((prefs) => {
    // do something with the new preferences whenever they change
    console.log(prefs);
  });
</script>

<p>Listening at {preferences.playback_rate * 100}% speed.</p>

<p>Volume set to {preferences.volume * 100}%.</p>

user_preferences.set_playback_rate

Set the playback rate. This will update the user preferences and apply the new playback rate to the audio.

import { user_preferences } from 'svelte-podcast';

// Sets the playback speed to 150%
user_preferences.set_playback_rate(1.5);

user_preferences.set_volume

Set the volume. This will update the user preferences and apply the new volume to the audio.

import { user_preferences } from 'svelte-podcast';

// Sets the volume to 75%
user_preferences.set_volume(0.75);

user_preferences.clear

Clear the user preferences. This will reset the user preferences to the default values.

import { user_preferences } from 'svelte-podcast';

// Clears all user preferences
user_preferences.clear();

user_progress

user_progress data

User progress is a record where the keys are audio sources, and the values are timestamps in seconds. Progress is retrieved by matching the source, and returning the timestamp.

Record<string, number>

Subscribe to changes in the user progress. This will return a readable store that you can use to access the user progress.

<script>
  import { user_progress } from 'svelte-podcast';

  // return the current user progress
  const progress = $user_progress;

  // or subscribe to changes in the user progress
  user_progress.subscribe((prog) => {
    // do something with the new progress whenever they change
    console.log(prog);
  });
</script>

<p>
  Listened to {progress['https://example.com/episodes/1']} seconds of episode 1.
</p>

user_progress.get

Get the user progress for a given audio source. This will return the timestamp in seconds.

import { user_progress } from 'svelte-podcast';

// Get the user's progress for a specific episode.
user_progress.get('https://example.com/episodes/1');

user_progress.clear

Clear the user progress. This will reset the user progress to the default values.

import { user_progress } from 'svelte-podcast';

// Clear  the user's progress for ALL episodes.
user_progress.clear();

user_progress.save

Save the user progress for a given audio source. This will update the user progress with the new timestamp.

import { user_progress } from 'svelte-podcast';

// Save the user's progress for the current episode.
user_progress.save();

seconds_to_timestamp

Property	Type	Description
`seconds`	`number`	The number of seconds to convert.
`force_hours`	`boolean`	Whether to include hours in the timestamp, even if it's 0.

import { format_seconds } from 'svelte-podcast/utility/format-seconds';

// Example
format_seconds.to_timestamp(5173); // '01:26:13';

// force hours to be displayed
format_seconds.to_timestamp(2700, true); // '00:45:00';

// only display hours if there are any
format_seconds.to_timestamp(2700, false); // '45:00';