Skip to content

Instantly share code, notes, and snippets.

@jadiehm

jadiehm/index.html

Last active April 5, 2018 15:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jadiehm/5d2dd8100cd66a7b2ce2c48b99f2e553 to your computer and use it in GitHub Desktop.
Save jadiehm/5d2dd8100cd66a7b2ce2c48b99f2e553 to your computer and use it in GitHub Desktop.
Download ZIP
audio-d3-test
Raw
index.html
<!DOCTYPE html>
<html>
<body>
<div class="post">
<div class="button-container">
<p>Pick a <a href="https://soundcloud.com/itsdalmac">dalmac</a> song. Then press play.</p>
<div class="button" id="song1">
<p>Feeling Nothing</p>
</div>
<div class="button" id="song2">
<p>Scrapped (beat 3)</p>
</div>
</div>
<div class="play-container"></div>
<div class="deets-container">
<p>A Web Audio API experiment by <a href="https://twitter.com/jadiehm">@jadiehm</a>. Modeled after work by <a href="https://twitter.com/vathsav_h">@vathsav_h</a>. Best viewed in Google Chrome.</p>
</div>
<!--
<div class="input-container">
<input>
<div>
-->
<div id="chart"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<script src="visualizer.js"></script>
</body>
<style>
body {
height: 100vh;
background-repeat: no-repeat;
background: rgba(24,6,61,1);
background: -moz-linear-gradient(top, rgba(24,6,61,1) 0%, rgba(10,10,10,1) 100%);
background: -webkit-linear-gradient(top, rgba(24,6,61,1) 0%, rgba(10,10,10,1) 100%);
background: -o-linear-gradient(top, rgba(24,6,61,1) 0%, rgba(10,10,10,1) 100%);
background: -ms-linear-gradient(top, rgba(24,6,61,1) 0%, rgba(10,10,10,1) 100%);
background: linear-gradient(to bottom, rgba(24,6,61,1) 0%, rgba(10,10,10,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18063d', endColorstr='#0a0a0a', GradientType=0 );
}
#chart {
margin-top: 140px;
margin: 0 auto;
width: 100%;
}
.button-container {
position: absolute;
top: 20px;
left: 20px;
}
.button-container p{
color: #ffffff;
font-family: 'Poppins', sans-serif;
margin: 0 0 10px 0;
}
a {
color: #ffffff;
text-decoration: underline;
}
.button {
border: 2px solid #1ed760;
border-radius: 30px;
width: 200px;
height: 30px;
margin-bottom: 10px;
background-size: 200% 100%;
background-image: linear-gradient(to right, transparent 50%, rgba(30,215,96, 1) 50%);
transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
}
.button:hover{
color:rgba(255, 255, 255, 1);
background-color: rgba(30,215,96, 1);
background-position: -100% 100%;
}
.active {
color:rgba(255, 255, 255, 1);
background-color: rgba(30,215,96, 1);
background-position: -100% 100%;
}
.button p {
text-transform: uppercase;
color: rgba(30,215,96, 1);
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
text-align: center;
letter-spacing: 2px;
font-size: 12px;
padding: 6px 0;
transition: color .5s ease;
}
.button p:hover {
color: #ffffff;
}
.active p {
color: #ffffff;
}
.play-container {
border: 2px solid #1ed760;
background-color: #1ed760;
border-radius: 30px;
width: 30px;
height: 30px;
position: absolute;
top: 20px;
right: 20px;
}
.deets-container {
position: absolute;
bottom: 0px;
left: 0px;
padding: 20px;
}
.deets-container p{
color: #ffffff;
font-family: 'Poppins', sans-serif;
font-size: 12px;
}
</style>
</html>
Raw
song1.mp3
This file has been truncated, but you can view the full file.
View raw
Raw
song2.mp3
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
visualizer.js
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment