用于音频控制的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;
};

而不是用"玩！"one_answers"暂停！"如何在为播放和暂停创建的自定义图像之间切换？

除此之外，是否有一种方法可以在播放完音频后返回"播放"按钮。从现在起，当音频播放完毕时，它将保持暂停状态。

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;
    });

第二部分使用结束事件（非常好的特性）。Js文件：http://jsfiddle.net/8LczkwLz/

附言：你也必须在HTML中添加图像，当然，请检查fiddle。希望一切都清楚。