A Gift of Sound and Vision — Affecting images using the Web Audio API [Live]

html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;touch-action:manipulation;}body{position:relative;min-height:100%;font-feature-settings:’kern’;}*,*::before,*::after{border-width:0;border-style:solid;box-sizing:border-box;}main{display:block;}hr{border-top-width:1px;box-sizing:content-box;height:0;overflow:visible;}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:1em;}a{background-color:transparent;color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit;}abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bold;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button::-moz-focus-inner,[type=”button”]::-moz-focus-inner,[type=”reset”]::-moz-focus-inner,[type=”submit”]::-moz-focus-inner{border-style:none;padding:0;}fieldset{padding:0.35em 0.75em 0.625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type=”checkbox”],[type=”radio”]{box-sizing:border-box;padding:0;}[type=”number”]::-webkit-inner-spin-button,[type=”number”]::-webkit-outer-spin-button{-webkit-appearance:none!important;}input[type=”number”]{-moz-appearance:textfield;}[type=”search”]{-webkit-appearance:textfield;outline-offset:-2px;}[type=”search”]::-webkit-search-decoration{-webkit-appearance:none!important;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:-webkit-box;display:-webkit-list-item;display:-ms-list-itembox;display:list-item;}template{display:none;}[hidden]{display:none!important;}body,blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0;}button{background:transparent;padding:0;}fieldset{margin:0;padding:0;}ol,ul{margin:0;padding:0;}textarea{resize:vertical;}button,[role=”button”]{cursor:pointer;}button::-moz-focus-inner{border:0!important;}table{border-collapse:collapse;}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit;}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;}img,video{max-width:100%;height:auto;}[data-js-focus-visible] :focus:not([data-focus-visible-added]){outline:none;box-shadow:none;}select::-ms-expand{display:none;}body{font-family:-apple-system,BlinkMacSystemFont,”Segoe UI”,Helvetica,Arial,sans-serif,”Apple Color Emoji”,”Segoe UI Emoji”,”Segoe UI Symbol”;color:rgba(255, 255, … Read more A Gift of Sound and Vision — Affecting images using the Web Audio API [Live]

html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;touch-action:manipulation;}body{position:relative;min-height:100%;font-feature-settings:’kern’;}*,*::before,*::after{border-width:0;border-style:solid;box-sizing:border-box;}main{display:block;}hr{border-top-width:1px;box-sizing:content-box;height:0;overflow:visible;}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:1em;}a{background-color:transparent;color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit;}abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bold;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button::-moz-focus-inner,[type=”button”]::-moz-focus-inner,[type=”reset”]::-moz-focus-inner,[type=”submit”]::-moz-focus-inner{border-style:none;padding:0;}fieldset{padding:0.35em 0.75em 0.625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type=”checkbox”],[type=”radio”]{box-sizing:border-box;padding:0;}[type=”number”]::-webkit-inner-spin-button,[type=”number”]::-webkit-outer-spin-button{-webkit-appearance:none!important;}input[type=”number”]{-moz-appearance:textfield;}[type=”search”]{-webkit-appearance:textfield;outline-offset:-2px;}[type=”search”]::-webkit-search-decoration{-webkit-appearance:none!important;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:-webkit-box;display:-webkit-list-item;display:-ms-list-itembox;display:list-item;}template{display:none;}[hidden]{display:none!important;}body,blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0;}button{background:transparent;padding:0;}fieldset{margin:0;padding:0;}ol,ul{margin:0;padding:0;}textarea{resize:vertical;}button,[role=”button”]{cursor:pointer;}button::-moz-focus-inner{border:0!important;}table{border-collapse:collapse;}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit;}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;}img,video{max-width:100%;height:auto;}[data-js-focus-visible] :focus:not([data-focus-visible-added]){outline:none;box-shadow:none;}select::-ms-expand{display:none;}body{font-family:-apple-system,BlinkMacSystemFont,”Segoe UI”,Helvetica,Arial,sans-serif,”Apple Color Emoji”,”Segoe UI Emoji”,”Segoe UI Symbol”;color:rgba(255, 255, 255, 0.92);background:#1A202C;-webkit-transition:background-color 0.2s;transition:background-color 0.2s;line-height:1.5;}*::-webkit-input-placeholder{color:rgba(255, 255, 255, 0.24);}*::-moz-placeholder{color:rgba(255, 255, 255, 0.24);}*:-ms-input-placeholder{color:rgba(255, 255, 255, 0.24);}*::placeholder{color:rgba(255, 255, 255, 0.24);}*,*::before,::after{border-color:rgba(255, 255, 255, 0.16);word-wrap:break-word;}.css-1fkwbsv{padding-left:1rem;padding-right:1rem;padding-top:8rem;padding-bottom:8rem;font-size:1.125rem;}

.css-1tgzea1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:fixed;z-index:10;padding:1rem;top:0;left:0;right:0;border-bottom:0;border-color:rgba(0, 0, 0, 0.16);}@media screen and (min-width: 48em){.css-1tgzea1{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}}

.css-1jys9sb{width:100%;margin-left:auto;margin-right:auto;max-width:56rem;padding-left:1rem;padding-right:1rem;}

.css-1yfi0n3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-1yfi0n3>*:not(style)~*:not(style){margin-top:5rem;-webkit-margin-start:0;margin-inline-start:0;}

