wiki SequenBaul

vendredi 22 mai 2015

Bonjour,
J'ai toujours pas eu de réponse pour participer à la refonte pour classer le code par lois en sciences physiques acoustique.

J'ai un peu améliorer le code html de mon site, car j'ai eu le PR divisé par 2, il n'est plus qu'à 3 et j'ai commencé à jeté un premier code html pour l'application PianoBaul, le voici :

<!DOCTYPE html>
<html>
<head>   
<title>PianoBaul en HTML5</title>
<meta charset="UTF-8" />
<script type="text/javascript">
   
function toucheblanchePress(ou){
  if(ou==1 || ou==13 || ou==25){
  document.getElementById('montre').innerHTML='C';
  }
  else if(ou==3 || ou==15 || ou==27){
  document.getElementById('montre').innerHTML='D';
  }
  else if(ou==5 || ou==17 || ou==29){
  document.getElementById('montre').innerHTML='E';
  }
  else if(ou==6 || ou==18 || ou==30){
  document.getElementById('montre').innerHTML='F';
  }
  else if(ou==8 || ou==20 || ou==32){
  document.getElementById('montre').innerHTML='G';
  }
  else if(ou==10 || ou==22 || ou==34){
  document.getElementById('montre').innerHTML='A';
  }
  else if(ou==12 || ou==24 || ou==36){
  document.getElementById('montre').innerHTML='B';
  }
}

function touchenoirePress(ou){

  if(ou==2 || ou==14 || ou==26){
  document.getElementById('montre').innerHTML='C+';
  }
  else if(ou==4 || ou==16 || ou==28){
  document.getElementById('montre').innerHTML='D+';
  }
  else if(ou==7 || ou==19 || ou==31){
  document.getElementById('montre').innerHTML='F+';
  }
  else if(ou==9 || ou==21 || ou==33){
  document.getElementById('montre').innerHTML='G+';
  }
  else if(ou==11 || ou==23 || ou==35){
  document.getElementById('montre').innerHTML='A+';
  }
}
     
function toucheblancheUp(){
  document.getElementById('montre').innerHTML='';
}
function touchenoireUp(){
  document.getElementById('montre').innerHTML='';
}
   
    </script>      
    <style>
#fondgene{
  background:#975401;
  width:900px;
  height:450px;
  margin:50px auto;
  border-radius:16px;
}
   

.toucheblanche{
  position:absolute;
  height:300px;
  width:36px;
  margin-top:100px;
  background:white;
  border-right:1px solid #BBB;
  cursor:pointer;
  transition:all 0.1s ease 0ms;
  -o-transition:all 0.1s ease 0ms;
  -ms-transition:all 0.1s ease 0ms;
  -moz-transition:all 0.1s ease 0ms;
  -webkit-transition:all 0.1s ease 0ms;
}

.toucheblanche:active{
  -webkit-transform:perspective(650) rotateX(-10deg);
  transform:perspective(650) rotateX(-10deg);
  margin-top:102px;
}

.touchenoire{
  position:absolute;
  height:180px;
  width:20px;
  margin-top:100px;
  background:black;
  border-right:1px solid #BBB;
  cursor:pointer;
}

.touchenoire:active{
  -webkit-transform:perspective(150) rotateX(-6deg);
  transform:perspective(150) rotateX(-6deg);
  margin-top:102px;
}

#montre{
  position:absolute;
  width:100px;
  height:60px;
  margin:20px 370px;
  background:blue;
  border:5px solid #777;
  color:yellow;
  font-size:55px;
  text-align:right;
  padding:0px 10px;
 

}
   
     body{
background-image: -webkit-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:    -moz-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:     -ms-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:      -o-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:         linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
}
    }
   

    </style>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>
  <body>  <div id="gradients">      <ul id="menu">
  <li>lois acoustique
    <ul>
      <li>Marteau</li>
      <li>Licorne</li>
    </ul>
  </li><li>tremolo
    <ul>
      <li>Forme 1</li>
      <li>Forme 1</li>
      <li>Forme 1</li>
      <li>Forme 1</li>
    </ul>
  </li><li>Puissance
    <ul>
      <li>puissance 1</li>
      <li>puissance 2</li>
      <li>puissance 3</li>
    </ul>
  </li>
