Pregunta Reproduzca un archivo de audio con jQuery cuando haga clic en un botón


Intento 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 Violín por eso también


73
2017-12-13 13:02


origen


Respuestas:


¿Qué enfoque?

Puedes reproducir audio con <audio> etiqueta o <object> o <embed>. Carga lenta (carga cuando la necesita) el sonido es el mejor enfoque si su tamaño es pequeño. Puede crear el elemento de audio dinámicamente, cuando está cargado puede iniciarlo con .play() y pausarlo con .pause().

Cosas que utilizamos

Usaremos canplay evento para detectar nuestro archivo está listo para ser jugado.

No hay .stop() función para elementos de audio. Solo podemos detenerlos. Y cuando queremos comenzar desde el principio del archivo de audio, cambiamos su .currentTime. Utilizaremos esta línea en nuestro ejemplo audioElement.currentTime = 0;. Conseguir .stop() función primero pausamos el archivo y luego restablecemos su tiempo.

Es posible que deseemos saber la duración del archivo de audio y el tiempo de reproducción actual. Ya aprendimos .currentTimearriba, para conocer su longitud, usamos .duration.

Guía de ejemplos

  1. Cuando el documento está listo, creamos un elemento de audio dinámicamente
  2. Configuramos su fuente con el audio que queremos reproducir.
  3. Usamos el evento 'terminado' para iniciar el archivo nuevamente.

Cuando el tiempo actual es igual a su duración, el archivo de audio se detendrá   jugando. Siempre que uses play(), comenzará desde el principio.

  1. Nosotros usamos timeupdate evento para actualizar la hora actual cada vez que el audio .currentTime cambios.
  2. Nosotros usamos canplay evento para actualizar la información cuando el archivo está listo para reproducirse.
  3. Creamos botones para reproducir, pausar, reiniciar.

$(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;
    });
});
<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>


120
2017-12-13 13:09



La respuesta real, en jQuery, es

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

No funciona con $("#myAudioElement").play() como esperarías La razón oficial es que incorporarlo a jQuery agregaría un play() método para cada elemento individual, lo que causaría una sobrecarga innecesaria. Por lo tanto, en su lugar, debe consultarlo por su posición en la matriz de elementos DOM que está recuperando con $("#myAudioElement"), aka 0.

Esta cita es de un error que fue presentado al respecto, que se cerró como "feature / wontfix":

Para hacer eso, necesitamos agregar un nombre de método jQuery para cada nombre de método de elemento DOM. Y, por supuesto, ese método no haría nada por los elementos no multimedia, por lo que no parece que valga la pena los bytes adicionales que tomaría.


24
2017-07-23 22:43



Para cualquier otra persona que me siga, simplemente tomé la respuesta de Ahmet y actualicé la respuesta original. jsfiddle aquí, sustituyendo:

audio.mp3

para

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

enlazar en una mp3 disponible gratuitamente de la web. ¡Gracias por compartir la solución fácil!


21
2018-01-28 20:23



Aquí tengo una solución agradable y versátil con una alternativa:

<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 eso, puedes inicializar la cantidad de audio que quieras:

<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 puede llegar al elemento de audio inicializado donde quiera con simples llamadas a eventos como

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"

12
2017-07-09 14:45