A Svelte and Tailwind library for analogue vinyl record emulation with an interactive UI component.
Install the package via npm or another package manager of choice:
npm i github:ThatOtherAndrew/VirtualVinylWarning
If you are using bun, ensure that the postinstall script is run:
bun pm trust virtual-vinylInclude in your TailwindCSS file (e.g. /src/routes/layout.css if using SvelteKit):
/* relative path to node_modules/virtual-vinyl */
@source '../../node_modules/virtual-vinyl';Import the VinylRecord component, and PlaybackController class. A minimal example is shown below:
script>gt;
import { VinylRecord, PlaybackController } from 'virtual-vinyl';
let speed = $state(0);
const controller = new PlaybackController();
const audioUrl = 'https://upload.wikimedia.org/wikipedia/commons/0/08/Ars_Niemo_-_Small_Talk_Build_IV.ogg';
$effect(() =>gt; {
controller.loadFromUrl(audioUrl);
});
function playPause() {
speed = speed === 1 ? 0 : 1;
}
script>
<
<t;VinylRecord {controller} bind:speed img="https://picsum.photos/200" />
<;
<;button onclick={playPause}>Play/Pausebutton>gt; 