From 37f04518d0acfc00edb56dbb705dd6b0e94325fe Mon Sep 17 00:00:00 2001 From: Angeliki Date: Tue, 7 May 2019 15:58:53 +0200 Subject: [PATCH] added javascript/record mic audio --- index.php | 26 ++- project/scripts/app.js | 174 ++++++++++++++++++ .../mediaDevices-getUserMedia-polyfill.js | 36 ++++ project/scripts/respond.js | 6 + project/styles/app.css | 146 +++++++++++++++ 5 files changed, 384 insertions(+), 4 deletions(-) create mode 100644 project/scripts/app.js create mode 100644 project/scripts/mediaDevices-getUserMedia-polyfill.js create mode 100644 project/scripts/respond.js create mode 100644 project/styles/app.css diff --git a/index.php b/index.php index df08428..47a2f23 100644 --- a/index.php +++ b/index.php @@ -1,6 +1,9 @@ + + + ',d.insertBefore(f,e),c=42===g.offsetWidth,d.removeChild(f),{matches:c,media:a}}}(document); + +/*! Respond.js v1.3.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */ +(function(a){"use strict";function x(){u(!0)}var b={};if(a.respond=b,b.update=function(){},b.mediaQueriesSupported=a.matchMedia&&a.matchMedia("only all").matches,!b.mediaQueriesSupported){var q,r,t,c=a.document,d=c.documentElement,e=[],f=[],g=[],h={},i=30,j=c.getElementsByTagName("head")[0]||d,k=c.getElementsByTagName("base")[0],l=j.getElementsByTagName("link"),m=[],n=function(){for(var b=0;l.length>b;b++){var c=l[b],d=c.href,e=c.media,f=c.rel&&"stylesheet"===c.rel.toLowerCase();d&&f&&!h[d]&&(c.styleSheet&&c.styleSheet.rawCssText?(p(c.styleSheet.rawCssText,d,e),h[d]=!0):(!/^([a-zA-Z:]*\/\/)/.test(d)&&!k||d.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&m.push({href:d,media:e}))}o()},o=function(){if(m.length){var b=m.shift();v(b.href,function(c){p(c,b.href,b.media),h[b.href]=!0,a.setTimeout(function(){o()},0)})}},p=function(a,b,c){var d=a.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),g=d&&d.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+b+"$2$3")},i=!g&&c;b.length&&(b+="/"),i&&(g=1);for(var j=0;g>j;j++){var k,l,m,n;i?(k=c,f.push(h(a))):(k=d[j].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1,f.push(RegExp.$2&&h(RegExp.$2))),m=k.split(","),n=m.length;for(var o=0;n>o;o++)l=m[o],e.push({media:l.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:f.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},s=function(){var a,b=c.createElement("div"),e=c.body,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",e||(e=f=c.createElement("body"),e.style.background="none"),e.appendChild(b),d.insertBefore(e,d.firstChild),a=b.offsetWidth,f?d.removeChild(e):e.removeChild(b),a=t=parseFloat(a)},u=function(b){var h="clientWidth",k=d[h],m="CSS1Compat"===c.compatMode&&k||c.body[h]||k,n={},o=l[l.length-1],p=(new Date).getTime();if(b&&q&&i>p-q)return a.clearTimeout(r),r=a.setTimeout(u,i),void 0;q=p;for(var v in e)if(e.hasOwnProperty(v)){var w=e[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?t||s():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?t||s():1)),w.hasquery&&(z&&A||!(z||m>=x)||!(A||y>=m))||(n[w.media]||(n[w.media]=[]),n[w.media].push(f[w.rules]))}for(var C in g)g.hasOwnProperty(C)&&g[C]&&g[C].parentNode===j&&j.removeChild(g[C]);for(var D in n)if(n.hasOwnProperty(D)){var E=c.createElement("style"),F=n[D].join("\n");E.type="text/css",E.media=D,j.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(c.createTextNode(F)),g.push(E)}},v=function(a,b){var c=w();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},w=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}();n(),b.update=n,a.addEventListener?a.addEventListener("resize",x,!1):a.attachEvent&&a.attachEvent("onresize",x)}})(this); diff --git a/project/styles/app.css b/project/styles/app.css new file mode 100644 index 0000000..c001f32 --- /dev/null +++ b/project/styles/app.css @@ -0,0 +1,146 @@ + +.wrapper { + height: 100%; + display: flex; + flex-direction: column; +} + + +.main-controls { + padding: 0.5rem 0; +} + +canvas { + display: block; + margin-bottom: 0.5rem; +} + +#buttons { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +#buttons button { + font-size: 1rem; + padding: 1rem; + width: calc(50% - 0.25rem); +} + +button { + font-size: 1rem; + background: #0088cc; + text-align: center; + color: white; + border: none; + transition: all 0.2s; + padding: 0.5rem; +} + +button:hover, button:focus { + box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 1); + background: #0ae; +} + +button:active { + box-shadow: inset 0px 0px 20px rgba(0,0,0,0.5); + transform: translateY(2px); +} + + +/* Make the clips use as much space as possible, and + * also show a scrollbar when there are too many clips to show + * in the available space */ +.sound-clips { + flex: 1; + overflow: auto; +} + +section, article { + display: block; +} + +.clip { + padding-bottom: 1rem; +} + +audio { + width: 100%; + display: block; + margin: 1rem auto 0.5rem; +} + +.clip p { + display: inline-block; + font-size: 1rem; +} + +.clip button { + font-size: 1rem; + float: right; +} + +button.delete { + background: #f00; + padding: 0.5rem 0.75rem; + font-size: 0.8rem; +} + +/* Checkbox hack to control information box display */ + +label { + font-size: 3rem; + position: absolute; + top: 2px; + right: 3px; + z-index: 5; + cursor: pointer; +} + +input[type=checkbox] { + position: absolute; + top: -100px; +} + +aside { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform: translateX(100%); + transition: 0.3s all ease-out; + background-color: #efefef; + padding: 1rem; +} + +aside p { + font-size: 1.2rem; + margin: 0.5rem 0; +} + +aside a { + color: #666; +} + +/* Toggled State of information box */ +input[type=checkbox]:checked ~ aside { + transform: translateX(0); +} + +/* Cursor when clip name is clicked over */ + +.clip p { + cursor: pointer; +} + +/* Adjustments for wider screens */ +@media all and (min-width: 800px) { + /* Don't take all the space as readability is lost when line length + goes past a certain size */ + .wrapper { + width: 90%; + max-width: 1000px; + margin: 0 auto; + } +}