你创建你的元素如此…
并添加一些功能:
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;
};
现在,按钮只是简单的文本(“播放”或“暂停”),但是您可以使用CSS做任何事情。而不是设置innerHTML,设置className,你很好去!