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