php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 01-07-2011, 17:00
mcmurphy
 PHP Junior
Links : Onlinestatus : mcmurphy ist offline
Registriert seit: Aug 2003
Ort: Berlin
Beiträge: 890
mcmurphy zeigte ein beschämendes Verhalten in der Vergangenheit
Standard html5 audio tag

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 javascriptlay_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 == || pointer == 5    || pointer == || 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> 
JS:
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 
addEventobjtypefn ) {
  if ( 
obj.attachEvent ) {
    
obj['e'+type+fn] = fn;
    
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    
obj.attachEvent'on'+typeobj[type+fn] );
  } else
    
obj.addEventListenertypefnfalse );
}

function 
init_tick_field(){
    if(!
init){
        for(
1<= ticksi++){
            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(
1<= ticksi++){
            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 == || pointer == 5    || pointer == || pointer == 13){
        
document.getElementById("led").style.background "red";
    }
    
window.setTimeout(function (){loop();}, refresh);
}

function 
init_drumbox (){
    
init_tick_field();
    
addEventdocument.getElementById("start"), 'click', function(){ 
        if(!
running) {running trueloop(); }
    });
    
addEventdocument.getElementById("stop"), 'click', function(){ 
        
running false
    });


CSS:
PHP-Code:
@import url(base.css);
@
import url(standard.tags.css);
@
import url(layout.css);
/* Hides from IE-mac \*/
htmlbody {height:100.1%;}
/* End hide from IE-mac */


body {  text-alignleft;  font-size100.01%; 
        
positionrelative;   height:100.1%;
         
}

* {
margin:0pxpadding:0px;   }

.
clearfix:after {
    
content"."
    
displayblock
    
font-size:0px;
    
height0px
    
clearboth
    
visibilityhidden
}
.
clearfix {/* display: inline-table; */}
/* Hides from IE-mac \*/
html .clearfix {height1%;}
.
clearfix {displayblock;}
#wrapper { width: 1000px !important;   height:100%; 
           
text-align:leftmargin0px auto;  
           
position:relativetop:0pxleft:0px;   
           
background:silver;  

}

div#content {
    
padding:20px;
    
height:500px;
        
}
div#maschine {
    
border:3px solid black;
    
position:relativetop:0pxleft:0px;
        
}
div#canvas {border:1px solid silver; margin:10px 0px 0px 15px;}
div#controls {margin:15px 0px 15px 15px;}
div#controls .button{
    
float:leftmargin-right:15px;
    
border-style:outset;
    
    
padding:5px;
}
div#controls .button:active{

    
border-style:inset;

}
div.tick{
    
background:blackcolor:white;
    
width:20pxheight:20pxfloat:left;
    
margin-left:5px;
}
div#led{
    
background:whitecolor:white;
    
width:20pxheight:20px
    
position:absolutebottom:15pxleft: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
__________________
"I don't want to belong to any club that would accept me as a member."

Groucho Marx
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Browser noch keine HTML5 Unterstützung? Gamer20 HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 4 18-09-2010 14:10
Buch zu JQuery und HTML5 dergoldbroiler Bücher-Forum 3 23-05-2010 17:27
HTML5-Test prüft Browser auf HTML5-Unterstützung Berni News / Kostenloses 2 15-04-2010 08:27
Sicherheitscode als Audio? TimoGoebel BRAINSTORMING PHP/SQL/HTML/JS/CSS 15 31-07-2004 13:27
audio-archiv in php exciting Apps und PHP Script Gesuche 2 17-10-2002 14:44

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 17:01 Uhr.