Function . play() in jQuery

Asked

Viewed 298 times

2

Test scenario

I have a page with the following elements:

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

And a function:

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

According to the return of the request by ajax, the function will give play on audio. Working perfectly.

Problem

When I use $('#aud1').play(), returns me the following error:

Uncaught Typeerror: $(...). play is not a Function

Doubt

  • There is a way to "play" audio via jQuery?
javascript html jquery

3 answers

2

Basically, to do this:

$('#aud1')

will not bring an element that has the method .play()
(did not find this method in jQuery documentation, can not confuse the object of jQuery with that of DOM).

If you want to use the .play(), which is native to HTML, you need to take the DOM element.

In jQuery it is made this way:

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

See the documentation of get():

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

2


First your selector is filled incorrectly, the selector $('aud1') take DOM element with Aud1 tag, not id. If you want to take the id, use $('#aud1').

Even if filling it out correctly, it wouldn’t work, because today jQuery doesn’t support .play() from its element. Even this has already been opened as a bug and closed as a CLOSED FEATURE (WONTFIX) in the official jQuery tracker bug.

To work, you can simply access the DOM element from the jQuery element by your Dice:

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

  • About the selector, it was failure in typing the same question rs... About your solution, it really worked +1... But I would like to know why to use the [0]? Would be the reason when I execute $('#aud1'), he creates a array (or obj? ) element data? Or something like!?

  • A jQuery element can load multiple DOM elements, for example, when I call $('div'), I will have in hand all the Ivs of the page, and in case I do $('div').addClass('teste'), I’ll be adding the test class to all of them.

  • So, but if I call $('#aud1') because then I need the [0]? What would you have in case [1] then!? I don’t understand if it "undoes" the element data, or what it does...

  • As I said, the jQuery element loads multiple DOM elements. If you access index 0 with [0] you are simply accessing the first element of this list, with [1], the second, and so it goes. If you want to modify in all, you will have to iterate on them.

1

The method play belongs to the audio html tag. You have to directly access the html element and invoke the play method.

To access the html element using jQuery:

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

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.