My markup

And this JQuery code

keeps on giving me error each time I press play

<div class = "container">
    <legend><strong>Zedd - Spectrum</legend></h4>
    <div class = "art-item"><img src="uploads/arts/default.jpg"></div>
        <audio class = "audio-player" src = "uploads/tracks/02 So Far.mp3">
        </audio>

            <div class = "playerContainer">

                <ul id =  "playerControls" >
                    <li class = "play-bt"></li>
                    <li class = "pause-bt"></li>
                    <li><div class ="progressContainer"><!-- Progess bars container //-->
                        <div class ="progressbar"></div>
                    </div>
                    </li>

                </ul>
                <span class ="timecode">0:00</span>
            </div>
</div>


<div class = "container">
    <legend><strong>Zedd - Spectrum</legend></h4>
    <div class = "art-item"><img src="uploads/arts/default.jpg"></div>
        <audio class = "audio-player" src = "uploads/tracks/track3.mp3">
        </audio>

            <div class = "playerContainer">

                <ul id =  "playerControls" >
                    <li class = "play-bt"></li>
                    <li class = "pause-bt"></li>
                    <li><div class ="progressContainer"><!-- Progess bars container //-->
                        <div class ="progressbar"></div>
                    </div>
                    </li>

                </ul>
                <span class ="timecode">0:00</span>
            </div>
</div>

Each time I click the play-bt it keeps on giving me this error

Uncaught TypeError: Object #<Object> has no method 'play' 

aren't audio tags has a play method?

My markup

And this JQuery code

keeps on giving me error each time I press play

<div class = "container">
    <legend><strong>Zedd - Spectrum</legend></h4>
    <div class = "art-item"><img src="uploads/arts/default.jpg"></div>
        <audio class = "audio-player" src = "uploads/tracks/02 So Far.mp3">
        </audio>

            <div class = "playerContainer">

                <ul id =  "playerControls" >
                    <li class = "play-bt"></li>
                    <li class = "pause-bt"></li>
                    <li><div class ="progressContainer"><!-- Progess bars container //-->
                        <div class ="progressbar"></div>
                    </div>
                    </li>

                </ul>
                <span class ="timecode">0:00</span>
            </div>
</div>


<div class = "container">
    <legend><strong>Zedd - Spectrum</legend></h4>
    <div class = "art-item"><img src="uploads/arts/default.jpg"></div>
        <audio class = "audio-player" src = "uploads/tracks/track3.mp3">
        </audio>

            <div class = "playerContainer">

                <ul id =  "playerControls" >
                    <li class = "play-bt"></li>
                    <li class = "pause-bt"></li>
                    <li><div class ="progressContainer"><!-- Progess bars container //-->
                        <div class ="progressbar"></div>
                    </div>
                    </li>

                </ul>
                <span class ="timecode">0:00</span>
            </div>
</div>

Each time I click the play-bt it keeps on giving me this error

Uncaught TypeError: Object #<Object> has no method 'play' 

aren't audio tags has a play method?

• javascript
• jquery
• html
• audio
• media-player

Share Improve this question Follow edited Aug 8, 2012 at 12:49 user962206 asked Aug 8, 2012 at 12:43 user962206user962206 16.2k6565 gold badges185185 silver badges273273 bronze badges 1

• Just to add on what others have said,try to serve the html page containing the media player from a webserver. – Gandalf Commented Aug 8, 2012 at 12:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

jQuery's .find() returns a jQuery object, not a native HTMLAudioElement, so you need to unwrap the value returned by .find():

$artItem.find('audio')[0].play();
// or
$artItem.find('audio').get(0).play();

You access the jquery, not the plain dom tag here So try:

$artItem.find("audio")[0].play()