Estoy intentando reproducir un archivo de audio cuando hago clic en el botón, pero no funciona, mi código html es:

<html>    
    <body>
        <div id="container">
            <button id="play">
                Play Music
            </button>
        </div>
    </body>
</html>

mi JavaScript es :

$('document').ready(function () {
    $('#play').click(function () {
        var audio = {};
        audio["walk"] = new Audio();
        audio["walk"].src = "http://www.rangde.org/static/bell-ring-01.mp3"
        audio["walk"].addEventListener('load', function () {
            audio["walk"].play();
        });
    });
});   

He creado un El violín para eso también.

  • Fuiste utilizando audio de HTML5
InformationsquelleAutor Suresh Pattu | 2011-12-13

5 Comentarios

  1. 138

    Qué enfoque?

    Puede reproducir audio con <audio> etiqueta o <object> o <embed>.
    Lazy loading(carga cuando la necesita), el sonido es el mejor método si su tamaño es pequeño. Usted puede crear el elemento de audio de forma dinámica, cuando su carga se puede empezar con .play() y hacer una pausa con .pause().

    Cosas hemos utilizado

    Vamos a utilizar canplay evento para detectar nuestro archivo está listo para ser jugado.

    No hay .stop() función de los elementos de audio. Sólo podemos detener. Y cuando queremos empezar desde el principio del archivo de audio cambiamos su .currentTime. Vamos a utilizar esta línea en nuestro ejemplo audioElement.currentTime = 0;. Para lograr .stop() función de la primera pausa en el archivo, a continuación, restablezca su tiempo.

    Queremos saber la longitud del archivo de audio y el actual tiempo de reproducción. Ya hemos aprendido .currentTimeanteriormente, para aprender de su longitud utilizamos .duration.

    Ejemplo Guía

    1. Cuando el documento está listo, hemos creado un elemento de audio de forma dinámica
    2. Se define su origen con el sonido que desea reproducir.
    3. Hemos utilizado ‘terminó’ evento para iniciar el archivo de nuevo.

    Cuando el currentTime es igual a la duración del archivo de audio se detendrá
    de jugar. Siempre que utilice play(), va a empezar desde el principio.

    1. Hemos utilizado timeupdate evento para actualizar momento en que audio .currentTime cambios.
    2. Hemos utilizado canplay evento a actualizar la información cuando el archivo está listo para ser jugado.
    3. Hemos creado botones para reproducir, pausar, reiniciar.

    JS:

    $(document).ready(function() {
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3');
        
        audioElement.addEventListener('ended', function() {
            this.play();
        }, false);
        
        audioElement.addEventListener("canplay",function(){
            $("#length").text("Duration:" + audioElement.duration + " seconds");
            $("#source").text("Source:" + audioElement.src);
            $("#status").text("Status: Ready to play").css("color","green");
        });
        
        audioElement.addEventListener("timeupdate",function(){
            $("#currentTime").text("Current second:" + audioElement.currentTime);
        });
        
        $('#play').click(function() {
            audioElement.play();
            $("#status").text("Status: Playing");
        });
        
        $('#pause').click(function() {
            audioElement.pause();
            $("#status").text("Status: Paused");
        });
        
        $('#restart').click(function() {
            audioElement.currentTime = 0;
        });
    });

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <body>
        <h2>Sound Information</h2>
        <div id="length">Duration:</div>
        <div id="source">Source:</div>
        <div id="status" style="color:red;">Status: Loading</div>
        <hr>
        <h2>Control Buttons</h2>
        <button id="play">Play</button>
        <button id="pause">Pause</button>
        <button id="restart">Restart</button>
        <hr>
        <h2>Playing Information</h2>
        <div id="currentTime">0</div>
    </body>

    • Y usted debe poner este script al final de <body>*
    • ok gracias es que funciona muy bien 🙂
    • Oh, por supuesto, mi error.
    • jsfiddle.net/gD4Dr/1256
    • aquí es una marca que la mayoría funciona en todos los browser.
    • Muy bonita, aunque el OP dijo explícitamente que quería hacer esto en jQuery. En su ejemplo, usted está usando puro javascript para la manipulación del árbol dom y detectores de eventos.

  2. 40

    La respuesta real, en jQuery, es

    $("#myAudioElement")[0].play();

    No funciona con $("#myAudioElement").play() como sería de esperar. La razón oficial es que la incorporación de éste en jQuery para agregar un play() método para cada elemento, lo que podría provocar una sobrecarga innecesaria. Así que en lugar de tener que referirse a él por su posición en la matriz de elementos DOM que se está recuperando con $("#myAudioElement"), aka 0.

    Esta cita es de un error que fue presentado al respecto, que estaba cerrada, como «función/wontfix»:

    Para hacer que tendríamos que añadir un método jQuery nombre para cada elemento de DOM nombre de método. Y por supuesto que el método no haría nada para no elementos de comunicación por lo que no parece que valdría la pena el extra de bytes que se iba a tomar.

    • Gracias! Exactamente lo que estaba buscando!
    • Bonita respuesta …
  3. 21

    Para cualquier otra persona siguiendo, he tomado simplemente Ahmet respuesta y actualizada de la original asker del jsfiddle aquí, sustituyendo:

    audio.mp3

    para

    http://www.uscis.gov/files/nativedocuments/Track%2093.mp3

    vinculación en una libremente disponible en mp3 en la web. Gracias por compartir la solución fácil!

    • Funciona en Firefox 42 en Ubuntu
    • El evento de carga no se dispara en este jsfiiddle en Chrome. Sólo es debido a la función de reproducción automática de atributo.
  4. 11

    Yo aquí tienen un bonito y versátil solución con un retroceso:

    <script type="text/javascript">
        var audiotypes={
            "mp3": "audio/mpeg",
            "mp4": "audio/mp4",
            "ogg": "audio/ogg",
            "wav": "audio/wav"
        }
    
        function ss_soundbits(sound){
            var audio_element = document.createElement('audio')
            if (audio_element.canPlayType){
                for (var i=0; i<arguments.length; i++){
                    var source_element = document.createElement('source')
                    source_element.setAttribute('src', arguments[i])
                    if (arguments[i].match(/\.(\w+)$/i))
                        source_element.setAttribute('type', audiotypes[RegExp.$1])
                    audio_element.appendChild(source_element)
                }
                audio_element.load()
                audio_element.playclip=function(){
                    audio_element.pause()
                    audio_element.currentTime=0
                    audio_element.play()
                }
                return audio_element
            }
        }
    </script>

    Después de que usted puede inicializar como muchos de audio como te gusta:

    <script type="text/javascript" >
        var clicksound  = ss_soundbits('your/path/to/click.ogg', "your/path/to/click.mp3");
        var plopsound  = ss_soundbits('your/path/to/plopp.ogg', "your/path/to/plopp.mp3");
    </script>

    Ahora se puede llegar a la inicializado elemento de audio donde quieras con simples llamadas de evento como

    onclick="clicksound.playclip()"
    
    onmouseover="plopsound.playclip()"

Dejar respuesta

Please enter your comment!
Please enter your name here