51 lines
1.9 KiB
HTML
51 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<script type="module" src="assets/js/main.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Nathan's Web Components</h1>
|
|
<p>A bunch of web components for my own convenience.</p>
|
|
</header>
|
|
<h2>Audio Player</h2>
|
|
<p>A handy audio player widget.<br><br>Attributes:</p>
|
|
<ul>
|
|
<li>audio: a URI pointing to an audio file</li>
|
|
<li>cover: a URI pointing to a cover image</li>
|
|
<li>cover_alt: alt text for the cover image</li>
|
|
</ul>
|
|
<p>Slots:</p>
|
|
<ul>
|
|
<li>title: title for the audio file</li>
|
|
<li>description: a description of the audio file</li>
|
|
</ul>
|
|
<p>CSS Custom Properties:</p>
|
|
<ul>
|
|
<li>--background</li>
|
|
</ul>
|
|
<p>Example usage:</p>
|
|
<pre>
|
|
<code>
|
|
<audio-player
|
|
cover="/assets/images/doge.jpg"
|
|
cover_alt="A snoozy doge!"
|
|
audio="assets/audio/KARATE KID - TOXIC (ILLFD022).wav">
|
|
<h3 slot="title">Toxic - Britney Spears (Karate Kid Bootleg)</h3>
|
|
<p slot="description">A massive DnB roller bootleg of a Britney Spears classic: <em>Toxic</em>.</p>
|
|
</audio-player>
|
|
</code>
|
|
</pre>
|
|
<audio-player
|
|
cover="/assets/images/doge.jpg"
|
|
cover_alt="A snoozy doge!"
|
|
audio="assets/audio/KARATE KID - TOXIC (ILLFD022).wav">
|
|
<h3 slot="title">Toxic - Britney Spears (Karate Kid Bootleg)</h3>
|
|
<p slot="description">A massive DnB roller bootleg of a Britney Spears classic: <em>Toxic</em>.</p>
|
|
</audio-player>
|
|
</main>
|
|
</body>
|
|
</html>
|