其实我们只需要一个方法,一个按钮,我们通过识别这个按钮的状态得知是录音还是停止,比如隐藏一个 data-status 属性值来记住当前是哪个状态,HTML5 允许我们添加任意的以 data- 开头的属性,当我们用两个事件处理方法时需要切换当前绑定的 click 事件处理函数:
$('#record').on('click', startClicked);
function startClicked() {
$('#record').text('停止');
$('#record').off('click', startClicked);
$('#record').on('click', stopClicked);
}
function stopClicked() {
$('#record').text('录音');
$('#record').off('click', stopClicked);
$('#record').on('click', startClicked);
}
只有一个 click 事件函数时:
$('#record').on('click', btnClicked);
function btnClicked() {
if ($('#record').attr('data-status') === 'started') {
$('#record').text('录音');
$('#record').attr('data-status', 'stopped');
// 停止录音
} else {
$('#record').text('停止');
$('#record').attr('data-status', 'started');
//开始录音。
}
}