Boite a music avec la balise audio

Soyez le premier à donner votre avis sur cette source.

Vue 7 736 fois - Téléchargée 2 023 fois

Description

comme son nom l'indique c'est un boite a faire de la musique qui fonctionne avec la balise audio (html5)

il y a une partie batterie et une partie sample jy ai ajouter pour chaque sample un select qui sert a choisir la frequence de repetition (loop) et un bouton marche arrete qui soit fait tourner en boucle soit declanche une seule fois le sample et enfin il y a une partie bpm (battement par minute) avec deux possibilite soit on indique le bpm dans le input soit on clic deux fois sur le gros bouton le bpm sera affiche dans le input

au niveau navigateurs meme si il est compatible avec firefox opera chrome et safarie seul FIREFOX arrive a bien faire fonctionner le tout pour opera sa va encore mais pour chrome et surtout safari c'est pas vraiment exploitable

Source / Exemple :


<script type="text/javascript">

var mpb=500

function bpmchoix(){
mpb=(1/(document.getElementById('bpmtxt').value/60))*1000;
}

function bptemp(){

typeof this.ppm == 'undefined' ? this.ppm = 0 : null;

var datee=new Date();
if(this.ppm==0){
this.ppm=(datee.getMilliseconds()+(datee.getSeconds()*1000));
}
else{
mpb=((datee.getMilliseconds()+(datee.getSeconds()*1000))-this.ppm).toFixed(2);
this.ppm=0;
document.getElementById('bpmtxt').value=(60000/mpb).toFixed(2);
}
}

function prep(elem){

this.el=document.getElementById(elem);
this.utile=1;
this.k=1;
this.boucle=1

this.clebou=function (lui){
if(this.boucle==1){
this.boucle=0
lui.style.color='red'
}
else{
this.boucle=1
lui.style.color='white'
}
}

this.fonutile=function (){
if(this.boucle==1){
if(this.utile==0){
this.utile=1;
}
else{
this.utile=0;
this.bpm();
}
}
else{
this.utile=1
this.sample();
}
}

}

prep.prototype.sample=function (){

if(this.el.paused==false){

this.el.currentTime=0;

}
else{
this.el.play();
}
}

prep.prototype.bpm=function (){
if(this.utile==0){
if(this.el.paused==false){
this.el.currentTime=0;
}
else{
this.el.play();
}
var lui=this;
var tp=mpb*this.k;
setTimeout( function() { lui.bpm(); }, tp );
}
}

function init(){
prep1=new prep('a1');
prep2=new prep('a2');
prep3=new prep('a3');
prep4=new prep('a4');
prep5=new prep('a5');
prep6=new prep('a6');
prep7=new prep('a7');
prep8=new prep('a8');

prep9=new prep('a9');
prep10=new prep('a10');
prep11=new prep('a11');
prep12=new prep('a12');
prep13=new prep('a13');
prep14=new prep('a14');
prep15=new prep('a15');
prep16=new prep('a16');
prep17=new prep('a17');
prep18=new prep('a18');
prep19=new prep('a19');
prep20=new prep('a20');

document.getElementById('e1').addEventListener("mousedown",function(){prep1.fonutile()},false);
document.getElementById('e2').addEventListener("mousedown",function(){prep2.fonutile()},false);
document.getElementById('e3').addEventListener("mousedown",function(){prep3.fonutile()},false);
document.getElementById('e4').addEventListener("mousedown",function(){prep4.fonutile()},false);
document.getElementById('e5').addEventListener("mousedown",function(){prep5.fonutile()},false);
document.getElementById('e6').addEventListener("mousedown",function(){prep6.fonutile()},false);
document.getElementById('e7').addEventListener("mousedown",function(){prep7.fonutile()},false);
document.getElementById('e8').addEventListener("mousedown",function(){prep8.fonutile()},false);

document.getElementById('s1').addEventListener("mousedown",function(){prep9.fonutile()},false);
document.getElementById('s2').addEventListener("mousedown",function(){prep10.fonutile()},false);
document.getElementById('s3').addEventListener("mousedown",function(){prep11.fonutile()},false);
document.getElementById('s4').addEventListener("mousedown",function(){prep12.fonutile()},false);
document.getElementById('s5').addEventListener("mousedown",function(){prep13.fonutile()},false);
document.getElementById('s6').addEventListener("mousedown",function(){prep14.fonutile()},false);
document.getElementById('s7').addEventListener("mousedown",function(){prep15.fonutile()},false);
document.getElementById('s8').addEventListener("mousedown",function(){prep16.fonutile()},false);
document.getElementById('s9').addEventListener("mousedown",function(){prep17.fonutile()},false);
document.getElementById('s10').addEventListener("mousedown",function(){prep18.fonutile()},false);
document.getElementById('s11').addEventListener("mousedown",function(){prep19.fonutile()},false);
document.getElementById('s12').addEventListener("mousedown",function(){prep20.fonutile()},false);
}

onload=init;

function playpause(){

var lui=document.getElementById('v1')

if(lui.paused==true){
lui.play()
}
else{
lui.pause()
lui.currentTime=0
}
}

function cevit(){

document.getElementById('v1').playbackRate=document.getElementById('vv').value
document.getElementById('vav').value=document.getElementById('vv').value
}

Conclusion :


il faudra attendre pour que sa fonctionne bien sur tous les navigateurs

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
7
En effet, le setTimeout des navigateurs n'est pas régulier mais il me semble que JQuery ou prototype.js avait réglé le problème dans leur framework, il faudrait que je vérifie.
Messages postés
1802
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
12 janvier 2022
141
Safari/Chrome/Opéra supportes bien le script mais pour chrome et surtout safari le temp de reponse le moment ou on clik et le moment ou le son est joué n'est pas immediat pour opera ca l'est vient un autre probleme c'est la regularité du tempo regulation faite par setimeout pour ce probleme c'est peut etre le settimeout des navigateurs qui n'est pas regulier.

pour mois la cause vient des navigateurs eu meme, ils suportent bien les fonction mais ne sont pas capable de faire fonctionner corresctement les script on pourait dire que ce que je dit c'est du nimporte quoi mais a ce moment la il faudrait me dire pourquoi sa fonctionne avec firefox.
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
7
Pourquoi cela ne fonctionnerait pas avec Safari/Chrome/Opéra ??? Quels fonctions ne supportent-ils pas ?

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.