From 51489ec22a7ad046eedaf3268859fd13defda0ca Mon Sep 17 00:00:00 2001
From: Grant Shangreaux <shshoshin@protonmail.com>
Date: Sat, 4 Jan 2020 21:38:00 -0600
Subject: Add: play and pause buttons to tape deck
---
tape-deck.html | 14 +++++++++--
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;
- });
- });
--
cgit v1.2.3