initial commit
This commit is contained in:
Klemek
@@ -0,0 +1 @@
|
||||
.idea
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tape Record</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script type="text/javascript" src="main.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<main id="app" style="display:none">
|
||||
<h1>Tape Record</h1>
|
||||
<br>
|
||||
<p>
|
||||
<label for="file">Select audio file:</label>
|
||||
<input type="file" id="file" accept="audio/*" v-on:change="changeFile"/><br>
|
||||
</p>
|
||||
<div>
|
||||
<button @click="onPlay" :disabled="!canPlay">⏵Play</button>
|
||||
<button @click="onStop" :disabled="!canStop">⏹ Stop</button>
|
||||
</div>
|
||||
<h3 :id="rid" :title="rid" :style="{color: color}">{{ remaining }}</h3>
|
||||
<small><a href="https://github.com/klemek" target="_blank">@Klemek</a> - <a href="https://github.com/klemek/tape-record" target="_blank">Github Repository</a> - 2024</small>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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");
|
||||
};
|
||||
@@ -0,0 +1,171 @@
|
||||
/*
|
||||
=================================================
|
||||
https://www.joshwcomeau.com/css/custom-css-reset/
|
||||
=================================================
|
||||
*/
|
||||
|
||||
/*
|
||||
1. Use a more-intuitive box-sizing model.
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/*
|
||||
2. Remove default margin
|
||||
*/
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
/*
|
||||
3. Allow percentage-based heights in the application
|
||||
*/
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
/*
|
||||
Typographic tweaks!
|
||||
4. Add accessible line-height
|
||||
5. Improve text rendering
|
||||
*/
|
||||
body {
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
/*
|
||||
6. Improve media defaults
|
||||
*/
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
/*
|
||||
7. Remove built-in form typography styles
|
||||
*/
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
/*
|
||||
8. Avoid text overflows
|
||||
*/
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
/*
|
||||
9. Create a root stacking context
|
||||
*/
|
||||
#root,
|
||||
#__next {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/*
|
||||
=================================================
|
||||
CUSTOM STYLE
|
||||
=================================================
|
||||
*/
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
|
||||
|
||||
:root {
|
||||
/* https://materialui.co/colors/ */
|
||||
--hue-primary: 65.52;
|
||||
--sat-primary: 20%;
|
||||
--background: hsl(var(--hue-primary), var(--sat-primary), 96.08%);
|
||||
--background-primary: hsl(var(--hue-primary), var(--sat-primary), 93.33%);
|
||||
--background-secondary: hsl(var(--hue-primary), var(--sat-primary), 90%);
|
||||
--color-primary: hsl(var(--hue-primary), var(--sat-primary), 50%);
|
||||
--text-primary: hsl(var(--hue-primary), var(--sat-primary), 25%);
|
||||
--text-secondary: hsl(var(--hue-primary), var(--sat-primary), 30%);
|
||||
}
|
||||
|
||||
/*
|
||||
=================================================
|
||||
https://blog.koley.in/2019/339-bytes-of-responsive-css
|
||||
https://www.swyx.io/css-100-bytes
|
||||
https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41
|
||||
=================================================
|
||||
*/
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
color: var(--text-primary);
|
||||
font-family: "Roboto", Verdana, serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1.5rem;
|
||||
margin: auto;
|
||||
background-color: var(--background-primary);
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 1em 0 0.5em;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: 2em;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
textarea,
|
||||
input,
|
||||
select,
|
||||
.mono {
|
||||
font-family: "Roboto Mono", monospace;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
main {
|
||||
max-width: 42rem;
|
||||
}
|
||||
table {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user