Jquery 在页面加载时播放音频并在单击时暂停

我正在创建一个页面，该页面可以加载、播放音频，当用户正在收听曲目时，他们可以在单击时随时暂停

下面是我的代码

HTML:

<audio id="player" src="http://www.soundjay.com/ambient/check-point-1.mp3"></audio>
<a class="soundIcnPlay" title="button" id="button">&nbsp;</a>

$(document).ready(function() {
    var playing = false;

    $('a#button').click(function() {
        $(this).toggleClass("down");

        if (playing == false) {
            document.getElementById('player').play();
            playing = true;
            $(this).removeClass('soundIcnPlay');
            $(this).addClass('soundIcnPause');

        } else {
            document.getElementById('player').pause();
            playing = false;
            $(this).removeClass('soundIcnPause');
            $(this).addClass('soundIcnPlay');
        }


    });
});

.soundIcnPlay {
    background: none repeat scroll 0 0 red;
    cursor: pointer;
    display: block;
    height: 100px;
    width: 100px;
}

.soundIcnPause {
    background: none repeat scroll 0 0 blue;
    cursor: pointer;
    display: block;
    height: 100px;
    width: 100px;
}

CSS:

<audio id="player" src="http://www.soundjay.com/ambient/check-point-1.mp3"></audio>
<a class="soundIcnPlay" title="button" id="button">&nbsp;</a>

$(document).ready(function() {
    var playing = false;

    $('a#button').click(function() {
        $(this).toggleClass("down");

        if (playing == false) {
            document.getElementById('player').play();
            playing = true;
            $(this).removeClass('soundIcnPlay');
            $(this).addClass('soundIcnPause');

        } else {
            document.getElementById('player').pause();
            playing = false;
            $(this).removeClass('soundIcnPause');
            $(this).addClass('soundIcnPlay');
        }


    });
});

.soundIcnPlay {
    background: none repeat scroll 0 0 red;
    cursor: pointer;
    display: block;
    height: 100px;
    width: 100px;
}

.soundIcnPause {
    background: none repeat scroll 0 0 blue;
    cursor: pointer;
    display: block;
    height: 100px;
    width: 100px;
}

jsFiddle链接：

<audio id="player" src="http://www.soundjay.com/ambient/check-point-1.mp3"></audio>
<a class="soundIcnPlay" title="button" id="button">&nbsp;</a>

$(document).ready(function() {
    var playing = false;

    $('a#button').click(function() {
        $(this).toggleClass("down");

        if (playing == false) {
            document.getElementById('player').play();
            playing = true;
            $(this).removeClass('soundIcnPlay');
            $(this).addClass('soundIcnPause');

        } else {
            document.getElementById('player').pause();
            playing = false;
            $(this).removeClass('soundIcnPause');
            $(this).addClass('soundIcnPlay');
        }


    });
});

.soundIcnPlay {
    background: none repeat scroll 0 0 red;
    cursor: pointer;
    display: block;
    height: 100px;
    width: 100px;
}

.soundIcnPause {
    background: none repeat scroll 0 0 blue;
    cursor: pointer;
    display: block;
    height: 100px;
    width: 100px;
}

我所做的是创建了一个播放效果onclick和类似的暂停效果。 我需要通过在页面加载时播放音频来反转它，并应在单击时暂停，再次单击时继续。

可能执行

$（'a#按钮'）。在声明处理程序可以执行后单击（）

，但这不是elegan解决方案。最好声明一个

playNow（）

和

pauseNow（）

函数，并在ready处理程序的末尾调用它们。

试试这个片段

$(document).ready(function() {
    var playing = true;
    var audioEl = $('#player')[0]
    audioEl.play();
    $('a#button').click(function() {
        if(playing){
            playing = false;
            audioEl.pause();
            $(this).removeClass('soundIcnPlay').addClass('soundIcnPause');
        }else{
            playing = true;
            audioEl.play();
            $(this).removeClass('soundIcnPause').addClass('soundIcnPlay');
        }

    });
});

---

另一个选项是将

autoplay

属性添加到

标记中

<audio id="player" src="http://www.soundjay.com/ambient/check-point-1.mp3" autoplay></audio>

只需这样做：？（警告：自动播放音频）非常好@Joe。。这正是我想要的。请张贴您的答案，以便我能接受。@Joe-如果您能张贴您的答案，以便我能接受，我将非常高兴。嗨@Joe。由于您没有发布答案，我接受了发布的第二个最佳答案。再次感谢：）是的@Shaunak。。它很好用+感谢你的努力。。问题是：它并没有改变类，而自动播放属性也会启用音频外观。谢谢您的时间。抱歉，删除了这些测试行，添加了更新的代码。是的。现在可以了，但我会和乔一起去，因为他先回答。如果他不发表他的回答，我将接受你的。