Cordova

Question

让我解释清楚。我正在使用 Cordova 构建一个聊天应用程序，我想像在 Messenger 中一样做一个录音功能，你按住一个按钮，它会改变它的外观，然后在一段时间后你释放按钮，声音文件被发送到服务器。我尝试这样做，有时它可以工作，但有时它会意外停止，或者有时当您将手指移动一个像素时按钮的外观变为未单击。

我正在使用的框架：Onsen UI and jQuery

现在这是我的html按钮

<ons-button id="btnRecordSound" modifier="large" disable-auto-styling>Hold to record</ons-button>

这里是 javascript

let soundRecord = '';
let isRecording = false;

function setRecordSoundButton() {
    $('#btnRecordSound').on('touchstart touchend', (event) => {
        if (event.type == 'touchstart') {
            startSoundRecording();
        } else if (event.type == 'touchend') {
            stopSoundRecording();
        }
    });
}

function startSoundRecording() {
    soundRecord = new Media(/*some file path here*/, () => {
        // success function
    });
    soundRecord.startRecord();
    isRecording = true;
    setTimeout(favoChat.stopSoundRecording, 30000);
}

function stopSoundRecording() {
    if (isRecording) {
        isRecording = false;
        soundRecord.stopRecord();
    }
}

如你所见，我是靠touchstart和touchend事件来决定什么时候开始和停止的，还有一个强制setTimeout函数，在给定的时间限制停止录制。

这是可视化按钮的最佳方式吗？我需要它在距离触摸点仅移动一个像素时不改变外观。如果有的话，我想设置一些最大间隔，当移动到它外面时，然后停止它。还有，启动和停止功能好吗？我需要准确的停止功能。

Answer 1

我想它 意外停止的原因 是因为您在设置超时后没有清除超时。

如果你开始录制一个 20 秒的音频剪辑，停止录制然后立即再次开始录制，仍然有 10 秒的超时，因为它没有被清除并且将在 10 秒后运行秒。

如果您将代码更改为如下内容：

let soundRecord = '';
let isRecording = false;
let soundTimeout = null;

function setRecordSoundButton() {
    $('#btnRecordSound').on('touchstart touchend', (event) => {
        if (event.type == 'touchstart') {
            startSoundRecording();
        } else if (event.type == 'touchend') {
            stopSoundRecording();
        }
    });
}

function startSoundRecording() {
    soundRecord = new Media( /*some file path here*/ , () => {
        // success function
    });
    soundRecord.startRecord();
    isRecording = true;
    soundTimeout = setTimeout(favoChat.stopSoundRecording, 30000);
}

function stopSoundRecording() {
    if (isRecording) {
        clearTimeout(soundTimeout);
        isRecording = false;
        soundRecord.stopRecord();
    }
}

应该可以解决这个问题。

Cordova - 用于按住以录制音频的按钮 - 有时会停止

Cordova - button for Hold to record audio - sometimes stops

javascript

jquery

onsen-ui

onsen-ui2