first c
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…
Reference in New Issue