Add audio player component

components/audioPlayer/audioPlayer.js

@@ -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);