jahnertz
/
town-page
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
_assets/javascript/sequencer.coffee.liquid
View File

@ -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)

8
_assets/styles/sequencer.scss
View File

@ -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%;
}
}

10
_drafts/2019-05-13-sequencer.markdown
View File

@ -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
%}
%}