Skip to content

Instantly share code, notes, and snippets.

@TurtleWolfe

TurtleWolfe/app.js

Created October 4, 2018 18:19
Show Gist options
  • Save TurtleWolfe/c63aca99f9da4892a2150b27ac871539 to your computer and use it in GitHub Desktop.
Save TurtleWolfe/c63aca99f9da4892a2150b27ac871539 to your computer and use it in GitHub Desktop.
Download ZIP
asdfg pianoMACHINE demo
Raw
app.js
function removeTransition(e) {
if (e.propertyName !== "transform") return;
e.target.classList.remove("playing");
}
const players = document.querySelectorAll("audio");
const volumeControl = document.getElementById("accent-control");
let globalVolume = 1;
volumeControl.addEventListener("change", function() {
globalVolume = volumeControl.value / 100;
players.forEach(function(player) {
player.volume = globalVolume;
});
});
function playSound(e) {
// const note = document.querySelector(`[data-sound-id="${keyName}"]`).play();
const keyName = event.key;
const audio = document.querySelector(`audio[data-sound-id="${keyName}"]`);
const key = document.querySelector(`div[data-sound-id="${keyName}"]`);
if (!audio) return;
key.classList.add("playing");
audio.currentTime = 0;
audio.play();
}
// // Keypress
// //taskInput.addEventListener("keypress", runEvent);
// body.addEventListener("keypress", runEvent);
const keys = Array.from(document.querySelectorAll(".key"));
keys.forEach(key => key.addEventListener("transitionend", removeTransition));
window.addEventListener("keypress", playSound);
Raw
index.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>pianoMACHINE</title>
<meta name="description" content="remember when we all skinned our music players?">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body id="body">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div>
<audio data-sound-id="a" class="accent">
<source type="audio/wav" src="javaScript30daysDRUM/clap.wav" />
Your browser does not support the <code>audio</code> element.
</audio>
<audio data-sound-id="s" class="accent">
<source type="audio/wav" src="javaScript30daysDRUM/hihat.wav" />
Your browser does not support the <code>audio</code> element.
</audio>
<audio data-sound-id="d" class="accent">
<source type="audio/wav" src="javaScript30daysDRUM/kick.wav" />
Your browser does not support the <code>audio</code> element.
</audio>
</div><!-- audio tags -->
<div class="keys">
<div data-sound-id="a" class="key">
<kbd>a</kbd>
<span class="sound">clap</span>
</div>
<div data-sound-id="s" class="key">
<kbd>s</kbd>
<span class="sound">hihat</span>
</div>
<div data-sound-id="d" class="key">
<kbd>d</kbd>
<span class="sound">kick</span>
</div>
</div>
<div class="keyz-loop">
<div data-sound-id="7" class="key">
<kbd>7</kbd>
<span class="sound">backloop</span>
</div>
<div data-sound-id="8" class="key">
<kbd>8</kbd>
<span class="sound">backloop</span>
</div>
</div>
<div class="container">
<input id="accent-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)">SetVolume</input>
<input id="backloop-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
<h5>
press <code>[a,s,d] to play one of 3 DRUM sounds</code><br /><br />
press <code>[7 or 8] to play a BACKING LOOP</code><br /><br /><br />
<a href="https://freesound.org/people/TurtleWolfe/bookmarks/category/90037/" rel="link">freeSOUND.org</a><br />
check out my bookmarks & then go link your own collections<br />
by editing the url source of the audio tags.<br /><br />
<code>
&lt;audio data-sound-id="1"&gt;<br/>
&lt;source type="audio/wav" src="https://github...wav?raw=true" /&gt;<br/>
&lt;/audio&gt;<br/>
</code><br />
<a href="https://www.twitch.tv/videos/315409005" rel="link">window.addEventListener("keypress",
playSound);</a><br />
global volume slider<br />
drop down selector for looping backbeat<br /><br />
project inspired after first 33 videos which cover the fundamentals<br />
<a href="https://www.udemy.com/share/10015YBEcTdV1aQQ==/" rel="link">Modern JavaScript From the Beginning</a><br />&
the first of 30 tutorials<br />
<a href="https://javascript30.com/" rel="link">https://javascript30.com/</a><br />
</h5>
<footer>
<a href="https://github.com/TurtleWolf/pianoMACHINE" rel="link" class="yallow">source code on
github.io</a><br />
<a href="https://turtlewolfe.com/" rel="link" class="yallow">Copyright 2018, TurtleWolfe.com</a>
</footer>
</div><!-- backloops on the right collumn -->
<audio data-sound-id="7" class="loop" loop>
<source type="audio/wav" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/freeSound/435147__kickhat__ambient-drone-21-07-2018.wav?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
<audio data-sound-id="8" class="loop" loop>
<source type="audio/wav" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/freeSound/440957__l-q__coin-3.wav?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
<audio data-sound-id="9" class="loop" loop>
<source type="audio/wav" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/freeSound/441375__malinby__organ.wav?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
<script src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-125846162-4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-125846162-4');
</script>
</body>
</html>
Raw
main.css
* {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: border-box;
}
html,
.card-action {
color: yellow;
text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
/* height: 100%;
position: relative;
background: url(https://github.com/TurtleWolf/pianoMACHINE/blob/master/images/ChattanoogaBridge.jpg?raw=true)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; */
}
.collection .collection-item {
background-color: rgba(117, 121, 39, 0.1); /* 50% transparent */
}
a {
color: lightblue;
text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
}
.yallow {
color: yellow;
text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
}
.container {
margin-top: 7%;
}
#navbar {
left: 0px;
width: 49%;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
border: 1mm ridge rgb(333, 333, 333, 0.6);
} /* navbar */
header {
font-size: 2.5em;
text-align: right;
float: right;
}
p {
color: yellow;
text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
height: 100%;
position: relative;
background: url(https://github.com/TurtleWolf/pianoMACHINE/blob/master/ChattanoogaBridge.jpg?raw=true)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media (max-width: 1250px) {
/* @media (width <= 30em) {....} */
} /* end of media query 1250px */
footer {
z-index: 2;
position: fixed;
bottom: 0;
background-color: black;
border-radius: 13%;
}
html {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,000000+51,111111+60,2b2b2b+76,1c1c1c+91,131313+100;Black+Gloss+%231 */
background: rgb(76, 76, 76); /* Old browsers */
background: -moz-linear-gradient(
top,
rgba(76, 76, 76, 1) 0%,
rgba(89, 89, 89, 1) 12%,
rgba(102, 102, 102, 1) 25%,
rgba(71, 71, 71, 1) 39%,
rgba(44, 44, 44, 1) 50%,
rgba(0, 0, 0, 1) 51%,
rgba(17, 17, 17, 1) 60%,
rgba(43, 43, 43, 1) 76%,
rgba(28, 28, 28, 1) 91%,
rgba(19, 19, 19, 1) 100%
); /* FF3.6-15 */
background: -webkit-linear-gradient(
top,
rgba(76, 76, 76, 1) 0%,
rgba(89, 89, 89, 1) 12%,
rgba(102, 102, 102, 1) 25%,
rgba(71, 71, 71, 1) 39%,
rgba(44, 44, 44, 1) 50%,
rgba(0, 0, 0, 1) 51%,
rgba(17, 17, 17, 1) 60%,
rgba(43, 43, 43, 1) 76%,
rgba(28, 28, 28, 1) 91%,
rgba(19, 19, 19, 1) 100%
); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(
to bottom,
rgba(76, 76, 76, 1) 0%,
rgba(89, 89, 89, 1) 12%,
rgba(102, 102, 102, 1) 25%,
rgba(71, 71, 71, 1) 39%,
rgba(44, 44, 44, 1) 50%,
rgba(0, 0, 0, 1) 51%,
rgba(17, 17, 17, 1) 60%,
rgba(43, 43, 43, 1) 76%,
rgba(28, 28, 28, 1) 91%,
rgba(19, 19, 19, 1) 100%
); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
font-size: 10px;
/* background: url(https://github.com/TurtleWolf/Responsive-Web-Design_-_Technical-Document/blob/master/800px-Joy_Oil_gas_station_blueprints.jpg?raw=true)
bottom center; */
background-size: cover;
}
body,
html {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.keyz-loop {
float: right;
top: 0;
clear: right;
}
.keyz {
top: 0;
position: fixed;
z-index: 1;
}
.keys {
top: 0;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
position: fixed;
z-index: 1;
}
.key {
border: 0.4rem solid black;
border-radius: 0.5rem;
margin: 1rem;
font-size: 1.5rem;
padding: 1rem 0.5rem;
transition: all 0.07s ease;
width: 10rem;
text-align: center;
color: white;
background: rgba(0, 0, 0, 0.4);
text-shadow: 0 0 0.5rem black;
}
.playing {
transform: scale(1.1);
border-color: #ffc600;
box-shadow: 0 0 1rem #ffc600;
}
kbd {
display: block;
font-size: 4rem;
}
.sound {
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 0.1rem;
color: #ffc600;
}
#accent-control,
#backloop-control {
/*
position: fixed;
z-index: 1;
*/
}
#task-title {
justify-content: right;
margin-left: 7%;
}
.float-right {
float: right;
margin: 7%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment