master
erica-garga 3 years ago
commit 2e11a510b0

@ -0,0 +1,9 @@
body {
font: 20px/1.1em arial, sans-serif;
background: lightgray;
}
#drag-alarm {
display: none;
background-color: red;
}

@ -0,0 +1,103 @@
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
margin: 0;
padding: 0;
font-size: 100%;
font-weight: normal;
}
ul {
list-style: none;
}
input,
textarea,
select,
button {
color: inherit;
font: inherit;
letter-spacing: inherit;
}
input,
textarea,
button {
border: 1px solid gray;
}
button {
border-radius: 0;
padding: 0.75em 1em;
background-color: transparent;
}
button * {
pointer-events: none;
}
embed,
iframe,
img,
object,
video {
display: block;
max-width: 100%;
}
table {
table-layout: fixed;
width: 100%;
}
[hidden] {
display: none !important;
}
noscript {
display: block;
margin-bottom: 1em;
margin-top: 1em;
}
/* Buttons and input buttons */
[role="button"],
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
background: none;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-appearance: button;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
border: 0;
padding: 0;
}

Binary file not shown.

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>grr</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<input type="range" id="slider" onmousedown="slideon(this)" onmouseup="slideoff(this)" oninput="trill(this)">
<div id="drag-alarm">something is being dragged at value</div>
<br>
<br>
<br>
<h1 id="trill">noise</h1>
<audio id="player"controls src="./drag chair.WAV"></audio>
<button id="button">play</button>
</body>
<script type="text/javascript" src="js/main.js"></script>
</html>

@ -0,0 +1,58 @@
var trilled = document.getElementById("trill")
var alarm = document.getElementById("drag-alarm");
function slideon(id) {
alarm.style.display = "block";
console.log("SLIDER DOWN")
}
function slideoff(id) {
alarm.style.display = "none";
}
function trill(id) {
var aaa = (Math.round(Math.random()))*2
trilled.style.transform = `rotate(${aaa}deg)`
}
// for the audio
let player = document.querySelector('#player')
let button = document.querySelector('#button')
let playing = false
button.onclick = function(){
console.log("hellooo")
loop_segment(player)
}
/*
function change_segment(audio) {
if (playing == true) {
clearInterval(audio);
loop_segment(audio);
} else {
loop_segment(audio)
}
}*/
var audio_len = player.duration
function loop_segment(audio) {
playing = true
console.log(audio_len)
var duration = 0.3 //sec
var start_time = Math.random()* (audio_len - duration)
console.log(start_time)
audio.play()
setInterval(function(){
audio.currentTime = start_time
}, duration*1000)
//clearInterval()
//Math.random() * (max - min) + min
}
Loading…
Cancel
Save