Skip to content

Instantly share code, notes, and snippets.

@bjornmeansbear

bjornmeansbear/index.html

Created March 20, 2017 21:00
Show Gist options
  • Save bjornmeansbear/fae0dbe88643ccab1f0481ecfc0f6345 to your computer and use it in GitHub Desktop.
Save bjornmeansbear/fae0dbe88643ccab1f0481ecfc0f6345 to your computer and use it in GitHub Desktop.
Download ZIP
Web Audio API Flat Beat Machine
Raw
index.html
<div class="beatmaker">
<div class="bars">
<ul id="beat">
<li class="tracker_line">
<ul id="tracker" class="soundrow">
<li class="block col_0"></li>
<li class="block col_1"></li>
<li class="block col_2"></li>
<li class="block col_3"></li>
<li class="block col_4"></li>
<li class="block col_5"></li>
<li class="block col_6"></li>
<li class="block col_7"></li>
</ul>
</li>
</ul>
</div>
<div class="boxs">
<img class="pause" src="https://dl.dropbox.com/s/i811uarmirrdmup/pause.png">
<img class="play" src="https://dl.dropbox.com/s/sxm1gy08pghdvwp/play.png">
<img class="stop" src="https://dl.dropbox.com/s/ixh4u2i128gv0yy/stop.png">
</div>
<div class="bpm">
<div id="temposlider"></div>
<div class="bpm_value">
<span id="tempovalue"></span> <abbr title="Beats per minute">BPM</abbr>
</div>
</div>
<div class="speaker">
</div>
</div>
<section id="sounds">
<audio id="sound_bass_hit" autobuffer>
<source src="https://dl.dropbox.com/s/f7ic70cm6mqbwii/kick.wav" type="audio/x-wav">
</audio>
<audio id="sound_clap" autobuffer>
<source src="https://dl.dropbox.com/s/c5ngsr18j1wxpaw/snare.wav" type="audio/x-wav">
<audio id="sound_cow_bell" autobuffer>
<source src="https://dl.dropbox.com/s/z4umey4oa2i6ttz/perc.wav" type="audio/x-wav">
</audio>
<audio id="sound_crash_cymbal" autobuffer>
<source src="https://dl.dropbox.com/s/kalxcratmk3pyy8/crash.wav" type="audio/x-wav">
Raw
script.js
var playing = false,
curBeat = 0,
curTempo = 130;
var Play = function() {
if (playing !== false) {
var nextBeat = 60000 / curTempo / 4;
$("li.block").removeClass("ef");
$("li.block.col_" + curBeat).addClass("ef");
$("#tracker li.block").removeClass("active");
$("#tracker li.block.col_" + curBeat).addClass("active");
var tmpAudio;
$(".soundrow[id^=box] li.block.active.col_" + curBeat).each(function(i){
tmpAudio = document.getElementById($(this).data('sound_id'));
if (!tmpAudio.paused) {
tmpAudio.pause();
tmpAudio.currentTime = 0.0;
}
tmpAudio.play();
});
curBeat = (curBeat + 1) % 8;
}
};
var Stop = function() {
$(".soundrow[id^=box] li.active").removeClass('active');
clearInterval(playing);
playing = false;
$('.soundrow li').removeClass('ef');
}
$(document).ready(function(){
$("audio").each(function(i){
var self = this;
var $ul = $('<ul id="box_' + this.id + '" class="soundrow">');
for (j = 0; j < 8; j++) {
var $li =
$('<li class="block col_'+j+'">'+self.id+'</li>')
.click(function(){
$(this).toggleClass('active');
})
.data('sound_id', self.id);
$ul.append($li);
}
$('<li>').append($ul).appendTo('#beat');
});
$(".play").click(function(){
if (playing === false) {
curBeat = 0;
playing = setInterval(Play, 60000 / curTempo / 4);
} else {
clearInterval(playing);
playing = false;
$("#tracker li.block").removeClass("active");
$("audio").each(function(){
this.pause();
});
}
});
$('.stop').click(function(){
Stop();
});
$('.pause').click(function(){
clearInterval(playing);
});
$('#tempovalue').html(curTempo);
$('#temposlider').slider({
'value': curTempo,
'min': 30,
'max': 180,
'step': 10,
'slide': function(e, ui) {
curTempo = ui.value;
$('#tempovalue').html(curTempo);
if (playing !== false) {
clearInterval(playing);
playing = setInterval(playBeat, 60000 / curTempo / 4);
}
},
'stop': function(e, ui) {
}
});
});
Raw
scripts
<script src="https://dl.dropbox.com/s/in98m08c718czug/script.js"></script>
Raw
style.css
body {
background-color: #8bb83f;
font-family: Helvetica;
}
.beatmaker {
width: 989px;
height: 419px;
position: absolute;
background: url('https://dl.dropbox.com/s/nx2tnqwbrpxsmcv/back.png');
top:50%;
left:50%;
margin-left: -494px;
margin-top: -209px;
}
.bars {
width: 519px;
height: 277px;
float: left;
margin:76px 0px 0px 65px;
}
.boxs {
width: 332px;
height: 127px;
background-color: #216777;
float: left;
margin: 76px 0px 0px 8px;
}
.bpm {
width: 332px;
height: 30px;
float: left;
background-color: #216777;
margin: 7px 0px 0px 8px;
}
.speaker {
background: url('https://dl.dropbox.com/s/t8l4sem16qsjz8f/speaker.png');
width: 350px;
height: 120px;
float: left;
margin: -2px 0px 0px -2px;
}
#sounds {
display: none;
}
#drumkit {
background-color: #333;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
margin-top:50px;
}
#drumkit > ul {
padding: 0px;
display: inline-block;
vertical-align: top;
list-style-type: none;
}
#beat {
width: 560px;
margin-left: -39px;
margin-top: 10px;
}
#beat > li {
padding-bottom: 0px;
list-style-type: none;
}
#beat ul {
padding: 0px;
margin-right: 10px;
position:realtive;
}
#tracker {
margin-bottom: 9px;
}
#boxs {
width: 150px;
color: #FFF;
background: rgb(36, 36, 36);
height:340px;
}
#temposlider {
margin-top: 0.5em;
width:131px;
border:none;
}
ul.soundrow {
margin-top: -10px;
}
ul.soundrow li {
display: inline-block;
height: 15px;
}
ul.soundrow li {
width: 150px;
padding-bottom: 0.1em;
background-color: #4D4D4D;
border:3px #CCC;
margin-right: 20px;
height: 30px;
text-align: center;
}
.header {
background:none;
}
#reset_style {
background:none;
}
ul.soundrow li.block {
width: 60px;
height: 60px;
border: 3px #555;
background-color: #206676;;
padding: 0px;
margin-right: 5px;
margin-bottom: 15px;
text-indent: -9999px;
cursor: pointer;
}
ul.soundrow li.active {
border: 3px #990;
background-color: #CC0;
}
#tracker li.active {
border: 3px #FFA000;
}
#tracker li {
height:15px;
}
#tracker .block {
margin-right: 1px;
background-color: #487782;
}
#soundstart {
margin-top:10px;
margin-left:10px;
cursor: pointer;
}
#clearall {
margin-top:10px;
margin-left:10px;
cursor:pointer;
}
#tempo_label {
font-family:Arial;
font-size:14px;
margin-left:16px;
}
#temposlider {
height: 100%;
float: left;
margin-top: 0px;
width: 207px;
background: #216777;
margin-left: 11px;
}
#temposlider a {
top:0px;
height: 30px;
border-radius: 0px;
background: #055468;
border: none;
}
#container {
width:800px;
}
#keyboard {
width: 770px;
display: block;
margin: 0 auto;
}
#box_sound_bass_hit .block {
margin-right: 5px;
}
.ef {
background:rgba(215, 219, 221, 0.47) !important;
}
.pause {
padding-top: 22px;
padding-left: 33px;
cursor: pointer;
}
.play {
padding-top: 22px;
padding-left: 4px;
cursor: pointer;
}
.stop {
padding-top: 22px;
cursor: pointer;
}
.bpm_value {
float: right;
width: 100px;
background-color: #387786;
height: 88%;
text-align: center;
color: #fff;
opacity: 0.5;
padding-top: 4px;
}
abbr {
border-bottom: none !important;
}
.tracker_line {
margin-bottom:-20px;
}
Raw
styles
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" rel="stylesheet" />
Raw
web-audio-api-flat-beat-machine.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment