diff options
| author | Grant Shangreaux <shshoshin@protonmail.com> | 2020-01-04 21:38:00 -0600 |
|---|---|---|
| committer | Grant Shangreaux <shshoshin@protonmail.com> | 2020-01-04 21:38:00 -0600 |
| commit | 51489ec22a7ad046eedaf3268859fd13defda0ca (patch) | |
| tree | 45ac7e36e37ecc1ebedc2a56bfb88e6a11242d59 | |
| parent | e5022cc63947db8e9bd632a79e1ccf8498574aac (diff) | |
Add: play and pause buttons to tape deck
| -rw-r--r-- | tape-deck.html | 14 | ||||
| -rw-r--r-- | tape-deck.js | 75 |
2 files changed, 55 insertions, 34 deletions
diff --git a/tape-deck.html b/tape-deck.html index 3203fd4..6a260ff 100644 --- a/tape-deck.html +++ b/tape-deck.html @@ -5,8 +5,18 @@ <title>2019 Mix Side A - Winter</title> </head> <body> - <img src="images/cool-deck.gif"> - <p id="notes"></p> + <div display="flex"> + <div class="tape-deck"> + <img src="images/cool-deck.gif"> + </div> + <div class="buttons" display="flex" flex-direction="row" justify-content="center"> + <button id="playButton" onclick="play()">Play</button> + <button id="pauseButton" onclick="pause()">Pause</button> + </div> + <div class="notes"> + <p id="notes"></p> + </div> + </div> <script src="tape-deck.js"></script> </body> </html> diff --git a/tape-deck.js b/tape-deck.js index c5b8db7..a682234 100644 --- a/tape-deck.js +++ b/tape-deck.js @@ -1,44 +1,55 @@ const urlParams = new URLSearchParams(window.location.search); const currentSide = urlParams.get("side"); -const sfx = new Audio("audio/tape-start.mp3"); const tape = new Audio(`audio/2019-mix-side-${currentSide}.ogg`); -let display = document.getElementById("notes"); -let currentTrackIndex = 0; - -fetch(`side${currentSide}.json`) - .then(response => response.json()) - .then((trackData) => { - const startTimes = trackData.map( t => t.start ); - sfx.play(); +const sfx = new Audio("audio/tape-start.mp3"); +sfx.onended = (event) => { + tape.play(); +} - sfx.onended = (event) => { - tape.controls = true; - tape.play(); - } +let display = document.getElementById("notes"); +let currentTrackIndex = 0; +let hasStarted = false; + +function play() { + fetch(`side${currentSide}.json`) + .then(response => response.json()) + .then((trackData) => { + if (!hasStarted) { + sfx.play(); + hasStarted = true; + + tape.addEventListener("timeupdate", (event) => { + const time = tape.currentTime; + const currentTrack = getTrack(time, currentTrackIndex, trackData); + display.textContent = currentTrack.title; + }); + } else { + tape.play(); + } + }); +} - function isLastTrack() { - return currentTrackIndex + 1 === startTimes.length; - } +function pause() { + tape.pause(); +} - function getTrack(time) { - const nextIndex = currentTrackIndex + 1 +function isLastTrack(current, tracks) { + return current + 1 === tracks.length; +} - if (isLastTrack()) { - return trackData[trackData.length - 1]; - } else { - if (time >= startTimes[nextIndex]) { - currentTrackIndex = nextIndex; - } +function getTrack(time, currentTrackIndex, trackData) { + const nextIndex = currentTrackIndex + 1 + const startTimes = trackData.map( t => t.start ); - return trackData[currentTrackIndex]; - } + if (isLastTrack(currentTrackIndex, startTimes)) { + return trackData[trackData.length - 1]; + } else { + if (time >= startTimes[nextIndex]) { + currentTrackIndex = nextIndex; } + return trackData[currentTrackIndex]; + } +} - tape.addEventListener("timeupdate", (event) => { - const time = tape.currentTime; - const currentTrack = getTrack(time, trackData); - display.textContent = currentTrack.title; - }); - }); |