diff --git a/public/js/webComponents/musicPlayer.js b/public/js/webComponents/musicPlayer.js
new file mode 100644
index 0000000..283f002
--- /dev/null
+++ b/public/js/webComponents/musicPlayer.js
@@ -0,0 +1,51 @@
+const template = document.createElement("template");
+
+template.innerHTML = `
+<style>
+	.cover {
+		object-fit: cover;
+	}
+</style>
+
+<figure class="mplayer" part="main">
+	<div class="coverContainer" part="coverContainer">
+		<img src="" class="cover" part="cover">
+	</div>
+	<div part="captionAndPlayer">
+		<figcaption part="caption">
+			<span class="title" part="title"></span><br /><span class="artist" part="artist"></span>
+		</figcaption>
+		<audio controls src="" class="player" part="player"></audio>
+	</div>
+</figure>
+`;
+
+class mplayer extends HTMLElement {
+	constructor() {
+		super();
+
+		this._shadowRoot = this.attachShadow({ mode: "open" });
+		this._shadowRoot.appendChild(template.content.cloneNode(true));
+		this.$mplayer = this._shadowRoot.querySelector(".mplayer");
+	}
+
+	static get observedAttributes() {
+		return ["title", "artist", "media_url", "cover_url"];
+	}
+
+	attributeChangedCallback(name, oldVal, newVal) {
+		if (oldVal != newVal) {
+			this[name] = newVal;
+			this.render();
+		}
+	}
+
+	render() {
+		this.$mplayer.querySelector(".title").innerHTML = this.title;
+		this.$mplayer.querySelector(".artist").innerHTML = this.artist;
+		this.$mplayer.querySelector(".player").src = this.media_url;
+		this.$mplayer.querySelector(".coverContainer > img").src = this.cover_url;
+	}
+}
+
+window.customElements.define("wc-mplayer", mplayer);