Question

我正在创建一个页面，上传，播放音频，当用户正在收听音轨时，他们可以在想要点击时暂停它。

以下是我的代码。

HTML：

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

jQuery代码：

$(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');
        }


    });
});

CSS：

.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链接：

Live jsFiddle Demo

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

Answer 1

<强> Working Demo

试试这个代码段，

$(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>属性。

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

Answer 2

在声明处理程序之后可能会执行$('a#button').click()，但这不是一个优雅的解决方案。最好声明一个playNow()和pauseNow()函数，并在就绪处理程序的末尾调用它们。

在页面加载时播放音频并暂停onClick

2 个答案: