Timer for currently recording audio file

[haykarmeni]

Hello guys. I am implementing an audio recorder GUI inspired on the https://online-voice-recorder.com website. I got stuck in creating a label that will contain
00:00:00 text initially then whenever I push the recording button it increments until I stop/pause. Could you please suggest any solution to this approach? I still have not found any nice way to do it. Thanks.

[SGaist]

Hi,

You can use a QTimer. Connect the timeout signal to a slot in which you update the label text with the current value of the QTimer.

[eyllanesc]

@haykarmeni You can use QTimer + QElapsedTimer + QTime:

#include <QApplication>
#include <QElapsedTimer>
#include <QLabel>
#include <QPushButton>
#include <QTime>
#include <QTimer>
#include <QVBoxLayout>
#include <QWidget>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QWidget w;
    w.show();


    QPushButton *startButton = new QPushButton("Start");
    QPushButton *stopButton = new QPushButton("Stop");
    QLabel *label = new QLabel;
    label->setAlignment(Qt::AlignCenter);

    QTimer timer;
    timer.setInterval(500);
    QElapsedTimer elapsedTimer;

    QObject::connect(&timer, &QTimer::timeout, label, [label, &elapsedTimer](){
        label->setText(QTime(0, 0, 0).addMSecs(elapsedTimer.elapsed()).toString());
    });

    QObject::connect(startButton, &QPushButton::clicked, &timer, QOverload<>::of(&QTimer::start));
    QObject::connect(startButton, &QPushButton::clicked, label, [&elapsedTimer, &label](){
        elapsedTimer.start();
        label->setText(QTime(0, 0, 0).addMSecs(elapsedTimer.elapsed()).toString());
    });

    QObject::connect(stopButton, &QPushButton::clicked, &timer, &QTimer::stop);

    QVBoxLayout *lay = new QVBoxLayout(&w);
    lay->addWidget(startButton);
    lay->addWidget(stopButton);
    lay->addWidget(label);

    return a.exec();
}

[haykarmeni]

@eyllanesc actually I have a label named lblDuration for displaying timer in UI. It initially contains text 00:00:00 and has m_timer and m_elapsedTimer members in MainWindow class, thus based on your code I customized it by this way to integrate it into my code, but it still does not work as I expect,

m_timer.setInterval(500);

QObject::connect(ui->btnRecord, &QPushButton::clicked, &m_timer, QOverload<>::of(&QTimer::start));
QObject::connect(ui->btnRecord, &QPushButton::clicked, ui->lblDuration, [this](){
            m_elapsedTimer.start();
            ui->lblDuration->setText(QTime(0, 0, 0).addMSecs(m_elapsedTimer.elapsed()).toString());
        });

        QObject::connect(ui->btnStop, &QPushButton::clicked, &m_timer, &QTimer::stop);
}

[eyllanesc]

@haykarmeni Keep in mind a basic concept: the scope of the variables, probably timer and elapsedTimer are local variables that will be eliminated instantly, maybe you should use pointers or make them members of the class.

[haykarmeni]

@eyllanesc yes, I noticed it in my code and changed it but didn't reach to do here before your mention), but anyway no any progress(

[eyllanesc]

@haykarmeni Did my demo code work? If so then the problem is your implementation. If you want more help then you should provide a minimal compilable example.

[haykarmeni]

@eyllanesc here is the code(tried to minimize as much as possible to no violate compiling)

mainwindow.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>1000</width>
    <height>250</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <widget class="QLabel" name="lblBackground">
    <property name="geometry">
     <rect>
      <x>0</x>
      <y>0</y>
      <width>1000</width>
      <height>250</height>
     </rect>
    </property>
    <property name="text">
     <string/>
    </property>
    <property name="pixmap">
     <pixmap resource="Images.qrc">:/img/Icons/background.jpg</pixmap>
    </property>
    <property name="alignment">
     <set>Qt::AlignLeading|Qt::AlignLeft|Qt::AlignVCenter</set>
    </property>
   </widget>
   <widget class="QLabel" name="lblText">
    <property name="geometry">
     <rect>
      <x>380</x>
      <y>115</y>
      <width>240</width>
      <height>20</height>
     </rect>
    </property>
    <property name="font">
     <font>
      <family>Arial</family>
      <pointsize>9</pointsize>
     </font>
    </property>
    <property name="text">
     <string>Click the button to start recording...</string>
    </property>
    <property name="alignment">
     <set>Qt::AlignCenter</set>
    </property>
   </widget>
   <widget class="QPushButton" name="btnRecord">
    <property name="geometry">
     <rect>
      <x>482</x>
      <y>200</y>
      <width>36</width>
      <height>36</height>
     </rect>
    </property>
    <property name="cursor">
     <cursorShape>PointingHandCursor</cursorShape>
    </property>
    <property name="text">
     <string/>
    </property>
    <property name="icon">
     <iconset resource="Images.qrc">
      <normaloff>:/img/Icons/microphone button.png</normaloff>:/img/Icons/microphone button.png</iconset>
    </property>
    <property name="iconSize">
     <size>
      <width>30</width>
      <height>30</height>
     </size>
    </property>
   </widget>
   <widget class="QToolButton" name="tlbtnSettings">
    <property name="geometry">
     <rect>
      <x>940</x>
      <y>200</y>
      <width>36</width>
      <height>36</height>
     </rect>
    </property>
    <property name="cursor">
     <cursorShape>PointingHandCursor</cursorShape>
    </property>
    <property name="text">
     <string/>
    </property>
    <property name="icon">
     <iconset resource="Images.qrc">
      <normaloff>:/img/Icons/settings.png</normaloff>:/img/Icons/settings.png</iconset>
    </property>
   </widget>
   <widget class="QPushButton" name="btnStop">
    <property name="geometry">
     <rect>
      <x>460</x>
      <y>200</y>
      <width>36</width>
      <height>36</height>
     </rect>
    </property>
    <property name="cursor">
     <cursorShape>PointingHandCursor</cursorShape>
    </property>
    <property name="text">
     <string/>
    </property>
    <property name="icon">
     <iconset resource="Images.qrc">
      <normaloff>:/img/Icons/stop button.png</normaloff>:/img/Icons/stop button.png</iconset>
    </property>
   </widget>
   <widget class="QPushButton" name="btnPause">
    <property name="geometry">
     <rect>
      <x>502</x>
      <y>200</y>
      <width>36</width>
      <height>36</height>
     </rect>
    </property>
    <property name="cursor">
     <cursorShape>PointingHandCursor</cursorShape>
    </property>
    <property name="text">
     <string/>
    </property>
    <property name="icon">
     <iconset resource="Images.qrc">
      <normaloff>:/img/Icons/pause button.png</normaloff>:/img/Icons/pause button.png</iconset>
    </property>
   </widget>
   <widget class="QLabel" name="lblStatus">
    <property name="geometry">
     <rect>
      <x>60</x>
      <y>30</y>
      <width>80</width>
      <height>20</height>
     </rect>
    </property>
    <property name="font">
     <font>
      <family>Arial</family>
      <pointsize>9</pointsize>
     </font>
    </property>
    <property name="text">
     <string/>
    </property>
    <property name="alignment">
     <set>Qt::AlignCenter</set>
    </property>
   </widget>
   <widget class="QLabel" name="lblDuration">
    <property name="geometry">
     <rect>
      <x>870</x>
      <y>30</y>
      <width>100</width>
      <height>20</height>
     </rect>
    </property>
    <property name="font">
     <font>
      <family>Arial</family>
      <pointsize>9</pointsize>
     </font>
    </property>
    <property name="text">
     <string/>
    </property>
    <property name="alignment">
     <set>Qt::AlignCenter</set>
    </property>
   </widget>
   <widget class="QComboBox" name="cmboxAudioInputs">
    <property name="geometry">
     <rect>
      <x>764</x>
      <y>210</y>
      <width>211</width>
      <height>25</height>
     </rect>
    </property>
   </widget>
  </widget>
 </widget>
 <resources>
  <include location="Images.qrc"/>
 </resources>
 <connections/>
</ui>

mainwindow.cpp

void MainWindow::setupGUI(){
    ui->lblText->setStyleSheet("color: white;");
    ui->lblStatus->setStyleSheet("color: white;");
    ui->lblDuration->setStyleSheet("color:white");
    ui->btnPause->setVisible(false);
    ui->btnStop->setVisible(false);
    ui->lblDuration->setVisible(false);
    ui->cmboxAudioInputs->setVisible(false);
}

