用于音频控制的 Javascript 按钮切换

Question

这是一个 JSFiddle:

http://jsfiddle.net/pLjM7/

HTML:

<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">play!</a>

JS:

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

ctrl.onclick = function () {

    // Update the Button
    var pause = ctrl.innerHTML === 'pause!';
    ctrl.innerHTML = pause ? 'play!' : 'pause!';

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

    // Prevent Default Action
    return false;
};

而不是使用“玩!”这个词和“暂停!”如何在为播放和暂停创建的自定义图像之间切换？

除此之外，有没有办法让“播放”按钮在音频播放完毕后返回。截至目前，当音频播放完毕时，它会保持暂停状态。

Answer 1

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;

    });

第二部分使用结束事件(非常好的功能)。 Jsfiddle:http://jsfiddle.net/8LczkwLz/

附注当然，您还必须在 HTML 中添加图像，请检查 fiddle。希望一切都清楚。