Question

这是一个小提琴：

HMTL：

<audio id="yourAudio" preload='none'>
    <source src='http://dl.dropbox.com/u/1538714/article_resources/song.m4a' type='audio/mpeg' />
</audio>
<a href="#" id="audioControl"><img src="http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2010/01/play1-150x150.png"></a>

JS：

var yourAudio = document.getElementById('yourAudio'),
    ctrl = document.getElementById('audioControl');

ctrl.onclick = function () {

    pause_html='<img src="https://cdn2.iconfinder.com/data/icons/media-and-navigation-buttons-square/512/Button_4-128.png">';

    play_html='<img src="http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2010/01/play1-150x150.png">';

    // Update the Button
    var pause = ctrl.innerHTML === pause_html;
    ctrl.innerHTML = pause ? play_html : pause_html;

    // Update the Audio
    var method = pause ? 'pause' : 'play';
    yourAudio[method]();

    // Prevent Default Action
    return false;
};



    document.getElementById('yourAudio').addEventListener('ended', function(){
  ctrl.innerHTML=play_html;

    });

有没有办法禁用暂停按钮被点击/暂停音频？我将播放的音频文件最多持续几秒钟，因此实际上不需要在它们中间暂停。话虽如此，我希望在音频播放时显示暂停按钮，作为用户的视觉提示。

Answer 1

一般来说，我认为只要从可用性的角度来看，你总是会让用户能够暂停某些事情。但是，为了回答你的问题，我会使用.preventDefault()和if else声明。

//Check the whether you are playing audio
if(ctrl.innerHTML == play_html){
     // Update the Button
    var pause = ctrl.innerHTML === pause_html;
    ctrl.innerHTML = pause ? play_html : pause_html;

    // Update the Audio
    var method = pause ? 'pause' : 'play';
    yourAudio[method]();

}else{
    ctrl.preventDefault();
}

这是在你的jsfiddle中测试和使用的

Javascript禁用暂停按钮被点击/暂停音频

1 个答案: