commit
42f4c992fe
9 changed files with 810 additions and 0 deletions
@ -0,0 +1,6 @@ |
|||||||
|
# Include your project-specific ignores in this file |
||||||
|
# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files |
||||||
|
# Useful .gitignore templates: https://github.com/github/gitignore |
||||||
|
node_modules |
||||||
|
dist |
||||||
|
.cache |
||||||
@ -0,0 +1,268 @@ |
|||||||
|
/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */ |
||||||
|
|
||||||
|
/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */ |
||||||
|
/* |
||||||
|
* What follows is the result of much research on cross-browser styling. |
||||||
|
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, |
||||||
|
* Kroc Camen, and the H5BP dev community and team. |
||||||
|
*/ |
||||||
|
|
||||||
|
/* ========================================================================== |
||||||
|
Base styles: opinionated defaults |
||||||
|
========================================================================== */ |
||||||
|
|
||||||
|
html { |
||||||
|
color: #222; |
||||||
|
font-size: 1em; |
||||||
|
line-height: 1.4; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Remove text-shadow in selection highlight: |
||||||
|
* https://twitter.com/miketaylr/status/12228805301 |
||||||
|
* |
||||||
|
* Vendor-prefixed and regular ::selection selectors cannot be combined: |
||||||
|
* https://stackoverflow.com/a/16982510/7133471 |
||||||
|
* |
||||||
|
* Customize the background color to match your design. |
||||||
|
*/ |
||||||
|
|
||||||
|
::-moz-selection { |
||||||
|
background: #b3d4fc; |
||||||
|
text-shadow: none; |
||||||
|
} |
||||||
|
|
||||||
|
::selection { |
||||||
|
background: #b3d4fc; |
||||||
|
text-shadow: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* A better looking default horizontal rule |
||||||
|
*/ |
||||||
|
|
||||||
|
hr { |
||||||
|
display: block; |
||||||
|
height: 1px; |
||||||
|
border: 0; |
||||||
|
border-top: 1px solid #ccc; |
||||||
|
margin: 1em 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Remove the gap between audio, canvas, iframes, |
||||||
|
* images, videos and the bottom of their containers: |
||||||
|
* https://github.com/h5bp/html5-boilerplate/issues/440 |
||||||
|
*/ |
||||||
|
|
||||||
|
audio, |
||||||
|
canvas, |
||||||
|
iframe, |
||||||
|
img, |
||||||
|
svg, |
||||||
|
video { |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Remove default fieldset styles. |
||||||
|
*/ |
||||||
|
|
||||||
|
fieldset { |
||||||
|
border: 0; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Allow only vertical resizing of textareas. |
||||||
|
*/ |
||||||
|
|
||||||
|
textarea { |
||||||
|
resize: vertical; |
||||||
|
} |
||||||
|
|
||||||
|
/* ========================================================================== |
||||||
|
Author's custom styles |
||||||
|
========================================================================== */ |
||||||
|
#desk { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.volumeSlider { |
||||||
|
transform: rotate(270deg); |
||||||
|
} |
||||||
|
/* ========================================================================== |
||||||
|
Helper classes |
||||||
|
========================================================================== */ |
||||||
|
|
||||||
|
/* |
||||||
|
* Hide visually and from screen readers |
||||||
|
*/ |
||||||
|
|
||||||
|
.hidden, |
||||||
|
[hidden] { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Hide only visually, but have it available for screen readers: |
||||||
|
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility |
||||||
|
* |
||||||
|
* 1. For long content, line feeds are not interpreted as spaces and small width |
||||||
|
* causes content to wrap 1 word per line: |
||||||
|
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe |
||||||
|
*/ |
||||||
|
|
||||||
|
.sr-only { |
||||||
|
border: 0; |
||||||
|
clip: rect(0, 0, 0, 0); |
||||||
|
height: 1px; |
||||||
|
margin: -1px; |
||||||
|
overflow: hidden; |
||||||
|
padding: 0; |
||||||
|
position: absolute; |
||||||
|
white-space: nowrap; |
||||||
|
width: 1px; |
||||||
|
/* 1 */ |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Extends the .sr-only class to allow the element |
||||||
|
* to be focusable when navigated to via the keyboard: |
||||||
|
* https://www.drupal.org/node/897638 |
||||||
|
*/ |
||||||
|
|
||||||
|
.sr-only.focusable:active, |
||||||
|
.sr-only.focusable:focus { |
||||||
|
clip: auto; |
||||||
|
height: auto; |
||||||
|
margin: 0; |
||||||
|
overflow: visible; |
||||||
|
position: static; |
||||||
|
white-space: inherit; |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Hide visually and from screen readers, but maintain layout |
||||||
|
*/ |
||||||
|
|
||||||
|
.invisible { |
||||||
|
visibility: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Clearfix: contain floats |
||||||
|
* |
||||||
|
* For modern browsers |
||||||
|
* 1. The space content is one way to avoid an Opera bug when the |
||||||
|
* `contenteditable` attribute is included anywhere else in the document. |
||||||
|
* Otherwise it causes space to appear at the top and bottom of elements |
||||||
|
* that receive the `clearfix` class. |
||||||
|
* 2. The use of `table` rather than `block` is only necessary if using |
||||||
|
* `:before` to contain the top-margins of child elements. |
||||||
|
*/ |
||||||
|
|
||||||
|
.clearfix::before, |
||||||
|
.clearfix::after { |
||||||
|
content: " "; |
||||||
|
display: table; |
||||||
|
} |
||||||
|
|
||||||
|
.clearfix::after { |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
|
||||||
|
/* ========================================================================== |
||||||
|
EXAMPLE Media Queries for Responsive Design. |
||||||
|
These examples override the primary ('mobile first') styles. |
||||||
|
Modify as content requires. |
||||||
|
========================================================================== */ |
||||||
|
|
||||||
|
@media only screen and (min-width: 35em) { |
||||||
|
/* Style adjustments for viewports that meet the condition */ |
||||||
|
} |
||||||
|
|
||||||
|
@media print, |
||||||
|
(-webkit-min-device-pixel-ratio: 1.25), |
||||||
|
(min-resolution: 1.25dppx), |
||||||
|
(min-resolution: 120dpi) { |
||||||
|
/* Style adjustments for high resolution devices */ |
||||||
|
} |
||||||
|
|
||||||
|
/* ========================================================================== |
||||||
|
Print styles. |
||||||
|
Inlined to avoid the additional HTTP request: |
||||||
|
https://www.phpied.com/delay-loading-your-print-css/ |
||||||
|
========================================================================== */ |
||||||
|
|
||||||
|
@media print { |
||||||
|
*, |
||||||
|
*::before, |
||||||
|
*::after { |
||||||
|
background: #fff !important; |
||||||
|
color: #000 !important; |
||||||
|
/* Black prints faster */ |
||||||
|
box-shadow: none !important; |
||||||
|
text-shadow: none !important; |
||||||
|
} |
||||||
|
|
||||||
|
a, |
||||||
|
a:visited { |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
|
||||||
|
a[href]::after { |
||||||
|
content: " (" attr(href) ")"; |
||||||
|
} |
||||||
|
|
||||||
|
abbr[title]::after { |
||||||
|
content: " (" attr(title) ")"; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Don't show links that are fragment identifiers, |
||||||
|
* or use the `javascript:` pseudo protocol |
||||||
|
*/ |
||||||
|
a[href^="#"]::after, |
||||||
|
a[href^="javascript:"]::after { |
||||||
|
content: ""; |
||||||
|
} |
||||||
|
|
||||||
|
pre { |
||||||
|
white-space: pre-wrap !important; |
||||||
|
} |
||||||
|
|
||||||
|
pre, |
||||||
|
blockquote { |
||||||
|
border: 1px solid #999; |
||||||
|
page-break-inside: avoid; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Printing Tables: |
||||||
|
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables |
||||||
|
*/ |
||||||
|
thead { |
||||||
|
display: table-header-group; |
||||||
|
} |
||||||
|
|
||||||
|
tr, |
||||||
|
img { |
||||||
|
page-break-inside: avoid; |
||||||
|
} |
||||||
|
|
||||||
|
p, |
||||||
|
h2, |
||||||
|
h3 { |
||||||
|
orphans: 3; |
||||||
|
widows: 3; |
||||||
|
} |
||||||
|
|
||||||
|
h2, |
||||||
|
h3 { |
||||||
|
page-break-after: avoid; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,349 @@ |
|||||||
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ |
||||||
|
|
||||||
|
/* Document |
||||||
|
========================================================================== */ |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Correct the line height in all browsers. |
||||||
|
* 2. Prevent adjustments of font size after orientation changes in iOS. |
||||||
|
*/ |
||||||
|
|
||||||
|
html { |
||||||
|
line-height: 1.15; /* 1 */ |
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/* Sections |
||||||
|
========================================================================== */ |
||||||
|
|
||||||
|
/** |
||||||
|
* Remove the margin in all browsers. |
||||||
|
*/ |
||||||
|
|
||||||
|
body { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Render the `main` element consistently in IE. |
||||||
|
*/ |
||||||
|
|
||||||
|
main { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Correct the font size and margin on `h1` elements within `section` and |
||||||
|
* `article` contexts in Chrome, Firefox, and Safari. |
||||||
|
*/ |
||||||
|
|
||||||
|
h1 { |
||||||
|
font-size: 2em; |
||||||
|
margin: 0.67em 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* Grouping content |
||||||
|
========================================================================== */ |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Add the correct box sizing in Firefox. |
||||||
|
* 2. Show the overflow in Edge and IE. |
||||||
|
*/ |
||||||
|
|
||||||
|
hr { |
||||||
|
box-sizing: content-box; /* 1 */ |
||||||
|
height: 0; /* 1 */ |
||||||
|
overflow: visible; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers. |
||||||
|
* 2. Correct the odd `em` font sizing in all browsers. |
||||||
|
*/ |
||||||
|
|
||||||
|
pre { |
||||||
|
font-family: monospace, monospace; /* 1 */ |
||||||
|
font-size: 1em; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/* Text-level semantics |
||||||
|
========================================================================== */ |
||||||
|
|
||||||
|
/** |
||||||
|
* Remove the gray background on active links in IE 10. |
||||||
|
*/ |
||||||
|
|
||||||
|
a { |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Remove the bottom border in Chrome 57- |
||||||
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. |
||||||
|
*/ |
||||||
|
|
||||||
|
abbr[title] { |
||||||
|
border-bottom: none; /* 1 */ |
||||||
|
text-decoration: underline; /* 2 */ |
||||||
|
text-decoration: underline dotted; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari. |
||||||
|
*/ |
||||||
|
|
||||||
|
b, |
||||||
|
strong { |
||||||
|
font-weight: bolder; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers. |
||||||
|
* 2. Correct the odd `em` font sizing in all browsers. |
||||||
|
*/ |
||||||
|
|
||||||
|
code, |
||||||
|
kbd, |
||||||
|
samp { |
||||||
|
font-family: monospace, monospace; /* 1 */ |
||||||
|
font-size: 1em; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Add the correct font size in all browsers. |
||||||
|
*/ |
||||||
|
|
||||||
|
small { |
||||||
|
font-size: 80%; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Prevent `sub` and `sup` elements from affecting the line height in |
||||||
|
* all browsers. |
||||||
|
*/ |
||||||
|
|
||||||
|
sub, |
||||||
|
sup { |
||||||
|
font-size: 75%; |
||||||
|
line-height: 0; |
||||||
|
position: relative; |
||||||
|
vertical-align: baseline; |
||||||
|
} |
||||||
|
|
||||||
|
sub { |
||||||
|
bottom: -0.25em; |
||||||
|
} |
||||||
|
|
||||||
|
sup { |
||||||
|
top: -0.5em; |
||||||
|
} |
||||||
|
|
||||||
|
/* Embedded content |
||||||
|
========================================================================== */ |
||||||
|
|
||||||
|
/** |
||||||
|
* Remove the border on images inside links in IE 10. |
||||||
|
*/ |
||||||
|
|
||||||
|
img { |
||||||
|
border-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* Forms |
||||||
|
========================================================================== */ |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Change the font styles in all browsers. |
||||||
|
* 2. Remove the margin in Firefox and Safari. |
||||||
|
*/ |
||||||
|
|
||||||
|
button, |
||||||
|
input, |
||||||
|
optgroup, |
||||||
|
select, |
||||||
|
textarea { |
||||||
|
font-family: inherit; /* 1 */ |
||||||
|
font-size: 100%; /* 1 */ |
||||||
|
line-height: 1.15; /* 1 */ |
||||||
|
margin: 0; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Show the overflow in IE. |
||||||
|
* 1. Show the overflow in Edge. |
||||||
|
*/ |
||||||
|
|
||||||
|
button, |
||||||
|
input { /* 1 */ |
||||||
|
overflow: visible; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Remove the inheritance of text transform in Edge, Firefox, and IE. |
||||||
|
* 1. Remove the inheritance of text transform in Firefox. |
||||||
|
*/ |
||||||
|
|
||||||
|
button, |
||||||
|
select { /* 1 */ |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Correct the inability to style clickable types in iOS and Safari. |
||||||
|
*/ |
||||||
|
|
||||||
|
button, |
||||||
|
[type="button"], |
||||||
|
[type="reset"], |
||||||
|
[type="submit"] { |
||||||
|
-webkit-appearance: button; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Remove the inner border and padding in Firefox. |
||||||
|
*/ |
||||||
|
|
||||||
|
button::-moz-focus-inner, |
||||||
|
[type="button"]::-moz-focus-inner, |
||||||
|
[type="reset"]::-moz-focus-inner, |
||||||
|
[type="submit"]::-moz-focus-inner { |
||||||
|
border-style: none; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Restore the focus styles unset by the previous rule. |
||||||
|
*/ |
||||||
|
|
||||||
|
button:-moz-focusring, |
||||||
|
[type="button"]:-moz-focusring, |
||||||
|
[type="reset"]:-moz-focusring, |
||||||
|
[type="submit"]:-moz-focusring { |
||||||
|
outline: 1px dotted ButtonText; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Correct the padding in Firefox. |
||||||
|
*/ |
||||||
|
|
||||||
|
fieldset { |
||||||
|
padding: 0.35em 0.75em 0.625em; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Correct the text wrapping in Edge and IE. |
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE. |
||||||
|
* 3. Remove the padding so developers are not caught out when they zero out |
||||||
|
* `fieldset` elements in all browsers. |
||||||
|
*/ |
||||||
|
|
||||||
|
legend { |
||||||
|
box-sizing: border-box; /* 1 */ |
||||||
|
color: inherit; /* 2 */ |
||||||
|
display: table; /* 1 */ |
||||||
|
max-width: 100%; /* 1 */ |
||||||
|
padding: 0; /* 3 */ |
||||||
|
white-space: normal; /* 1 */ |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera. |
||||||
|
*/ |
||||||
|
|
||||||
|
progress { |
||||||
|
vertical-align: baseline; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Remove the default vertical scrollbar in IE 10+. |
||||||
|
*/ |
||||||
|
|
||||||
|
textarea { |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Add the correct box sizing in IE 10. |
||||||
|
* 2. Remove the padding in IE 10. |
||||||
|
*/ |
||||||
|
|
||||||
|
[type="checkbox"], |
||||||
|
[type="radio"] { |
||||||
|
box-sizing: border-box; /* 1 */ |
||||||
|
padding: 0; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Correct the cursor style of increment and decrement buttons in Chrome. |
||||||
|
*/ |
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button, |
||||||
|
[type="number"]::-webkit-outer-spin-button { |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Correct the odd appearance in Chrome and Safari. |
||||||
|
* 2. Correct the outline style in Safari. |
||||||
|
*/ |
||||||
|
|
||||||
|
[type="search"] { |
||||||
|
-webkit-appearance: textfield; /* 1 */ |
||||||
|
outline-offset: -2px; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Remove the inner padding in Chrome and Safari on macOS. |
||||||
|
*/ |
||||||
|
|
||||||
|
[type="search"]::-webkit-search-decoration { |
||||||
|
-webkit-appearance: none; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Correct the inability to style clickable types in iOS and Safari. |
||||||
|
* 2. Change font properties to `inherit` in Safari. |
||||||
|
*/ |
||||||
|
|
||||||
|
::-webkit-file-upload-button { |
||||||
|
-webkit-appearance: button; /* 1 */ |
||||||
|
font: inherit; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/* Interactive |
||||||
|
========================================================================== */ |
||||||
|
|
||||||
|
/* |
||||||
|
* Add the correct display in Edge, IE 10+, and Firefox. |
||||||
|
*/ |
||||||
|
|
||||||
|
details { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Add the correct display in all browsers. |
||||||
|
*/ |
||||||
|
|
||||||
|
summary { |
||||||
|
display: list-item; |
||||||
|
} |
||||||
|
|
||||||
|
/* Misc |
||||||
|
========================================================================== */ |
||||||
|
|
||||||
|
/** |
||||||
|
* Add the correct display in IE 10+. |
||||||
|
*/ |
||||||
|
|
||||||
|
template { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Add the correct display in IE 10. |
||||||
|
*/ |
||||||
|
|
||||||
|
[hidden] { |
||||||
|
display: none; |
||||||
|
} |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
<!doctype html> |
||||||
|
<html class="no-js" lang=""> |
||||||
|
|
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<title></title> |
||||||
|
<meta name="description" content=""> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||||
|
|
||||||
|
<meta property="og:title" content=""> |
||||||
|
<meta property="og:type" content=""> |
||||||
|
<meta property="og:url" content=""> |
||||||
|
<meta property="og:image" content=""> |
||||||
|
|
||||||
|
<link rel="manifest" href="site.webmanifest"> |
||||||
|
<!-- <link rel="apple-touch-icon" href="icon.png"> --> |
||||||
|
<!-- Place favicon.ico in the root directory --> |
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/normalize.css"> |
||||||
|
<link rel="stylesheet" href="css/main.css"> |
||||||
|
|
||||||
|
<meta name="theme-color" content="#fafafa"> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body> |
||||||
|
|
||||||
|
<!-- Add your site or application content here --> |
||||||
|
<p>YTDJ!</p> |
||||||
|
<div id="desk"> |
||||||
|
<div class="player"> |
||||||
|
<iframe id="playerA" src="" width="480" height="270", frameborder='0'></iframe> |
||||||
|
<input type="range" class="volumeSlider" min='0' max = '100' value="80"> |
||||||
|
</div> |
||||||
|
<div class="player"> |
||||||
|
<iframe id="playerB" src="" width="480" height="270", frameborder='0'></iframe> |
||||||
|
<input type="range" class="volumeSlider" min='0' max = '100' value="80"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<input type="range" id='crossfader' name="crossfader" min='0' max='1000' value='500'> |
||||||
|
|
||||||
|
<script src="js/vendor/modernizr-3.11.2.min.js"></script> |
||||||
|
<script src="js/plugins.js"></script> |
||||||
|
<script src="js/main.js"></script> |
||||||
|
|
||||||
|
</body> |
||||||
|
|
||||||
|
</html> |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
// let id = window.location.search ? window.location.search.substring(1) : album;
|
||||||
|
// let playerA = {
|
||||||
|
// iframe: document.querySelector('#playerA'),
|
||||||
|
// player: undefined,
|
||||||
|
// id: 'anWaxGNDRJ4',
|
||||||
|
// vol: 100
|
||||||
|
// }
|
||||||
|
// let playerB = {
|
||||||
|
// iframe: document.querySelector('#playerB'),
|
||||||
|
// player: undefined,
|
||||||
|
// id: 'PhEuAuhH418',
|
||||||
|
// vol: 100
|
||||||
|
// }
|
||||||
|
|
||||||
|
// Loads the IFrame Player API code asynchronously.
|
||||||
|
let tag = document.createElement('script'); |
||||||
|
tag.src = 'https://www.youtube.com/iframe_api'; |
||||||
|
let firstScriptTag = document.getElementsByTagName('script')[0]; |
||||||
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); |
||||||
|
|
||||||
|
|
||||||
|
class player { |
||||||
|
trackId; |
||||||
|
// volume;
|
||||||
|
// id;
|
||||||
|
// iframe;
|
||||||
|
player; |
||||||
|
// node;
|
||||||
|
constructor(id) { |
||||||
|
this.id = id; |
||||||
|
this.iframe = document.querySelector('#'+this.id); |
||||||
|
// console.log('#'+this.id);
|
||||||
|
// console.log(this.iframe);
|
||||||
|
// this.volume = vol;
|
||||||
|
|
||||||
|
this.node = this.iframe.parentNode; |
||||||
|
this.volume = this.node.querySelector('.volumeSlider').value; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
init(trackid) { |
||||||
|
let src = `https://www.youtube.com/embed/${trackid}?enablejsapi=1&playsinline=1&autoplay=0&rel=0&modestbranding=1&version=3`; |
||||||
|
this.iframe.setAttribute('src', src); |
||||||
|
this.player = new YT.Player(this.id, { |
||||||
|
events: { |
||||||
|
'onReady': this.onPlayerReady.bind(this), |
||||||
|
'onStateChange': onPlayerStateChange |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
this.node.querySelector('.volumeSlider').addEventListener('input', (e) => { |
||||||
|
let volume = e.target.value; |
||||||
|
this.volume = volume; |
||||||
|
this.player.setVolume(volume); |
||||||
|
}); |
||||||
|
} |
||||||
|
onPlayerReady(e) { |
||||||
|
// console.log(e.target);
|
||||||
|
// this.node.querySelector('.volumeSlider').value = this.player.getVolume();
|
||||||
|
// e.target.playVideo();
|
||||||
|
console.log(e.target); |
||||||
|
// e.target.setVolume(this.volume);
|
||||||
|
this.player.setVolume(this.volume); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
let playerA = new player('playerA'); |
||||||
|
let playerB = new player('playerB'); |
||||||
|
|
||||||
|
|
||||||
|
function onYouTubeIframeAPIReady() { |
||||||
|
playerA.init('anWaxGNDRJ4') |
||||||
|
playerB.init('PhEuAuhH418'); |
||||||
|
} |
||||||
|
|
||||||
|
function onPlayerStateChange(event) { |
||||||
|
console.log('state change: ' + event.data); |
||||||
|
} |
||||||
|
|
||||||
|
let crossfader = document.querySelector('#crossfader'); |
||||||
|
|
||||||
|
crossfader.addEventListener('input', (e) => { |
||||||
|
|
||||||
|
let normVal = crossfader.value / 1000; |
||||||
|
// let coefB = normVal ** 2;
|
||||||
|
// let coefA = (1 - normVal) ** 2;
|
||||||
|
|
||||||
|
let coefB = min(normVal*2, 1); |
||||||
|
let coefA = min((1-normVal)*2, 1); |
||||||
|
|
||||||
|
// console.log('crossfader: ' + crossfader.value);
|
||||||
|
// console.log('coefA: ' + coefA);
|
||||||
|
// console.log('coefB: ' + coefB);
|
||||||
|
|
||||||
|
playerA.player.setVolume(playerA.volume * coefA); |
||||||
|
playerB.player.setVolume(playerB.volume * coefB); |
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
function min(x, y) { |
||||||
|
if (x > y) { |
||||||
|
return y; |
||||||
|
} else { |
||||||
|
return x; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
// Avoid `console` errors in browsers that lack a console.
|
||||||
|
(function() { |
||||||
|
var method; |
||||||
|
var noop = function () {}; |
||||||
|
var methods = [ |
||||||
|
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', |
||||||
|
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', |
||||||
|
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', |
||||||
|
'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn' |
||||||
|
]; |
||||||
|
var length = methods.length; |
||||||
|
var console = (window.console = window.console || {}); |
||||||
|
|
||||||
|
while (length--) { |
||||||
|
method = methods[length]; |
||||||
|
|
||||||
|
// Only stub undefined methods.
|
||||||
|
if (!console[method]) { |
||||||
|
console[method] = noop; |
||||||
|
} |
||||||
|
} |
||||||
|
}()); |
||||||
|
|
||||||
|
// Place any jQuery/helper plugins in here.
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue