basic sequencer function is working

_assets/javascript/sequencer.coffee.liquid

@@ -1,11 +1,38 @@
 #= require jquery-3.4.1.slim.js
 
+$(document).data( "tempo", 80)
+$(document).data( "sides", 3)
+
 $(document).ready ->
-	console.log "Document ready."
+  current_col = 0
 
-audio = new Audio('{% asset CB.WAV %}')
+  # append audio elements to buttons:
+  $(".sequencer-button").data( "side", 1 )
+  for row in [1..4]
+    for side in [1..$(document).data("sides")]
+      $("audio#row" + row ).clone().attr("id","").appendTo(".sequencer-button[row=" + row + "]")
 
-$(document).click ->
+  setInterval =>
-	console.log "Test:"
+    playCol(current_col)
-	$('.sequencer-button').each ->
+    if (current_col <= 6)
-		console.log $(this).attr('row') + "," + $(this).attr('col') + ": " + $(this).prop('checked')
+      current_col++
+    else
+      current_col = 0
+  , 15000 / $(document).data("tempo")
+
+playCol = (col) ->
+  $('.sequencer-button').removeClass('activated')
+  for row in [1..4]
+    current_button = $('.sequencer-button').eq(col + ( row - 1) * 8)
+    current_button.addClass('activated')
+    if ( current_button.prop('checked') )
+      side = current_button.data("side")
+      try
+        current_button.children(":eq(" + (side - 1) + ")")[0].play()
+      catch e
+        console.log "Error playing sound."
+      if (side >= $(document).data("sides"))
+        current_button.data("side", 1)
+        side = 1
+      else
+        current_button.data("side", side + 1)

_assets/styles/sequencer.scss

@@ -28,5 +28,11 @@
 	background-position: 0 100%;
 	&:checked {
 		background-position: 0 33.33%;
+		&.activated {
+				background-position: 0 0;
+		}
 	}
-}
+	&.activated {
+		background-position: 0 66.66%;
+	}
+}

_drafts/2019-05-13-sequencer.markdown

@@ -7,12 +7,18 @@ categories: toys
 {% asset sequencer.css %}
 {% asset sequencer.coffee %}
 
+<audio>This browser does not support audio</audio>
+<audio id="row1" src="{% asset CB.WAV @path %}" type="audio/wav"></audio>
+<audio id="row2" src="{% asset CH.WAV @path %}" type="audio/wav"></audio>
+<audio id="row3" src="{% asset CL.WAV @path %}" type="audio/wav"></audio>
+<audio id="row4" src="{% asset CP.WAV @path %}" type="audio/wav"></audio>
+
 <div class="sequencer-baseline" >
 	<div class="sequencer-wrapper" >
 		<div class="sequencer" >
 			{% for y in (1..4) %}
 				{% for x in (1..8) %}
-					<input class="sequencer-button" row="{{y}}" col="{{x}}" type="checkbox" />
+					<input class="sequencer-button" row="{{y}}" col="{{x}}" type="checkbox"/>
 				{% endfor %}
 			{% endfor %}
 		</div>
@@ -23,4 +29,4 @@ categories: toys
 	srcset:width=900
 	srcset:width=500
 	srcset:width=300
- %}
+ %}