2

Cenário teste

Tenho uma página com os seguintes elementos:

<audio id="aud1" src="audio/1.ogg" type="audio/ogg"></audio>
<audio id="aud2" src="audio/2.ogg" type="audio/ogg"></audio>
<audio id="aud3" src="audio/3.ogg" type="audio/ogg"></audio>

E uma função:

$.ajax({
    url : "x.php",
    type : "post",
    dataType: "text",
    data : data,
    cache: false,
    success : function(response) {
        if (response == '1') {
            document.getElementById('aud1').play();
        } else if (response == '2') {
            document.getElementById('aud2').play();
        } else if (response == '3') {
            document.getElementById('aud3').play();
        } else if (response == 'E'){
            alert('Erro.')
        }
    },
    error : function() {
        alert('error');
    }
})

Conforme o retorno da requisição por ajax, a função irá dar play no áudio. Funcionando perfeitamente.


Problema

Quando uso $('#aud1').play(), me retorna o seguinte erro:

Uncaught TypeError: $(...).play is not a function


Dúvida

  • Existe uma forma de dar "play" no áudio via jQuery?
0

3 Respostas 3

2

Primeiramente o seu seletor está preenchido incorretamente, o seletor $('aud1') pegaria elemento do DOM com a tag aud1, e não com o id. Caso queira pegar pelo id, use $('#aud1').

Mesmo que preenchendo corretamente, não funcionaria, pois hoje o jQuery não dá suporte ao .play() a partir de seu elemento. Inclusive isso já foi aberto como um bug e fechado como um CLOSED FEATURE (WONTFIX) no bug tracker oficial do jQuery.

Para funcionar, você pode simplesmente acessar o elemento do DOM a partir do elemento jQuery pelo seu indice:

$('#aud1')[0].play();
4
  • Sobre o seletor, foi falha na digitação da pergunta mesmo rs... Sobre sua solução, realmente funcionou +1... Mas gostaria de saber o por que de usar o [0]? Seria pelo motivo de quando executo $('#aud1'), ele cria um array (ou obj?) de dados do elemento? Ou algo do tipo!?
    – rbz
    1/02/2019 às 10:54
  • Um elemento jQuery pode carregar multiplos elementos do DOM, por exempo, quando eu chamo $('div'), terei em mão todas as divs da página, e caso eu faça $('div').addClass('teste'), estarei adicionando a classe teste em todas elas.
    – Francisco
    1/02/2019 às 11:06
  • Então, mas se eu chamo $('#aud1') porque então preciso do [0]? O que teria no caso de [1] então!? Não entendi se ele "desmancha" os dados do elemento, ou o que faz...
    – rbz
    1/02/2019 às 11:10
  • Como eu disse, o elemento jQuery carrega múltiplos elementos do DOM. Se você acessa o índice 0 com [0] você está simplesmente acessando o primeiro elemento dessa lista, com [1], o segundo, e assim vai. Se você quer modificar em todos, terá que iterar sobre eles.
    – Francisco
    1/02/2019 às 11:31
2

Basicamente, fazer isto:

$('#aud1')

não vai trazer um elemento que tenha o método .play()
(não encontrei este método na documentação do jQuery, não pode confundir o objeto do jQuery com o do DOM).

Se quer usar o .play(), que é nativo do HTML, precisa pegar o elemento do DOM.

Em jQuery se faz desta forma:

$('#aud1').get(0).play()

Veja a documentação do get():

https://api.jquery.com/get/

1

O método play pertence à tag html de áudio. Tem que aceder directamente ao elemento html e invocar o método play.

Para aceder ao elemento html usando jQuery:

$('#aud1')[0].play()

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .