klemek/tape-record
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Klemek
2024-10-29 01:08:51 +01:00
commit eaf86a51ca
4 changed files with 291 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -0,0 +1 @@
.idea
index.html
+27
View File
@@ -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>&nbsp;
<input type="file" id="file" accept="audio/*" v-on:change="changeFile"/><br>
</p>
<div>
<button @click="onPlay" :disabled="!canPlay">⏵Play</button>&nbsp;
<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>
main.js
+92
View File
@@ -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");
};
style.css
+171
View File
@@ -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;
}
}