Zaloguj | Zarejestruj | FAQ
Anonymous

Audio en javascript

+ Odpowiedz

Posty: 2 Strona 1 z 1


Audio en javascript

przez juanluis » Wt sie 06, 2013 7:25 pm

Hola: tengo una aplicación que funciona bien, pero me gustaría que cuando se haga drop, se escuchara un sonido que tengo pregrabado en el pc, pero no se donde colocarlo (les soy sincero, pero el código que tengo ha sido copiado y yo lo he adaptado).
Les adjunto el código.

La aplicación es para un niño autista y se trata de que construya una palabra a partir de unas letras; por ejemplo, la palabra mamá, yo le pongo "m m" y el tiene que arrastrar "a y a" entre la primera m y la segunda y cuando lo consiga, que le diga muy bien como premio.

Gracias y saludos.

<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Frase Mamá</title>
<style type="text/css">
#box1, #box2, #box3, #box4, #box5, #box6, #box7{
float:left; width:50px; height:50px; padding:5px; margin:5px;
}

#box1 { background-color: #FFFFFF; }
#box2 { background-color: #FFFFFF; }
#box3 { background-color: #FFFFFF; }
#box4 { background-color: #FFFFFF; }
#box5 { background-color: #FFFFFF; }
#box6 { background-color: #FFFFFF; }
#box7 { background-color: #FFFF00; }

#drag, #drag2, #drag3, #drag4 {
width:0px; height:0px; padding:0px; margin:0px;
-moz-user-select:none;
border:0px solid white;
cursor:pointer ;
}
#drag { background-color: #FFFF00;}
#drag2 { background-color: #FFFF00;}


.Estilo1 {
font-family: Arial;
color: #0000FF;
}
.Estilo2 {
font-family: Arial;
color: #FF0000;
}
.Estilo3 {font-family: Arial}
.Estilo5 {color: #0000FF}
.Estilo4 {color: #FF0000}
</style>
<script type="text/javascript">

function dragStart(ev) {
ev.dataTransfer.effectAllowed='copy';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}

function dragEnter(ev) {
var iddrag = ev.dataTransfer.getData("Text");
return true;
}

function dragOver(ev) {
var iddrag = ev.dataTransfer.getData("Text");
var id = ev.target.getAttribute('id');
if( (id =='box4' || id =='box4') && (iddrag == 'drag' || iddrag=='drag4'))
return false;
else if( id =='box6' && iddrag == 'drag6')
return false;
else if( id =='box6')
return false;
else
return true;
}
function dragEnd(ev) {
ev.dataTransfer.clearData("Text");
return true
}
function dragDrop(ev) {
var iddrag = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(iddrag));
ev.stopPropagation();


return false;
}
function isNull(valor){
if (valor.toString()=='undefined'){ return true;}
else if (valor.toString()=='NULL'){ return true;}
}
function verQueTieneDebug(id){
var str="";
var caja=document.getElementById(id);
for( var i = 0; i < caja.childNodes.length; i++ ) {
if (caja.childNodes[i].nodeType === 1) {
var tipo=caja.childNodes[i];
var id1=caja.childNodes[i].getAttribute('id');
var valor=document.getElementById(id1).innerHTML;
str+="tipo="+tipo+" id="+id1+ " valor="+valor;
}
}
if(str=="") str="nada (los textos no cuentan porque no estan encapsulados en etiquetas html y no cuentan como tal. Si se les encapsula en <span></span> si que contarian (porque serian elementos hijos). Un ejemplo de esto es el cuadro negro.";
alert(str);
}
function verQueTiene(id){
var str="";
var caja=document.getElementById(id);
for( var i = 0; i < caja.childNodes.length; i++ ) {
if (caja.childNodes[i].nodeType === 1) {
var tipo=caja.childNodes[i];
var id1=caja.childNodes[i].getAttribute('id');
var valor=document.getElementById(id1).innerHTML;
str+=""+valor+"\n";
}
}
if(str=="") str="No contiene nada";
else str="Contiene:\n"+str;
alert(str);
}
</script>
</head>
<body>
<fieldset>
<table width="36%" border="0" align="right">
<tr valign="top" class="Estilo3">
<td width="45%"><h1 align="center"><img src="Imagenes/Mam&#225;.jpg" width="205" height="131"></h1></td>
</tr>
</table>
<div id="box1" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
<div id="drag" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">
<h1 class="Estilo1">a</h1>
</div>
</div>
<div id="box2" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
<div id="drag" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">
<h1 class="Estilo1">&aacute;</h1>
</div>
</div>
</fieldset>
<div id="box3" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
<h1 class="Estilo2">m</h1>
</div>
<div id="box4" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
</div>
<div id="box5" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
<h1 class="Estilo2">m</h1>
</div>
<div id="box6" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
</div>
<h1 class="Estilo2">&nbsp;</h1>
<p class="Estilo2">&nbsp;</p>
<table width="41%" border="0">
<tr class="Estilo4">
<td width="14%"><div align="center" class="Estilo3">
<h1 align="left"> m </h1>
</tr>

<td width="7%"><div align="center" class="Estilo3">
<h1 align="left"><span class="Estilo5">a</span></h1>
</div>
</td>
<td width="22%"><div align="center" class="Estilo3">
<h1 class="Estilo4">m</h1>
</div></td>
<td width="5%"><div align="center" class="Estilo3">
<h1 align="right"><span class="Estilo5">&aacute;</span></h1>
</div></td>
<td width="34%"><div align="center" class="Estilo3">
<h1 class="Estilo5">&nbsp;</h1>
</div></td>
<td width="18%"><div align="center" class="Estilo3">
<h1>&nbsp;</h1>
</div></td>
</tr>
</table>
</body>
</html>
Avatar użytkownika

juanluis

  • Posty: 4
  • Dołączył(a): Wt lip 30, 2013 12:42 pm

Re: Audio en javascript

przez XainPro » Śr sie 14, 2013 11:27 pm

código agradable que usted necesita aprender de arrastrar y soltar de codificación para este HTML5 compatible con esta técnica
http://www.html5rocks.com/en/tutorials/dnd/basics/
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm


+ Odpowiedz

Strona 1 z 1