diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f2d9d85
--- /dev/null
+++ b/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+ After words
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..249fb41
--- /dev/null
+++ b/script.js
@@ -0,0 +1,48 @@
+const playerButton = document.querySelector('.player-button'),
+ audio = document.querySelector('audio'),
+ playIcon = `
+
+ `,
+ pauseIcon = `
+
+
+`;
+
+function toggleAudio() {
+ if (audio.paused) {
+ audio.play();
+ playerButton.innerHTML = pauseIcon;
+ } else {
+ audio.pause();
+ playerButton.innerHTML = playIcon;
+ }
+}
+
+playerButton.addEventListener('click', toggleAudio);
+
+function audioEnded() {
+ playerButton.innerHTML = playIcon;
+}
+
+audio.onended = audioEnded;
+
+const timeline = document.querySelector('.timeline');
+
+function changeTimelinePosition() {
+ const percentagePosition = (100 * audio.currentTime) / audio.duration;
+ timeline.style.backgroundSize = `${percentagePosition}% 100%`;
+ timeline.value = percentagePosition;
+}
+
+audio.ontimeupdate = changeTimelinePosition;
+
+function changeSeek() {
+ const time = (timeline.value * audio.duration) / 100;
+ audio.currentTime = time;
+}
+
+timeline.addEventListener('change', changeSeek);
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..cf4ea17
--- /dev/null
+++ b/style.css
@@ -0,0 +1,129 @@
+body {
+ /* display: grid
+ grid-template-columns: 100%
+ grid-template-rows: 1fr 1fr 1fr 1fr */
+ height: 100vh;
+ width: 100vw;
+ margin: 0px;
+}
+
+.audio-player {
+ width: 100vw;
+ height: 30 rem;
+ --player-button-width: 3em;
+ --sound-button-width: 2em;
+ --space: .5em;
+ --tw-bg-opacity: 1;
+ --acc-background: rgb(239 239 239/var(--tw-bg-opacity));
+ --acc-background: #d9d9d9;
+ --acc-button: rgb(255 255 255/var(--tw-bg-opacity));
+ --acc-black: rgb(0 0 0/var(--tw-bg-opacity));
+}
+
+.icon-container {
+ width: 100%;
+ height: 100%;
+ background-color: #000000;
+ background-color: var(--acc-black);
+ color: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.audio-icon {
+ width: 90%;
+ height: 90%;
+}
+
+.controls {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width: 100%;
+ /* margin-top: 10px; */
+}
+
+.player-button {
+ background-color: transparent;
+ border: 0;
+ width: var(--player-button-width);
+ height: var(--player-button-width);
+ cursor: pointer;
+ padding: 0;
+ box-shadow: 0 0 20px 2px #00000040;
+}
+
+
+.timeline {
+ -webkit-appearance: none;
+ width: calc(100% - (var(--player-button-width) + var(--sound-button-width) + var(--space)));
+ height: .5em;
+ background-color: var(--acc-background);
+ border-radius: 5px;
+ background-size: 0% 100%;
+ background-image: linear-gradient(#00000080, var(--acc-background));
+ background-repeat: no-repeat;
+ margin-right: var(--space);
+ width: 100vw;
+ }
+
+ .timeline::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: 1em;
+ height: 1em;
+ border-radius: 50%;
+ cursor: pointer;
+ opacity: 0;
+ transition: all .1s;
+ background-color: var(--acc-background);
+ }
+
+ .timeline::-moz-range-thumb {
+ -webkit-appearance: none;
+ width: 1em;
+ height: 1em;
+ border-radius: 50%;
+ cursor: pointer;
+ opacity: 0;
+ transition: all .1s;
+ background-color: var(--acc-background);
+ }
+
+ .timeline::-ms-thumb {
+ -webkit-appearance: none;
+ width: 1em;
+ height: 1em;
+ border-radius: 50%;
+ cursor: pointer;
+ opacity: 0;
+ transition: all .1s;
+ background-color: var(--acc-background);
+ }
+
+ .timeline::-webkit-slider-runnable-track {
+ -webkit-appearance: none;
+ box-shadow: none;
+ border: none;
+ background: transparent;
+ }
+
+ .timeline::-moz-range-track {
+ -webkit-appearance: none;
+ box-shadow: none;
+ border: none;
+ background: transparent;
+ }
+
+ .timeline::-ms-track {
+ -webkit-appearance: none;
+ box-shadow: none;
+ border: none;
+ background: transparent;
+ }
+
+ iframe {
+ width: 100vw;
+ height: 100vh;
+ border: none;
+ }
\ No newline at end of file