diff --git a/_assets/javascript/sequencer.coffee.liquid b/_assets/javascript/sequencer.coffee.liquid index 5869970..f9316b1 100644 --- a/_assets/javascript/sequencer.coffee.liquid +++ b/_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 -> - console.log "Test:" - $('.sequencer-button').each -> - console.log $(this).attr('row') + "," + $(this).attr('col') + ": " + $(this).prop('checked') + setInterval => + playCol(current_col) + if (current_col <= 6) + 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) diff --git a/_assets/styles/sequencer.scss b/_assets/styles/sequencer.scss index 429dcba..a683d9c 100644 --- a/_assets/styles/sequencer.scss +++ b/_assets/styles/sequencer.scss @@ -28,5 +28,11 @@ background-position: 0 100%; &:checked { background-position: 0 33.33%; + &.activated { + background-position: 0 0; + } } -} \ No newline at end of file + &.activated { + background-position: 0 66.66%; + } +} diff --git a/_drafts/2019-05-13-sequencer.markdown b/_drafts/2019-05-13-sequencer.markdown index 4bd4aac..4687ad8 100644 --- a/_drafts/2019-05-13-sequencer.markdown +++ b/_drafts/2019-05-13-sequencer.markdown @@ -7,12 +7,18 @@ categories: toys {% asset sequencer.css %} {% asset sequencer.coffee %} + + + + + +
{% for y in (1..4) %} {% for x in (1..8) %} - + {% endfor %} {% endfor %}
@@ -23,4 +29,4 @@ categories: toys srcset:width=900 srcset:width=500 srcset:width=300 - %} \ No newline at end of file + %}