Reproducir un archivo de audio usando jQuery cuando se hace clic en un botón

Question 1

Estoy tratando de 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();
        });
    });
});

También he creado un violín para eso.

Question 2

¿Qué enfoque?

Puede reproducir audio con <audio>etiqueta o <object>o <embed>. Lazy loading (cargar cuando lo necesite) 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 .play()y pausarlo .pause().

Cosas que usamos

Usaremos canplayevento para detectar que nuestro archivo está listo para ser reproducido.

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

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

Guía de ejemplo

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

Cuando el tiempo actual sea igual a su duración, el archivo de audio dejará de reproducirse. Siempre que lo use play(), comenzará desde el principio.

Usamos timeupdateevento para actualizar la hora actual cada vez que .currentTimecambia el audio .
Usamos canplayevento para actualizar la información cuando el archivo está listo para reproducirse.
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>

Expandir fragmento

Question 3

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

No funciona $("#myAudioElement").play()como cabría esperar. La razón oficial es que incorporarlo a jQuery agregaría un play()método a cada elemento, lo que causaría una sobrecarga innecesaria. Entonces, en su lugar, debe referirse a él por su posición en la matriz de elementos DOM con los que está recuperando $("#myAudioElement"), también conocido como 0.

Esta cita es de un error que se envió al respecto , que se cerró como "característica / no se corrige":

Para hacer eso, necesitaríamos 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 para los elementos que no son de medios, por lo que no parece que valga la pena los bytes adicionales que tomaría.

Question 4

Para cualquier otra persona que lo siga, simplemente tomé la respuesta de Ahmet y actualicé el jsfiddle del autor de la pregunta original aquí , sustituyendo:

audio.mp3

para

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

enlazando en un mp3 disponible gratuitamente fuera de la web. ¡Gracias por compartir esta sencilla solución!

Question 5

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

<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, puede inicializar tantos audio como desee:

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

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"

Question 6

Demostración de JSFiddle

Esto es lo que uso con JQuery:

$('.button').on('click', function () { 
    var obj = document.createElement("audio");
        obj.src = "linktoyourfile.wav"; 
        obj.play(); 
});

Question 7

Qué pasa:

$('#play').click(function() {
  const audio = new Audio("https://freesound.org/data/previews/501/501690_1661766-lq.mp3");
  audio.play();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Expandir fragmento

Answer 1

Estoy tratando de 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();
        });
    });
});

También he creado un violín para eso.

Answer 2

¿Estabas usando audio de HTML5

OnesimusUnbound

Answer 3

¿Qué enfoque?

Puede reproducir audio con <audio>etiqueta o <object>o <embed>. Lazy loading (cargar cuando lo necesite) 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 .play()y pausarlo .pause().

Cosas que usamos

Usaremos canplayevento para detectar que nuestro archivo está listo para ser reproducido.

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

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

Guía de ejemplo

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

Cuando el tiempo actual sea igual a su duración, el archivo de audio dejará de reproducirse. Siempre que lo use play(), comenzará desde el principio.

Usamos timeupdateevento para actualizar la hora actual cada vez que .currentTimecambia el audio .
Usamos canplayevento para actualizar la información cuando el archivo está listo para reproducirse.
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>

Expandir fragmento

Answer 4

1

Y debe poner este script al final de <body> *

tbleckert

Answer 5

aquí hay un marcado que funciona principalmente en todos los navegadores .

shaijut

Answer 6

Muy bueno, aunque el OP dijo explícitamente que quería hacer esto en jQuery. En su ejemplo, está utilizando javascript puro para la manipulación de dom y los oyentes de eventos.

Jacques

Answer 7

Tengo un problema con este fragmento: ¿cómo puedo detener automáticamente el audio cuando finaliza el mp3? ahora, con mi audio muy corto, esto continúa sonando en bucle

Domenico Monaco

Answer 8

1

@DomenicoMonaco Simplemente elimine el endedevento que reproduce el audio desde el principio.

Ahmet Can Güven

Answer 9

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

No funciona $("#myAudioElement").play()como cabría esperar. La razón oficial es que incorporarlo a jQuery agregaría un play()método a cada elemento, lo que causaría una sobrecarga innecesaria. Entonces, en su lugar, debe referirse a él por su posición en la matriz de elementos DOM con los que está recuperando $("#myAudioElement"), también conocido como 0.

Esta cita es de un error que se envió al respecto , que se cerró como "característica / no se corrige":

Para hacer eso, necesitaríamos 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 para los elementos que no son de medios, por lo que no parece que valga la pena los bytes adicionales que tomaría.

Answer 10

3

¡Gracias! ¡Exactamente lo que estaba buscando!

utdrmac

Answer 11

21

Para cualquier otra persona que lo siga, simplemente tomé la respuesta de Ahmet y actualicé el jsfiddle del autor de la pregunta original aquí , sustituyendo:

audio.mp3

para

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

enlazando en un mp3 disponible gratuitamente fuera de la web. ¡Gracias por compartir esta sencilla solución!

texas-bronius
fuente

Funciona en Firefox 42 en Ubuntu

Bojan Kogoj

1

El evento de carga no se activa en este jsfiiddle en Chrome. Solo se reproduce debido al atributo de reproducción automática.

Tom

Answer 12

Funciona en Firefox 42 en Ubuntu

Bojan Kogoj

Answer 13

1

El evento de carga no se activa en este jsfiiddle en Chrome. Solo se reproduce debido al atributo de reproducción automática.

Tom

Answer 14

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

<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, puede inicializar tantos audio como desee:

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

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"

Answer 15

Demostración de JSFiddle

Esto es lo que uso con JQuery:

$('.button').on('click', function () { 
    var obj = document.createElement("audio");
        obj.src = "linktoyourfile.wav"; 
        obj.play(); 
});

Answer 16

4

Qué pasa:

$('#play').click(function() {
  const audio = new Audio("https://freesound.org/data/previews/501/501690_1661766-lq.mp3");
  audio.play();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Expandir fragmento

Luis David
fuente

esa es la forma más sencilla, funciona como un encanto y puedes disparar esta misma acción usando eventos vanilla js si lo deseas.

Andrea Mauro

Answer 17

esa es la forma más sencilla, funciona como un encanto y puedes disparar esta misma acción usando eventos vanilla js si lo deseas.

Andrea Mauro

Reproducir un archivo de audio usando jQuery cuando se hace clic en un botón

Respuestas:

¿Qué enfoque?

Cosas que usamos

Guía de ejemplo