JavaScript播放/暂停音频按钮，更改类并创建自动循环

我的代码是这样工作的：当我点击play时，类“play”变为类“pause”，但当我点击pause时，它不会变为“play”类

第二个问题是如何使音频自动循环

我的代码：

HTML:

JS:

$（函数（）{
$（“.playback”）。单击（函数（e）{
e、 预防默认值（）；
var song=$（this.next（'audio'）.get（0）；
如果（歌曲暂停）
歌曲。游戏（）；
其他的
歌曲。暂停（）；
});
});
$（文档）.ready（函数（）{
$（'#toggle'）。绑定（“单击”，函数（）{
如果（$（this.attr（“类”）=“播放”）
$（this.attr（“class”，“pause”）；
其他的
$（this.attr（“class”，“play”）；
});
});

感谢您为我这样的初学者提供灵感。。 该脚本似乎在我的html页面中工作，使用iOS模拟器

---

也许您包括2个jquery版本？我不确定您的代码哪里出了问题。

您是否发现更改类代码的错误。我试过了，它与你的代码配合得很好。没有错误，但是类“暂停”不会更改回类“播放”你能设置一个JSFIDLE来重现问题吗？是的，我测试了fiddle的工作情况，似乎我的脚本与我网站上的其他脚本相交…使用循环函数可以添加到这个脚本中吗？

<a class="playback">
                <span id="toggle" class="play"></span>
            </a> 
            <audio>
             <source src="<?php bloginfo('template_directory') ?>/venga.ogg" type="audio/ogg" />
                <source src="<?php bloginfo('template_directory') ?>/venga.mp3" type="audio/mpeg" />
                Your browser does not support HTML5 audio.
            </audio>

.play {
        background: url('img/play.png') no-repeat;
        width: 32px;
        height: 32px;
        padding: 24px 45px 3px 0px;
        margin: 0 0 0 5px;
    }
    .pause {
        background: url('img/pause.png') no-repeat;
        width: 32px;
        height: 32px;
        padding: 24px 45px 3px 0px;
        margin: 0 0 0 5px;
    }

<script>
$(function() {
    $(".playback").click(function(e) {
        e.preventDefault();
        var song = $(this).next('audio').get(0);
        if (song.paused)
            song.play();
        else
            song.pause();
    });
});
</script>
 <script type="text/javascript">
$(document).ready(function() {
    $('#toggle').bind("click", function() {
        if ($(this).attr("class") == "play")
            $(this).attr("class", "pause");
        else
            $(this).attr("class", "play");
    });
});
</script>