Reproduza um arquivo de áudio usando jQuery quando um botão for clicado

91

Estou tentando reproduzir um arquivo de áudio quando clico no botão, mas não está funcionando, meu código html é:

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

meu JavaScript é:

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

Eu criei um Fiddle para isso também.

javascript jquery html Suresh Pattu
fonte
Você estava usando áudio de HTML5
OnesimusUnbound

Respostas:

143

Qual abordagem?

Você pode reproduzir áudio com <audio>tag ou <object>ou <embed>. Carregamento lento (carregue quando você precisar) o som é a melhor abordagem se seu tamanho for pequeno. Você pode criar o elemento de áudio dinamicamente, quando estiver carregado, você pode iniciá-lo .play()e pausá-lo .pause().

Coisas que usamos

Usaremos o canplayevento para detectar se nosso arquivo está pronto para ser reproduzido.

Não há .stop()função para elementos de áudio. Nós podemos apenas pausá-los. E quando queremos começar do início do arquivo de áudio, nós o alteramos .currentTime. Usaremos essa linha em nosso exemplo audioElement.currentTime = 0;. Para realizar a .stop()função, primeiro pausamos o arquivo e, em seguida, redefinimos seu tempo.

Podemos querer saber a duração do arquivo de áudio e o tempo de reprodução atual. Já aprendemos .currentTimeacima, para aprender seu comprimento usamos .duration.

Guia de exemplo

  1. Quando o documento está pronto, criamos um elemento de áudio dinamicamente
  2. Definimos sua fonte com o áudio que queremos reproduzir.
  3. Usamos o evento 'encerrado' para iniciar o arquivo novamente.

Quando o currentTime for igual à sua duração, o arquivo de áudio irá parar de tocar. Sempre que você usar play(), ele começará do início.

  1. Usamos timeupdateevento para atualizar a hora atual sempre que o áudio .currentTimemuda.
  2. Usamos o canplayevento para atualizar as informações quando o arquivo está pronto para ser reproduzido.
  3. Criamos botões para reproduzir, 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 trecho

Ahmet Can Güven
fonte
1
E você deve colocar este script no final de <body> *
tbleckert
aqui está uma marcação que funciona principalmente em todos os navegadores .
shaijut
Muito bom, embora o OP tenha dito explicitamente que queria fazer isso no jQuery. Em seu exemplo, você está usando javascript puro para manipulação de dom e ouvintes de eventos.
Jacques
Tenho um problema com este snippet: como posso interromper automaticamente o áudio quando o mp3 terminar? agora, com meu áudio muito curto, isso continua soando em loop
Domenico Monaco
1
@DomenicoMonaco Basta remover o endedevento que reproduz o áudio desde o início.
Ahmet Can Güven
45 
$("#myAudioElement")[0].play();

Não funciona $("#myAudioElement").play()como você esperaria. O motivo oficial é que incorporá-lo ao jQuery adicionaria um play()método a cada elemento, o que causaria sobrecarga desnecessária. Portanto, em vez disso, você deve se referir a ele por sua posição na matriz de elementos DOM com os quais você está recuperando $("#myAudioElement"), também conhecido como 0.

Esta citação é de um bug que foi enviado sobre isso , que foi fechado como "feature / wontfix":

Para fazer isso, precisaríamos adicionar um nome de método jQuery para cada nome de método de elemento DOM. E é claro que esse método não faria nada para elementos que não sejam de mídia, então não parece que valeria a pena os bytes extras que seriam necessários.

Felwithe
fonte
3
Obrigado! Exatamente o que eu estava procurando!
utdrmac de
21

Para qualquer outra pessoa acompanhando, simplesmente peguei a resposta de Ahmet e atualizei o jsfiddle do autor da pergunta original aqui , substituindo:

audio.mp3

para

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

vinculando em um mp3 disponível gratuitamente na web. Obrigado por compartilhar a solução fácil!

texas-bronius
fonte
Funciona no Firefox 42 no Ubuntu
Bojan Kogoj
1
O evento de carregamento não dispara neste jsfiiddle no Chrome. Ele só é reproduzido por causa do atributo autoplay.
Tom
12

Tenho aqui uma solução agradável e versátil com um substituto:

<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>

Depois disso, você pode inicializar quantos áudios quiser:

<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>

Agora você pode alcançar o elemento de áudio inicializado onde quiser com chamadas de eventos simples como

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"
André R. Kohl
fonte
4

Demonstração JSFiddle

Isso é o que eu uso com JQuery:

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

A respeito:

$('#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 trecho

Luis David
fonte
essa é a forma mais simples, funciona perfeitamente e você pode disparar essa mesma ação usando eventos js vanilla se quiser.
Andrea Mauro