CODEWITHSUNDEEP
javascriptjqueryhtml
Jack Zhang
Jack Zhang

Reputation: 326

JQuery with "audio" element in HTML5

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!

Upvotes: 1

Views: 194

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388326

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

Upvotes: 2

Related Questions