JQuery with "audio" element in HTML5

Question

I am new to JQuery, this is a basic question, and I do not why the following code does not work. Please help me to figure it out.

<!DOCTYPE html>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js">
    </script>
    <script>

        function test()
        {
            var audios=$("#audio1");
            alert(audios.volume);  //This line does not work, it returns "undefined"
            audios.volume=0.5; //This line does not work
            // audios.hide();  - This works fine
        }
    </script>
    <title>This is a test</title>
    </head>

    <body>
                <input type="button" value="Test" onclick="test()">
                <audio id="audio1" controls autoplay>
                    <source  src="http://zz.qz828.net/06/three.mp3" type="audio/mpeg">
                    Your browser does not support the audio element.
                </audio>
    </body>
    </html>

Have no idea why these two lines does not work:

alert(audios.volume);  //This line does not work
audios.volume=0.5; //This line does not work

Thanks!

Arun P Johny · Accepted Answer · 2014-02-13 06:33:03Z

2

you need to set the volume property to the dom element, $("#audio1") returns a jQuery object which does not have the volume property.

So you need to access the dom element from the jQuery object and then set the property or use .prop() to set the property value

audios[0].volume=0.5;
//or audios.prop('volume', 0.5);

answered Feb 13, 2014 at 6:33

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jack Zhang Over a year ago

Looks like there is a difference between jquery object vs DOM object, right?

Arun P Johny Over a year ago

@JackZhang it returns a jQuery Object not a dom element

Arun P Johny Over a year ago

@JackZhang there is very little common between them

Jack Zhang Over a year ago

Got it, this is kind of annoying, need to understand more basic concept of JQuery, I was assuming that JQuery returns exactly the DOM object directly, so I can use is for free.

Collectives™ on Stack Overflow

JQuery with "audio" element in HTML5

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related