n_u/Web_Components
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add audio player component

Browse Source
This commit is contained in:
Nathan Upchurch 2024-01-20 13:57:19 -06:00
parent 2dc115b3e4
commit abe4a52de4
6 changed files with 99 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/audio/KARATE KID - TOXIC (ILLFD022).wav Normal file
View File

Binary file not shown.

4
assets/css/main.css Normal file
View File

@ -0,0 +1,4 @@
main {
margin: auto;
width: 50rem;
}

BIN
assets/images/doge.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

1
assets/js/main.js Normal file
View File

@ -0,0 +1 @@
import '../../components/audioPlayer/audioPlayer.js';

73
components/audioPlayer/audioPlayer.js Normal file
View File

@ -0,0 +1,73 @@
const template = document.createElement('template');
template.innerHTML = `
<style>
audio {
border-radius: 0px 0px 10px 10px;
}
#audioPlayerContainer {
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
display: flex;
flex-flow: column nowrap;
}
#audioDetailsContainer {
display: flex;
flex-flow: row nowrap;
}
#audioTextContainer {
padding: 0 1rem 0 1rem;
}
img {
border-radius: 10px 0px 0px 0px;
height: 10rem;
object-fit: cover;
width: 10rem;
}
</style>
<div id="audioPlayerContainer">
<div id="audioDetailsContainer">
<img src="" alt="">
<div id="audioTextContainer">
<h3>Title</h3>
<p>Description</p>
</div>
</div>
<audio controls>
<source src="">
Your browser does not support the audio element.
</audio>
</div>
`
class AudioPlayer extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({ 'mode': 'open' });
this._shadowRoot.appendChild(template.content.cloneNode(true));
this.$audioPlayer = this._shadowRoot.querySelector('#audioPlayerContainer');
}
static get observedAttributes() {
return ['audio', 'cover', 'cover_alt', 'title', 'description'];
}
attributeChangedCallback(name, oldVal, newVal) {
if (oldVal != newVal) {
this[name] = newVal;
this.render();
}
}
render() {
this.cover ? this.$audioPlayer.querySelector('img').src = this.cover : null;
this.cover_alt ? this.$audioPlayer.querySelector('img').alt = this.cover_alt : null;
this.title ? this.$audioPlayer.querySelector('div h3').innerHTML = this.title : null;
this.description ? this.$audioPlayer.querySelector('div p').innerHTML = this.description : null;
this.audio ? this.$audioPlayer.querySelector('audio source').src = this.audio : null;
}
}
window.customElements.define('audio-player', AudioPlayer);

21
index.html Normal file
View File

@ -0,0 +1,21 @@
<!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>
<h1>Nathan's Web Components</h1>
<p>A bunch of web components for my own convenience.</p>
<h2>Audio Player</h2>
A handy audio player widget. Title is an H3.
<audio-player
title="Toxic - Britney Spears (Karate Kid Bootleg)"
description="A massive DnB roller bootleg of a Britney Spears classic: <em>Toxic</em>."
cover="/assets/images/doge.jpg"
cover_alt="A snoozy doge!"
audio="assets/audio/KARATE KID - TOXIC (ILLFD022).wav">
</main>
</body>
</html>