diff options
| -rw-r--r-- | index.html | 13 | ||||
| -rw-r--r-- | tape-deck.html | 5 | ||||
| -rw-r--r-- | tape-deck.js | 2 |
3 files changed, 11 insertions, 9 deletions
@@ -1,23 +1,24 @@ <!DOCTYPE html> <html lang=en> - <head> - <meta charset=UTF-8> + <head> + <meta charset=UTF-8> + <link rel="stylesheet" type="text/css" href="style.css"> <title>Tapes</title> </head> <body> - <div> + <div class="intro"> <p> Still in the works, but you can listen to the music of my 2019 music journal. I intend to add writings to add to the musical/life journey of the past year. More tapes will be added to the collection over time. Enjoy! sh.sh. </p> </div> - <div display="flex" flex-direction="row"> + <div class="tape-container"> <a href="tape-deck.html?side=A"> - <img src="images/side-a.jpeg"> + <img src="images/side-a.jpeg" class="tape"> </a> <a href="tape-deck.html?side=B"> - <img src="images/side-b.jpeg"> + <img src="images/side-b.jpeg" class="tape"> </a> </div> </body> diff --git a/tape-deck.html b/tape-deck.html index 2d88d9c..8ad58f1 100644 --- a/tape-deck.html +++ b/tape-deck.html @@ -2,12 +2,13 @@ <html lang=en> <head> <meta charset=UTF-8> + <link rel="stylesheet" type="text/css" href="style.css"> <title>2019 Mix Side A - Winter</title> </head> <body> - <div display="flex"> + <div class="tape-deck-container"> <div class="tape-deck"> - <img id="tape-deck" src="images/cool-deck.png"> + <img id="tape-deck" class="tape-deck-img" src="images/cool-deck.png"> </div> <div class="buttons" display="flex" flex-direction="row" justify-content="center"> <button id="playButton" onclick="play()">Play</button> diff --git a/tape-deck.js b/tape-deck.js index f13ea8d..04b6d2d 100644 --- a/tape-deck.js +++ b/tape-deck.js @@ -1,6 +1,6 @@ const urlParams = new URLSearchParams(window.location.search); const currentSide = urlParams.get("side"); -const tape = new Audio(`audio/2019-mix-side-${currentSide}.ogg`); +const tape = new Audio(`audio/2019-mix-side-${currentSide}.mp3`); const pressPlaySound = new Audio("audio/tape-start.mp3"); pressPlaySound.onended = (event) => { tape.play(); }; |