Setup

Installation

Install the latest version of svelte-podcast with your preferred package manager.

npm install svelte-podcast@latest

yarn add svelte-podcast@latest

pnpm add svelte-podcast@latest

Audio Sources

To get started, you'll need an audio file. velte-podcast uses a html <audio /> element under the hood, so any file compatible with the audio element will work.

You can provide your audio files via absolute URL's - hosted online, or relative paths - hosted within your project.

Using a remote file (URL)

An audio url could be a URL to an MP3 file from an RSS feed, like this: https://media.transistor.fm/27a058c9/27b595e2.mp3. It could also be a path to a static file on your server.

import { audio } from 'svelte-podcast';

audio.src.load('https://media.transistor.fm/27a058c9/27b595e2.mp3', {
  title: 'Episode Title',
  artwork: '/artwork.png',
});

Using a local file (relative path)

If you're using SvelteKit, you can store static files in the /static directory. When your site is built, everything in the static directory will be at the root of your site. If you have a file in /static/episides/episode-01.mp3 you could load it as /episides/episode-01.mp3

import { audio } from 'svelte-podcast';

audio.src.load('/episode-audio.mp3', {
  title: 'Episode Title',
  artwork: '/artwork.png',
});

Additional options

Along side your audio source, you can optionally define arbitrary metadata for you to use in your player. Learn more in the api docs

import { audio } from 'svelte-podcast';

audio.src.load(
  // Audio file
  '/episode-audio.mp3',

  // Your custom metadata
  {
    title: 'A deep dive into Svelte Podcast',
    artwork: '/artwork.png',
    guest_name: 'OllieJT',
  },
);

Type Safety

Svelte podast makes it easy for you to associate arbitrary metadata with each audio source. We recommend defining the shape of your metadata in a .d.ts file.

In this example, we'll assume that your metadata consists of an episode title, episode artwork, and an optional episode guest name.

// include this in your /src/app.d.ts file

declare module 'svelte-podcast' {
  interface AudioMetadata {
    title: string;
    artwork: string | null;
  }
}

export {};

If you're using SvelteKit, we recommend keeping this in src/app.d.ts.