Question

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

我正在使用的框架：Onsen UI和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 - 用于保持录制音频的按钮 - 有时会停止

1 个答案: