Identificarse | Registrarse | FAQ
Anonymous

Audio en javascript

+ Publicar una respuesta

2 mensajes Página 1 de 1


Audio en javascript

por juanluis » Mar Ago 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 de Usuario

juanluis

  • Mensajes: 4
  • Registrado: Mar Jul 30, 2013 12:42 pm

Re: Audio en javascript

por XainPro » Mié Ago 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 de Usuario

XainPro

  • Mensajes: 3933
  • Registrado: Vie Feb 17, 2012 8:10 pm


+ Publicar una respuesta

Página 1 de 1

cron