Skip to content

Instantly share code, notes, and snippets.

@chikoski

chikoski/index.html

Created July 4, 2015 08:02
Show Gist options
  • Save chikoski/9ccd9b0e132e6ee9b616 to your computer and use it in GitHub Desktop.
Save chikoski/9ccd9b0e132e6ee9b616 to your computer and use it in GitHub Desktop.
Download ZIP
シーケンサーのサンプル
Raw
gistfile1.txt
var slot = [1, 2, 3, 4];
var snare = slot.map(function(i){
return document.querySelector("#snare" + i);
});
var cymbal = slot.map(function(i){
return document.querySelector("#cymbal" + i);
});
var id;
var current = 0;
function play(){
id = setInterval(function(){
snare[current].play();
cymbal[current].play();
current = (current + 1) % slot.length;
}, 500);
}
function pause(){
if(id){
clearInterval(id);
id = null;
}
}
var playButton = document.querySelector("#play");
var pauseButton = document.querySelector("#pause");
playButton.addEventListener("click", play);
pauseButton.addEventListener("click", pause);
Raw
index.html
<!doctype html>
<html>
<head>
<title>シーケンサー</title>
<meta charset="utf-8">
</head>
<body>
<audio id="snare1" src="snare.mp3" controls preload ></audio>
<audio id="cymbal1" src="cymbal.mp3" controls preload ></audio>
<audio id="snare2" src="snare.mp3" controls preload ></audio>
<audio id="cymbal2" src="cymbal.mp3" controls preload ></audio>
<audio id="snare3" src="snare.mp3" controls preload ></audio>
<audio id="cymbal3" src="cymbal.mp3" controls preload ></audio>
<audio id="snare4" src="snare.mp3" controls preload ></audio>
<audio id="cymbal4" src="cymbal.mp3" controls preload ></audio>
<form>
<button type="button" id="play">play</button>
<button type="button" id="pause">pause</button>
</form>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment