Quiero ejecutar un sonido .wav al realizar click sobre un elemento de mi HTML. El elemento es una imagen de un animal con su correspondiente sonido (.wav).
¿Qué método se utiliza para este caso? ¿Autoplay?
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Animales!</title>
<link rel="stylesheet" href="style/estilo.css"/>
<script type="text/JavaScript" src="js/animales.js"></script>
</head>
<body>
</body>
</html>
Código Javascript ENTERO del documento:
/*Exclusivamente usar funciones DOM.*/
//Al cargar el documento, realizamos las funciones en primer lugar dentro de "window.onload".
window.onload = function(){
//Generamos la tabla en primer lugar.
crearTabla();
/*Gestionamos los eventos para cada animal*/
document.getElementById("cerdo").onclick = sonidoCerdo;
function sonidoCerdo() {
//Añadimos la clase .rota, además de tener .animal.
var cerdo = document.getElementById("cerdo");
cerdo.className += " rota";
//Añadimos el sonido del animal.
var sonido_cerdo = document.getElementById("cerdo");
sonido_cerdo.play("./sounds/cerdo.wav");
}
document.getElementById("gato").onclick = sonidoGato;
function sonidoGato() {
//Añadimos la clase .rota, además de tener .animal.
var gato = document.getElementById("gato");
gato.className += " grande";
}
document.getElementById("perro").onclick = sonidoPerro;
function sonidoPerro() {
//Añadimos la clase .rota, además de tener .animal.
var perro = document.getElementById("perro");
perro.className += " pequenio";
}
document.getElementById("vaca").onclick = sonidoVaca;
function sonidoVaca() {
//Añadimos la clase .rota, además de tener .animal.
var vaca = document.getElementById("vaca");
vaca.className += " rota";
}
}
/*Exclusivamente con DOM, crear una tabla 2x2 (4 elementos-casillas).*/
function crearTabla() {
var animales = ["cerdo", "gato", "perro", "vaca"];
//Obtener la referencia del elemento body.
var body = document.getElementsByTagName("body")[0];
//Creamos el elemento/objeto que deseamos: <div>.
var div = document.createElement("div");
//Asignamos un id al div creado.
div.setAttribute("id", "animales");
//Agregamos al body el div.
body.appendChild(div);
//Crea un elemento <table> y un elemento <tbody>.
var tabla = document.createElement("table");
var tblBody = document.createElement("tbody");
//Crea las celdas.
var contador = 0;
for (var i=0; i<2; i++) {
var hilera = document.createElement("tr");
for (var j=0; j<2; j++) {
//Creamos el elemento <td> por cada celda.
var celda = document.createElement("td");
//Creamos el elemento <img> al cual asociamos el atributo de la ruta de la imagen.
var imagenAnimal = document.createElement("img");
imagenAnimal.setAttribute("src", "./images/"+animales[contador]+".png");
//Creamos el elemento <audio> al cual asociamos un elemento <source>.
var audioAnimal = document.createElement("audio");
var sourceAnimal = document.createElement("source");
sourceAnimal.setAttribute("src", "./sounds/"+animales[contador]+".wav");
sourceAnimal.setAttribute("type", "audio/wav");
//Al audioAnimal le añadimos el sourceAnimal.
audioAnimal.appendChild(sourceAnimal);
//Creamos el elemento <div> para cada animal al cual asociamos un id y una clase.
var divAnimal = document.createElement("div");
divAnimal.setAttribute("id", animales[contador]);
divAnimal.setAttribute("class", "animal");
//Al divAnimal le añadimos la imagen del animal.
divAnimal.appendChild(imagenAnimal);
//A la celda le añadimos el divAnimal.
celda.appendChild(divAnimal);
//A la hilera "tr" le añadimos la celda "td".
hilera.appendChild(celda);
contador++;
}
//Agrega la hilera al final de la tabla (al final del elemento tblbody).
tblBody.appendChild(hilera);
}
//Posiciona el <tbody> debajo del elemento <table>.
tabla.appendChild(tblBody);
//appends <table> into <body>.
div.appendChild(tabla);
//Modifica el atributo "border" de la tabla y lo fija a "2";
tabla.setAttribute("border", "2");
}
Código Javascript de la sección a resolver:
document.getElementById("cerdo").onclick = sonidoCerdo;
function sonidoCerdo() {
//Añadimos la clase .rota, además de tener .animal.
var cerdo = document.getElementById("cerdo");
cerdo.className += " rota";
//Añadimos el sonido del animal.
var sonido_cerdo = document.getElementById("cerdo");
sonido_cerdo.autoplay("./sounds/cerdo.wav");
}