这是一个 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 中输入函数似乎存在问题。
最佳答案
您忘记定位特定元素,只需将 JS 的第 1 行和第 2 行
替换为:
var flashcardAudio = document.getElementsByClassName('flashcardAudio')[0],
control = document.getElementsByClassName('speakerClicked')[0];
并删除暂停按钮 img url 中的空格。
请参阅jsfiddle
关于JavaScript 播放/暂停音频切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26665747/