HTML5 音频无方法播放答案

【问题标题】：HTML5 audio no method playHTML5 音频无方法播放
【发布时间】：2012-08-08 12:43:10
【问题描述】：

我的标记

还有这个 JQuery 代码

每次按播放键都会提示错误

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

每次我点击 play-bt 时它都会一直给我这个错误

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

音频标签不是有播放方法吗？

【问题讨论】：

只是补充其他人所说的，尝试从网络服务器提供包含媒体播放器的 html 页面。

标签： javascript jquery html audio media-player

【解决方案1】：

jQuery的.find()返回的是jQuery object，不是原生的HTMLAudioElement，所以需要unwrap the value返回的.find()：

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

【讨论】：

如果我有 2 个音频播放器怎么办？但它在不同的容器中？
@user962206 我不太明白。也许您可以编辑您的问题以显示您实际使用的标记。
@user962206 的意思是，如果您在使用 Javascript 工具包将东西粉碎之前花时间学习 Javascript，您可能从一开始就发现了这个非常简单的错误，而您的第二个问题将没有实际意义。不想刻薄，只是想表明你需要备份并花几天时间学习 JS。
好吧，我措手不及。但还是谢谢！ :) 现在我明白了。多谢你们。虽然 rlemon 有点冒犯
攻击性 === 真相。真的，如果你想学习 ping 我，我会给你很多免费资源。我有时可能很苛刻，但这只是指出尝试将工具包用于您不了解的不可知论者的语言是错误的。

【解决方案2】：

您访问的是 jquery，而不是这里的普通 dom 标签所以试试：

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

【讨论】：