JavaScript 播放/暂停音频切换

Question

这是一个 JSFiddle:

http://jsfiddle.net/8LczkwLz/19/

HTML:

<audio class="flashcardAudio" preload='none'>
    <source src="http://dl.dropbox.com/u/1538714/article_resources/song.m4a" type='audio/mpeg' />
</audio>

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

JS:

var flashcardAudio = document.getElementsByClassName('flashcardAudio'),
control = document.getElementsByClassName('speakerClicked');

control.onclick = function () {
  pause_html='<img src="https://cdn2.iconfinder.com/data/icons/media-and-navigation-buttons- square/512/Button_4-128.png">';
  speaker_html='<img src="http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2010/01/play1-150x150.png">';

    // Update the Button
    var pause = control.innerHTML === pause_html;
    control.innerHTML = pause ? speaker_html : pause_html;

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

    // Prevent Default Action
    return false;
};

单击播放按钮时，我希望看到它切换到暂停按钮，反之亦然。不过，由于警报消息永远不会触发，因此在 JS 中输入函数似乎存在问题。

Answer 1

您忘记定位特定元素，只需将 JS 的第 1 行和第 2 行 替换为:

var flashcardAudio = document.getElementsByClassName('flashcardAudio')[0],
control = document.getElementsByClassName('speakerClicked')[0];

并删除暂停按钮 img url 中的空格。

请参阅jsfiddle