.css-8atqhb{width:100%;}.css-uhku5s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-uhku5s>*:not(style)~*:not(style){margin-top:2rem;-webkit-margin-start:0;margin-inline-start:0;}

.css-1teng71{font-family:-apple-system,BlinkMacSystemFont,”Segoe UI”,Helvetica,Arial,sans-serif,”Apple Color Emoji”,”Segoe UI Emoji”,”Segoe UI Symbol”;font-weight:700;font-size:1.5rem;line-height:1.33;text-align:center;}@media screen and (min-width: 48em){.css-1teng71{font-size:1.875rem;line-height:1.2;}}.css-mko72a{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-transition:all 250ms;transition:all 250ms;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:none;width:auto;line-height:1.2;border-radius:0.375rem;font-weight:600;height:3rem;min-width:3rem;font-size:1.125rem;padding-left:1.5rem;padding-right:1.5rem;background:#FAF089;color:#1A202C;}.css-mko72a:focus,.css-mko72a[data-focus]{box-shadow:0 0 0 3px rgba(66, 153, 225, 0.6);}.css-mko72a[disabled],.css-mko72a[disabled]:focus,.css-mko72a[disabled]:hover,.css-mko72a[aria-disabled=true],.css-mko72a[aria-disabled=true]:focus,.css-mko72a[aria-disabled=true]:hover,.css-mko72a[data-disabled],.css-mko72a[data-disabled]:focus,.css-mko72a[data-disabled]:hover{opacity:0.4;cursor:not-allowed;box-shadow:none;}.css-mko72a:hover,.css-mko72a[data-hover]{background:#F6E05E;}.css-mko72a:hover[disabled],.css-mko72a[data-hover][disabled],.css-mko72a:hover[disabled]:focus,.css-mko72a[data-hover][disabled]:focus,.css-mko72a:hover[disabled]:hover,.css-mko72a[data-hover][disabled]:hover,.css-mko72a:hover[aria-disabled=true],.css-mko72a[data-hover][aria-disabled=true],.css-mko72a:hover[aria-disabled=true]:focus,.css-mko72a[data-hover][aria-disabled=true]:focus,.css-mko72a:hover[aria-disabled=true]:hover,.css-mko72a[data-hover][aria-disabled=true]:hover,.css-mko72a:hover[data-disabled],.css-mko72a[data-hover][data-disabled],.css-mko72a:hover[data-disabled]:focus,.css-mko72a[data-hover][data-disabled]:focus,.css-mko72a:hover[data-disabled]:hover,.css-mko72a[data-hover][data-disabled]:hover{background:#FAF089;}.css-mko72a:active,.css-mko72a[data-active]{background:#ECC94B;}.css-wl2h79{-webkit-transition:all 0.15s ease-out;transition:all 0.15s ease-out;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:none;color:inherit;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-transition:all 250ms;transition:all 250ms;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:none;width:auto;line-height:1.2;border-radius:0.375rem;font-weight:600;height:3rem;min-width:3rem;font-size:1.125rem;padding-left:1.5rem;padding-right:1.5rem;background:#FAF089;color:#1A202C;}.css-wl2h79:hover,.css-wl2h79[data-hover]{-webkit-text-decoration:none;text-decoration:none;}.css-wl2h79:focus,.css-wl2h79[data-focus]{box-shadow:0 0 0 3px rgba(66, 153, 225, 0.6);}.css-wl2h79:focus,.css-wl2h79[data-focus]{box-shadow:0 0 0 3px rgba(66, 153, 225, 0.6);}.css-wl2h79[disabled],.css-wl2h79[disabled]:focus,.css-wl2h79[disabled]:hover,.css-wl2h79[aria-disabled=true],.css-wl2h79[aria-disabled=true]:focus,.css-wl2h79[aria-disabled=true]:hover,.css-wl2h79[data-disabled],.css-wl2h79[data-disabled]:focus,.css-wl2h79[data-disabled]:hover{opacity:0.4;cursor:not-allowed;box-shadow:none;}.css-wl2h79:hover,.css-wl2h79[data-hover]{background:#F6E05E;}.css-wl2h79:hover[disabled],.css-wl2h79[data-hover][disabled],.css-wl2h79:hover[disabled]:focus,.css-wl2h79[data-hover][disabled]:focus,.css-wl2h79:hover[disabled]:hover,.css-wl2h79[data-hover][disabled]:hover,.css-wl2h79:hover[aria-disabled=true],.css-wl2h79[data-hover][aria-disabled=true],.css-wl2h79:hover[aria-disabled=true]:focus,.css-wl2h79[data-hover][aria-disabled=true]:focus,.css-wl2h79:hover[aria-disabled=true]:hover,.css-wl2h79[data-hover][aria-disabled=true]:hover,.css-wl2h79:hover[data-disabled],.css-wl2h79[data-hover][data-disabled],.css-wl2h79:hover[data-disabled]:focus,.css-wl2h79[data-hover][data-disabled]:focus,.css-wl2h79:hover[data-disabled]:hover,.css-wl2h79[data-hover][data-disabled]:hover{background:#FAF089;}.css-wl2h79:active,.css-wl2h79[data-active]{background:#ECC94B;}Get a free ticket[2]


Source: Echo Js


Categories: Development, Software


Leave a Reply

Your email address will not be published. Required fields are marked *