initial commit

main.js

@@ -0,0 +1,92 @@
+/* exported app */
+let app = {
+  data() {
+    return {
+      rid: 0,
+      file: null,
+      ready: false,
+      playing: false,
+      ended: false,
+      audio: null,
+      startedDate: null,
+      color: null,
+      remaining: null,
+    };
+  },
+  watch: {
+  },
+  computed: {
+    canPlay() {
+      return this.ready && !this.playing;
+    },
+    canStop() {
+      return this.ready && this.playing;
+    },
+  },
+  methods: {
+    showApp() {
+      document.getElementById("app").setAttribute("style", "");
+    },
+    changeFile(event) {
+      this.ready = false;
+      this.file = URL.createObjectURL(event.target.files[0]);
+      this.audio = new Audio(this.file);
+      this.audio.addEventListener('ended', () => {
+        this.ended = true;
+        this.onStop();
+      });
+      this.audio.addEventListener('loadeddata', () => {
+        this.ready = true;
+      });
+    },
+    onPlay() {
+      this.ended = false;
+      this.playing = true;
+      this.startedDate = new Date();
+      setTimeout(() => this.audio.play(), 5000);
+    },
+    onStop() {
+      this.audio.pause();
+      this.audio.currentTime = 0;
+      this.playing = false;
+    },
+    getColor() {
+      if ((this.playing && ((new Date() - this.startedDate) / 1000) <= 5)) {
+        return '#f00';
+      } else if (this.playing) {
+        return '#0f0';
+      } else if (this.ended) {
+        return '#f50'
+      }
+    },
+    getRemaining() {
+      if (this.ended) {
+        return '00:00';
+      }
+      if (!this.ready || !this.playing) {
+        return '00:05';
+      }
+      const d1 = Math.floor((new Date() - this.startedDate) / 1000);
+      if (d1 < 5) {
+        return `00:${String(Math.floor(5 - d1)).padStart(2, "0")}`;
+      }
+      const d2 = this.audio.duration - d1 + 5;
+      return `${String(Math.floor(d2 / 60)).padStart(2, "0")}:${String(Math.floor(d2) % 60).padStart(2, "0")}`;
+    },
+  },
+  mounted: function () {
+    console.log("app mounted");
+    setTimeout(this.showApp);
+    setInterval(() => {
+      this.rid = Math.random();
+      this.color = this.getColor();
+      this.remaining = this.getRemaining();
+      document.body.setAttribute("style", this.color ? "background: " + this.color : '');
+    }, 200);
+  },
+};
+
+window.onload = () => {
+  app = Vue.createApp(app);
+  app.mount("#app");
+};