add index.html script and styles

1 year ago · 46975f8ddb
--- a/index.html
+++ b/index.html
@@ -0,0 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>After words</title>
    <link rel="stylesheet" type="text/css" href="style.css">
 </head>

 <body>
    <div class="audio-player">
        <div class="icon-container">
            <div class="controls">
                <button class="player-button">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="rgb(255 255 255/var(--tw-bg-opacity))">
                        <path fill-rule="evenodd"
                            d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
                            clip-rule="evenodd" />
                    </svg>
                </button>
                <input type="range" class="timeline" max="100" value="0">
            </div>
            <audio preload="auto" loop
                src="https://blakeney.s3.ap-southeast-2.amazonaws.com/Machine+Listening+-+After+Words+-+Stereo+Master.wav"></audio>
        </div>
    </div>
    <iframe class="website" src="https://data-relations.netlify.app/">
    </iframe>
 </body>
 <script src="script.js"></script>


 </html>
--- a/script.js
+++ b/script.js
@@ -0,0 +1,48 @@
 const playerButton = document.querySelector('.player-button'),
    audio = document.querySelector('audio'),
    playIcon = `
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="rgb(255 255 255/var(--tw-bg-opacity))">
    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
  </svg>
      `,
    pauseIcon = `
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="rgb(255 255 255/var(--tw-bg-opacity))">
  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
 </svg>

 `;

 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);
--- a/style.css
+++ 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; 
  }