1

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");
    }
2
  • Puedes incluir el html donde creas el elemento audio? Entiendo que el src lo tienes establecido al wav, pero por confirmar. Commented el 31 may. 2017 a las 15:49
  • Acabo de insertar el HTML, pero como ves lo tengo todo realizado desde un archivo .js
    – omaza1990
    Commented el 31 may. 2017 a las 17:11

3 respuestas 3

2

El problema es que estás intentando reproducir un audio en un elemento que no existe.

var sonido_cerdo = document.getElementById("cerdo");

Ese selector recupera el DIV que has generado, pero ese elemento no tiene una función play().

Pero por otro lado, a la hora de generar la tabla te ha faltado embeber el elemento audioAnimal dentro del divAnimal, por lo que tendrías que hacer:

//Al divAnimal le añadimos la imagen del animal.
divAnimal.appendChild(imagenAnimal);

divAnimal.appendChild(audioAnimal); // Incluir el elemento

//A la celda le añadimos el divAnimal.
celda.appendChild(divAnimal);

Con el elemento creado podrías asignarle el id al audio en lugar de al div o seleccionar el hijo audio

var sonido_cerdo = document.getElementById("cerdo").getElementsByTagName('audio')[0]

Por otro lado, si vas a hacer que se ejecute la misma función en todos los DIV, simplificaría todo el código que se encarga de gestionar la reproducción a una función iterando todos los elementos, pasando de esto:

/*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";
}

a esto:

/*Gestionamos los eventos para TODOS los animales*/
var animales = document.getElementsByClassName('animal');
for (var i in animales){
  (function(i){
    animales[i].onclick = function(){
      this.className += " rota "+i;
      this.getElementsByTagName('audio')[0].play();
    };
  })(i);
}
1
  • Una ayuda y un código más claro imposible. Sí, me faltó "divAnimal.appendChild(audioAnimal);" yo pensé que el elemento imagenAnimal ya tenía el atributo de audioAnimal. Esto es como las cajas grandes (regalos) que incluyen cajas pequeñas infinitivamente, hay que ir colocándolas de menor a mayor. Código muy legible. Y por otro lado, separé cada animal porque cada uno tenía un efecto (grande, pequeño, rota). Tu ejemplo para todos el mismo efecto es muy válido.
    – omaza1990
    Commented el 1 jun. 2017 a las 13:46
2

El elemento cerdo donde das click tiene que activar una pista de audio embebida en la etiqueta audio, sinceramente no conozco la función autoplay() pero si la de play().

Por lo que un ejemplo sería:

  //Etiqueta HTML
  <audio id="audio-cerdo" src="Ruta donde tienes el audio del cerdo"></audio>

 //Javascript
  document.getElementById("cerdo").onclick = sonidoCerdo;

    function sonidoCerdo() {
      var sonido_cerdo = document.getElementById("audio-cerdo");
        sonido_cerdo.play();
     }
2
  • Lo que ocurre que en el HTML no tengo declarado nada, lo hago todo desde el Javascript. He copiado TODO el código JS. Pregunta editada.
    – omaza1990
    Commented el 31 may. 2017 a las 17:13
  • Mira mi código completo.
    – omaza1990
    Commented el 31 may. 2017 a las 18:05
0

Para reproducir el sonido puedes usar el método .play(); para pausar, .pause(); y puedes cambiar el volumen con la propiedad volume. Del siguiente modo:

<audio id="demo" autoplay="autoplay" src="http://radio.netyco.com:8032/"></audio>

<div>
  <button onclick="document.getElementById('demo').play()">Reproducir el Audio</button>
  <button onclick="document.getElementById('demo').pause()">Pausar el Audio</button>
  <button onclick="document.getElementById('demo').volume+=0.1">Aumentar el Volumen</button>
  <button onclick="document.getElementById('demo').volume-=0.1">Disminuir el Volumen</button>
</div>

<a href="">
  <img src="" id="imagen" onWheel="document.getElementById('demo').autoplay()">
</a>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.