</ul></div>
    <div id="fondgene">
      <div id="montre"></div>

     
      <!-- DO gamme 1 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(1);" onMouseUp="toucheblancheUp();" style="margin-left:40px;"></div>
      <!-- RE gamme 1 -->
      <div class="toucheblanche"  onMouseDown="toucheblanchePress(3);" onMouseUp="toucheblancheUp();" style="margin-left:80px;"></div>
      <!-- MI gamme 1 -->
      <div class="toucheblanche"  onMouseDown="toucheblanchePress(5);" onMouseUp="toucheblancheUp();" style="margin-left:120px;"></div>
      <!-- FA gamme 1 -->
      <div class="toucheblanche"  onMouseDown="toucheblanchePress(6);" onMouseUp="toucheblancheUp();" style="margin-left:160px;"></div>
      <!-- SOL gamme 1 -->
      <div class="toucheblanche"  onMouseDown="toucheblanchePress(8);" onMouseUp="toucheblancheUp();" style="margin-left:200px;"></div>
      <!-- LA gamme 1 -->
      <div class="toucheblanche"  onMouseDown="toucheblanchePress(10);" onMouseUp="toucheblancheUp();" style="margin-left:240px;"></div>
      <!-- SI gamme 1 -->
      <div class="toucheblanche"  onMouseDown="toucheblanchePress(12);" onMouseUp="toucheblancheUp();" style="margin-left:280px;"></div>
      <!-- DO gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(13);" onMouseUp="toucheblancheUp();" style="margin-left:320px;"></div>
      <!-- RE gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(15);" onMouseUp="toucheblancheUp();" style="margin-left:360px;"></div>
      <!-- MI gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(17);" onMouseUp="toucheblancheUp();" style="margin-left:400px;"></div>
      <!-- FA gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(18);" onMouseUp="toucheblancheUp();" style="margin-left:440px;"></div>
      <!-- SOL gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(20);" onMouseUp="toucheblancheUp();" style="margin-left:480px;"></div>
      <!-- LA gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(22);" onMouseUp="toucheblancheUp();" style="margin-left:520px;"></div>
      <!-- SI gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(24);" onMouseUp="toucheblancheUp();" style="margin-left:560px;"></div>
      <!-- DO gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(25);" onMouseUp="toucheblancheUp();" style="margin-left:600px;"></div>
      <!-- RE gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(27);" onMouseUp="toucheblancheUp();" style="margin-left:640px;"></div>
      <!-- MI gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(29);" onMouseUp="toucheblancheUp();" style="margin-left:680px;"></div>
      <!-- FA gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(30);" onMouseUp="toucheblancheUp();" style="margin-left:720px;"></div>
      <!-- SOL gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(32);" onMouseUp="toucheblancheUp();" style="margin-left:760px;"></div>
      <!-- LA gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(34);" onMouseUp="toucheblancheUp();" style="margin-left:800px;"></div>
      <!-- SI gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(36);" onMouseUp="toucheblancheUp();" style="margin-left:840px;"></div>
     
      <!-- placer les touches noires apres pour etre au dessus des blanches -->
     
      <!-- DO+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(2);" onMouseUp="touchenoireUp();" style="margin-left:70px;"></div>
      <!-- RE+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(4);" onMouseUp="touchenoireUp();" style="margin-left:110px;"></div>
      <!-- FA+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(7);" onMouseUp="touchenoireUp();" style="margin-left:190px;"></div>
      <!-- SOL+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(9);" onMouseUp="touchenoireUp();" style="margin-left:230px;"></div>
      <!-- LA+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(11);" onMouseUp="touchenoireUp();" style="margin-left:270px;"></div>
      <!-- DO+ gamme 2 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(14);" onMouseUp="touchenoireUp();" style="margin-left:350px;"></div>
      <!-- RE+ gamme 2 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(16);" onMouseUp="touchenoireUp();" style="margin-left:390px;"></div>
      <!-- FA+ gamme 2 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(19);" onMouseUp="touchenoireUp();" style="margin-left:470px;"></div>
      <!-- SOL+ gamme 2 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(21);" onMouseUp="touchenoireUp();" style="margin-left:510px;"></div>
      <!-- LA+ gamme 2 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(23);" onMouseUp="touchenoireUp();" style="margin-left:550px;"></div>
      <!-- DO+ gamme 3 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(26);" onMouseUp="touchenoireUp();" style="margin-left:630px;"></div>
      <!-- RE+ gamme 3 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(28);" onMouseUp="touchenoireUp();" style="margin-left:670px;"></div>
      <!-- FA+ gamme 3 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(31);" onMouseUp="touchenoireUp();" style="margin-left:750px;"></div>
      <!-- SOL+ gamme 3 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(33);" onMouseUp="touchenoireUp();" style="margin-left:790px;"></div>
      <!-- LA+ gamme 3 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(35);" onMouseUp="touchenoireUp();" style="margin-left:840px;"></div>
      </div>


  </body>
</html>

Je dois encore coder pour récupérer les valeurs sélectionnées dans le menu.
ensuite faire générer les sons au serveur, ensuite encore lire les sons en plus de l'affichage actuel.

Cordialement



wiki SequenBaul
Publié par dany à 06:08
Libellés :

0 commentaires:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)
 

Lorem

Ipsum

Dolor