Tweet
moinsen,
Erstmal - bin mir nicht sicher ob dieser Thread nicht in script gesuche stehen soll weil ich keine frage zu einer spezifischen Code Zeile habe sondern zum Aufbau / Ablauf eines Scripts
ich versuche eine Art Drumbox mit dem HTML5 audio Tag zu bauen:
jeder Takt besteht aus 16 ticks.
= array mit 16 elementen
kann dann jedem Tick sagen ob er einen sound abfeuern soll.
im Grunde wird dann immer eine funktion loop() aufgerufen die dann per window.setTimeout() sich selber aufruft.
Nur: das ganze funktioniert nicht zuverlässig und weiß ich nicht warum.
Abfeuern des sound per javascript
lay_single_sound(); geht, aber in der Funktion loop wird der Sound nicht regelmäßig abgespielt.
hier die Funktion loop()
und hier mal der Rest:
HTML:
JS:
CSS:
hatte auch schon mal mit der Javascript soundmanager.js lib probiert (hier ein Online BSP: Drum Looper, aber da hatte ich mit IE / FF auf PC massive Rhtymus schwankungen.
mit safari / Chrome auf MAC geht es einigemaßen
wer hätte ne idee / tip wie ich das stabil ins laufen bringe?
THX in advance
Erstmal - bin mir nicht sicher ob dieser Thread nicht in script gesuche stehen soll weil ich keine frage zu einer spezifischen Code Zeile habe sondern zum Aufbau / Ablauf eines Scripts
ich versuche eine Art Drumbox mit dem HTML5 audio Tag zu bauen:
jeder Takt besteht aus 16 ticks.
= array mit 16 elementen
kann dann jedem Tick sagen ob er einen sound abfeuern soll.
im Grunde wird dann immer eine funktion loop() aufgerufen die dann per window.setTimeout() sich selber aufruft.
Nur: das ganze funktioniert nicht zuverlässig und weiß ich nicht warum.
Abfeuern des sound per javascript
lay_single_sound(); geht, aber in der Funktion loop wird der Sound nicht regelmäßig abgespielt.hier die Funktion loop()
PHP-Code:
function loop(){
if(!running){
return false;
}
document.getElementById("led").style.background = "white";
if(pointer == 0){
pointer = 1;
current = document.getElementById("tick1");
}else{
current.style.background = "black";
if(pointer < ticks){
pointer ++;
current = document.getElementById("tick"+pointer);
}else if(pointer == ticks){
current = document.getElementById("tick1");
pointer = 1;
}
}
current.style.background = "red";
if(tick_array[pointer]){
audio_tag.play();
}
if(pointer == 1 || pointer == 5 || pointer == 9 || pointer == 13){
document.getElementById("led").style.background = "red";
}
window.setTimeout(function (){loop();}, refresh);
}
und hier mal der Rest:
HTML:
PHP-Code:
<!DOCTYPE html>
<html>
<head>
<title>Drum Looper</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/standard.css" />
</head>
<body>
<div id="wrapper" class="clearfix">
<div id="content">
<h1>Drumlooper</h1>
<div id="maschine">
<div id="canvas" class="clearfix"></div>
<div id="controls" class="clearfix">
<a href="javascript:void();" id="start" class="button">start</a>
<a href="javascript:void();" id="stop" class="button">stop</a>
<audio id="audiotag" src="sound.mp3" preload="auto"></audio>
</div>
<div id="led"></div>
</div>
<a href="javascript:play_single_sound();">Play single </a>
</div>
<div id="footer" class="clearfix" style="display:none;">
</div>
</div>
<script type="text/javascript" src="js/init.js" ></script>
<script type="text/javascript">
try {
window.onload = init_drumbox;
}catch(e){alert(e);}
</script>
</body>
</html>
PHP-Code:
var bpm = 120;
var ticks = 16;
var tick_length = 60000 / bpm / 4;
var refresh = tick_length;
var pointer = 0;
var init = false;
var running = false;
var startTime = 0;
var current = 0;
var canvas = document.getElementById("canvas");
var audio_tag = document.getElementById('audiotag');
var tick_array = new Array();
var tick_led_array = new Array();
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function init_tick_field(){
if(!init){
for(i = 1; i <= ticks; i++){
var tick = document.createElement("div");
tick.className = "tick";
tick.setAttribute("id", "tick"+i);
canvas.appendChild(tick);
tick_led_array[i] = tick;
tick_array[i] = false;
}
tick_array[1] = true;
tick_array[5] = true;
tick_array[9] = true;
tick_array[13] = true;
tick_array[15] = true;
for(i = 1; i <= ticks; i++){
if(tick_array[i] == true){
tick_led_array[i].style.border = "1px solid yellow";
tick_led_array[i].style.width = "18px";
tick_led_array[i].style.height = "18px";
}
}
init = true;
}
}
function play_single_sound() {
try{
audio_tag.play();
}catch(e){alert(e);}
}
function loop(){
if(!running){
return false;
}
document.getElementById("led").style.background = "white";
if(pointer == 0){
pointer = 1;
current = document.getElementById("tick1");
}else{
current.style.background = "black";
if(pointer < ticks){
pointer ++;
current = document.getElementById("tick"+pointer);
}else if(pointer == ticks){
current = document.getElementById("tick1");
pointer = 1;
}
}
current.style.background = "red";
if(tick_array[pointer]){
audio_tag.play();
}
if(pointer == 1 || pointer == 5 || pointer == 9 || pointer == 13){
document.getElementById("led").style.background = "red";
}
window.setTimeout(function (){loop();}, refresh);
}
function init_drumbox (){
init_tick_field();
addEvent( document.getElementById("start"), 'click', function(){
if(!running) {running = true; loop(); }
});
addEvent( document.getElementById("stop"), 'click', function(){
running = false;
});
}
PHP-Code:
@import url(base.css);
@import url(standard.tags.css);
@import url(layout.css);
/* Hides from IE-mac \*/
html, body {height:100.1%;}
/* End hide from IE-mac */
body { text-align: left; font-size: 100.01%;
position: relative; height:100.1%;
}
* {margin:0px; padding:0px; }
.clearfix:after {
content: ".";
display: block;
font-size:0px;
height: 0px;
clear: both;
visibility: hidden;
}
.clearfix {/* display: inline-table; */}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
#wrapper { width: 1000px !important; height:100%;
text-align:left; margin: 0px auto;
position:relative; top:0px; left:0px;
background:silver;
}
div#content {
padding:20px;
height:500px;
}
div#maschine {
border:3px solid black;
position:relative; top:0px; left:0px;
}
div#canvas {border:1px solid silver; margin:10px 0px 0px 15px;}
div#controls {margin:15px 0px 15px 15px;}
div#controls .button{
float:left; margin-right:15px;
border-style:outset;
padding:5px;
}
div#controls .button:active{
border-style:inset;
}
div.tick{
background:black; color:white;
width:20px; height:20px; float:left;
margin-left:5px;
}
div#led{
background:white; color:white;
width:20px; height:20px;
position:absolute; bottom:15px; left:200px;
}
div.tick.current{
background:red;
}
hatte auch schon mal mit der Javascript soundmanager.js lib probiert (hier ein Online BSP: Drum Looper, aber da hatte ich mit IE / FF auf PC massive Rhtymus schwankungen.
mit safari / Chrome auf MAC geht es einigemaßen
wer hätte ne idee / tip wie ich das stabil ins laufen bringe?
THX in advance