Question

这是一个JSFiddle：

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的line 1 and 2替换为：

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

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

请参阅jsfiddle

JavaScript播放/暂停音频切换

1 个答案: