Estoy trabajando en un alfabetos niño aprender sitio web, y desea que se reproduzca un sonido al hacer clic en una imagen. por ejemplo, si el usuario hace clic en Un(imagen), a continuación, en el sonido de fondo de la pronunciación de Una debe ser jugado. Puede es posible sin el uso de java script? Podría alguien ayudar?

  • sin Javascript? Cómo?
  • porque en este momento sólo tengo los prototipos de la página web.
  • Yo no sé si eso sería posible. El código es bastante simple, sin embargo. stackoverflow.com/questions/10083788/…
InformationsquelleAutor Aaqiba | 2016-01-09

2 Comentarios

  1. 2

    Sin JavaScript? No creo que tanto, pero el JavaScript es muy fácil.

    Puede desempeñar un elemento de audio que usted ha puesto en su página condocument.getElementById('audioTag').play();
    Así que esto debería funcionar:

    <a onclick="document.getElementById('yourAudioTag').play();">
         <img src="yourSrc.jpg">
    </a>

    JSFiddle.

    Usted podría incluso ser capaz de poner el método onclick en su etiqueta de imagen de sí mismo así:

    <img src="yourSrc.jpg" onclick="document.getElementById('yourAudioTag').play();">

    Entonces puede utilizar el .pause() método para pausar el audio y .load() si desea cargar un nuevo audio. Funciona de forma similar a la etiqueta video de HTML5.

    Y si usted no desea utilizar un elemento para el audio se puede declarar así:

    var audio = new Audio('audio_file.mp3'); audio.play();

    y usarlo de la misma manera. Sólo que en lugar de

    document.getElementById('yourAudioTag').play();

    utilizaría

    audio.play();

    Un ejemplo de toda la cosa sería algo como esto:

     <a onclick="myAudioFunction('A');">
         <img src="A.jpg">
     </a>
     <a onclick="myAudioFunction('B');">
         <img src="B.jpg">
     </a>
     <script>
         var aAudio = new Audio('a.mp3');
         var bAudio = new Audio('b.mp3');
         function myAudioFunction(letter) {
             if(letter == 'a') {
                 aAudio.play();
             } else if(letter == 'b') {
                 bAudio.play();
             }
         }
     </script>
    • no es de trabajo. La imagen no se puede hacer clic.
    • Es aquí en este jfiddle? jsfiddle.net/zefoo314/ujb19mcx/2
    • Estoy utilizando Visual Studio 2015. no se trabaja en ello.
    • este es trabajo para mí .. usted puede hacer la función más genérico, mediante la inicialización de la ruta de acceso dentro de la función myAudioFunction(palabra) { var base = «C/»; var path=base.concat(de la palabra «.mp3»); var textAudio = new Audio(ruta); textAudio.play(); }
  2. 0

    Pregunta interesante.

    Obviamente, usted debe ir para un JavaScript solución (como este post).
    Para citar css-tricks.com:

    Una vez más por desgracia, no podemos decirle a un <audio> elemento de qué hacer a través de CSS, por lo que vamos a necesitar JavaScript.

    Sin embargo ha configurado un muy buen reto.

    La <audio> elemento tiene la capacidad para mostrar los controles. En la mayoría de los navegadores, el botón de play vendría primero de la izquierda en los controles.
    Por lo tanto, si usted ajusta el adecuado <audio> elemento dentro de su carta elemento (<div>/<img>/etc.), luego, con un poco de absoluta-posicionamiento de la magia, y bajo opacity para la <audio>, usted podría poner su carta «sobre el sonido». Así, cuando los usuarios hacen clic en la carta, que realmente haga clic en el botón reproducir.

    Si utiliza el navegador por defecto de los controles, entonces usted está navegador dependientes, como los controles dimensiones varían entre los navegadores. Sin embargo, usted puede crear controles personalizados, o el uso de jugadores disponibles en el mercado (como JPlayer), tener una constante dimensiones para adaptarse a sus cartas.

    Ejemplo y Demostración:

    El código siguiente se hace un clic en la letra H reproducir un sonido de un caballo, mientras que la prueba en un navegador Chrome.

    CSS:

    div#lH {
      position: absolute;
      width: 30px;
      height: 30px;
      overflow: hidden;
      z-index: 1;
      font-size: 25px;
      text-align:center;
    }
    audio#aH {
      position: absolute;
      top: -5px;
      left: -5px;
      z-index: 2;
      opacity: 0.01;
    }

    HTML:

    <div id="lH">
      <audio controls id="aH">
        <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
        <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
    </audio>
    H
    </div>

    Aquí un JSFiddle.

Dejar respuesta

Please enter your comment!
Please enter your name here