basic sequencer function is working

master
Jordan Han 2020-02-09 19:00:28 +08:00
parent a844ba5c01
commit c5b68feeea
3 changed files with 48 additions and 9 deletions

View File

@ -1,11 +1,38 @@
#= require jquery-3.4.1.slim.js #= require jquery-3.4.1.slim.js
$(document).data( "tempo", 80)
$(document).data( "sides", 3)
$(document).ready -> $(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)

View File

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

View File

@ -7,12 +7,18 @@ categories: toys
{% asset sequencer.css %} {% asset sequencer.css %}
{% asset sequencer.coffee %} {% 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-baseline" >
<div class="sequencer-wrapper" > <div class="sequencer-wrapper" >
<div class="sequencer" > <div class="sequencer" >
{% for y in (1..4) %} {% for y in (1..4) %}
{% for x in (1..8) %} {% 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 %}
{% endfor %} {% endfor %}
</div> </div>
@ -23,4 +29,4 @@ categories: toys
srcset:width=900 srcset:width=900
srcset:width=500 srcset:width=500
srcset:width=300 srcset:width=300
%} %}