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!

Answer 1

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

JQuery with “audio” element in HTML5

Question

1 answers

solution1
2 ACCPTED 2014-02-13 06:33:03

JQuery with “audio” element in HTML5

Question

1 answers

solution1 2 ACCPTED 2014-02-13 06:33:03

solution1
2 ACCPTED 2014-02-13 06:33:03