first c

2 years ago · 2e11a510b0
commit 2e11a510b0
5 changed files with 202 additions and 0 deletions
--- a/css/main.css
+++ b/css/main.css
@ -0,0 +1,9 @@
+body {
+  font: 20px/1.1em arial, sans-serif;
+  background: lightgray;
+}
+
+#drag-alarm {
+  display: none;
+  background-color: red;
+}
--- a/css/reset.css
+++ b/css/reset.css
@ -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;
+}
--- a/chair.WAV
+++ b/chair.WAV
--- a/index.html
+++ b/index.html
@ -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>
--- a/js/main.js
+++ b/js/main.js
@ -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
+    
+    
+}