void MainWindow::on_btnRecord_clicked()
{
    ui->btnPause->setVisible(true);//discloses Pause button
    ui->btnStop->setVisible(true);//discloses Stop button
    ui->btnRecord->setVisible(false);//hides Record button
    ui->tlbtnSettings->setVisible(false);//hides Settings toolbutton
    ui->lblText->setVisible(false);//hides "Click the button to start recording" text
    ui->lblStatus->setText("Recording");//changes status
    ui->lblDuration->setVisible(true);

    m_recorder = new QAudioRecorder();
    m_recorder->record();
    m_recorder->stateChanged(QMediaRecorder::State::RecordingState);//changes state of recorder

    m_Timer.setInterval(1000);

    QObject::connect(&m_Timer, &QTimer::timeout, ui->lblDuration, [this](){
        ui->lblDuration->setText(QTime(0, 0, 0).addMSecs(m_elapsedTimer.elapsed()).toString());
    });

    QObject::connect(ui->btnRecord, &QPushButton::clicked, &m_Timer, QOverload<>::of(&QTimer::start));
    QObject::connect(ui->btnRecord, &QPushButton::clicked, ui->lblDuration, [this](){
                                                                                     m_elapsedTimer.start();
                                                                                     ui->lblDuration->setText(QTime(0, 0, 0).addMSecs(m_elapsedTimer.elapsed()).toString());
                                                                                     });

    QObject::connect(ui->btnStop, &QPushButton::clicked, &m_Timer, &QTimer::stop);
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QMediaRecorder>
#include <QAudioRecorder>
#include <QAudioEncoderSettings>
#include <QAudioDeviceInfo>
#include <QTimer>
#include <QTime>
#include <QDebug>
#include <QElapsedTimer>
#include <QString>
#include <QUrl>
#include <QFileDialog>
#include <QStringList>
#include <QApplication>
#include <QElapsedTimer>
#include <QVBoxLayout>
#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
    void setupGUI();

private slots:
    void on_btnRecord_clicked();

    void on_tlbtnSettings_clicked();

    void on_btnStop_clicked();

    void on_btnPause_clicked();

private:
    QTimer m_Timer;
    QElapsedTimer m_elapsedTimer;
    Ui::MainWindow *ui;
    QAudioRecorder *m_recorder;
    QAudioEncoderSettings *m_settings;
};
#endif // MAINWINDOW_H

main.cpp

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

[J.Hilk]

so, @haykarmeni and where is your connection to the timeout signal of the QTimer, to update the label? 😉

[haykarmeni]

@J-Hilk , please could you tell me what kind of code I need to add?

[eyllanesc]

@haykarmeni In my code there is QObject::connect(&timer, &QTimer::timeout, label, [label, &elapsedTimer](){ label->setText(QTime(0, 0, 0).addMSecs(elapsedTimer.elapsed()).toString()); }); , where is the equivalent in your code?

[haykarmeni]

This post is deleted!

[haykarmeni]

@eyllanesc , I added QObject::connect(&m_Timer, &QTimer::timeout, ui->lblDuration, [this](){ ui->lblDuration->setText(QTime(0, 0, 0).addMSecs(m_elapsedTimer.elapsed()).toString()); });, but it still does not work :(

[SGaist]

Did you check that your lambda is called ?

[haykarmeni]

@SGaist , I checked it, it works, but the strange thing was that I have to double-click on btnRecord to start recording, that is why I got lost, but actually, I don't want to have that feature, I want just a one-click event

[eyllanesc]

@haykarmeni You should point that out from the beginning, if you don't give us information it is difficult to help you. Move all connections to the constructor, also this lines:

m_recorder = new QAudioRecorder();
m_recorder->stateChanged(QMediaRecorder::State::RecordingState);//changes state of recorder

m_Timer.setInterval(1000);

Just leave the following in the slot:

void MainWindow::on_btnRecord_clicked()
{
    ui->btnPause->setVisible(true);//discloses Pause button
    ui->btnStop->setVisible(true);//discloses Stop button
    ui->btnRecord->setVisible(false);//hides Record button
    ui->tlbtnSettings->setVisible(false);//hides Settings toolbutton
    ui->lblText->setVisible(false);//hides "Click the button to start recording" text
    ui->lblStatus->setText("Recording");//changes status
    ui->lblDuration->setVisible(true);
    m_recorder->record();
}

[haykarmeni]

thank you, @eyllanesc, now it works as I expect...thank you very much for so much assistance and readiness :)