如何在Ubuntu QML应用中进行语言录音

在QML API中，目前并没有一个相应的API来进行录音。我们必须使用Qt C++ API
QAudioRecorder来进行录音的工作。在这篇文章中，我们来介绍如何使用这个API来进行录音。

首先，我们来创建一个“QML App with C++ plugin (qmake)”模版的应用。注意qmake的项目必须是在15.04及以上的target上才可以运行。

为了录音，我创建了一个叫做“AudioRecorder”的类：

audiorecorder.h

#ifndef AUDIORECORDER_H
#define AUDIORECORDER_H

#include <QAudioRecorder>
#include <QUrl>

class AudioRecorder : public QObject
{
Q_OBJECT
Q_PROPERTY ( bool recording READ recording NOTIFY recordingChanged )
Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)

public:
explicit AudioRecorder(QObject *parent = 0);
const bool recording() const;
QString name() const;

Q_INVOKABLE QStringList supportedAudioCodecs();
Q_INVOKABLE QStringList supportedContainers();
Q_INVOKABLE QUrl path() {
return m_path;
}

signals:
void recordingChanged(bool);
void nameChanged(QUrl);

public slots:
void setName(QString name);
void setRecording(bool recording );
void record();
void stop();

private:
QString getFilePath(const QString filename) const;

private:
QAudioRecorder * m_audioRecorder;
bool m_recording;
QString m_name;
QUrl m_path;
};

#endif // AUDIORECORDER_H

audiorecorder.cpp

#include <QUrl>
#include <QStandardPaths>
#include <QDir>

#include "audiorecorder.h"

AudioRecorder::AudioRecorder(QObject *parent) : QObject(parent)
{
m_audioRecorder = new QAudioRecorder( this );
QAudioEncoderSettings audioSettings;
audioSettings.setCodec("audio/PCM");
audioSettings.setQuality(QMultimedia::HighQuality);
m_audioRecorder->setEncodingSettings(audioSettings);
// https://forum.qt.io/topic/42541/recording-audio-using-qtaudiorecorder/2 m_audioRecorder->setContainerFormat("wav");
m_recording = false;
}

const bool AudioRecorder::recording() const
{
return m_recording;
}

void AudioRecorder::setRecording(bool recording ) {
if (m_recording == recording)
return;

m_recording = recording;
emit recordingChanged(m_recording);
}

void AudioRecorder::record()
{
qDebug() << "Entering record!";

if ( m_audioRecorder->state() == QMediaRecorder::StoppedState ) {
qDebug() << "recording....! ";

m_audioRecorder->record ( );

m_recording = true;
qDebug() << "m_recording: " << m_recording;
emit recordingChanged(m_recording);
}
}

void AudioRecorder::stop()
{
qDebug() << "Entering stop!";

if ( m_audioRecorder->state() == QMediaRecorder::RecordingState ) {
qDebug() << "Stopping....";
m_audioRecorder->stop();
m_recording = false;
emit recordingChanged(m_recording);
}
}

QString AudioRecorder::name() const
{
return m_name;
}

void AudioRecorder::setName(QString name)
{
if (m_name == name)
return;

m_name = name;
emit nameChanged(name);

// at the same time update the path
m_path = QUrl(getFilePath(name));

// set the path
m_audioRecorder->setOutputLocation(m_path);
}

QStringList AudioRecorder::supportedAudioCodecs() {
return m_audioRecorder->supportedAudioCodecs();
}

QStringList AudioRecorder::supportedContainers() {
return m_audioRecorder->supportedContainers();
}

QString AudioRecorder::getFilePath(const QString filename) const
{
QString writablePath = QStandardPaths::
writableLocation(QStandardPaths::DataLocation);
qDebug() << "writablePath: " << writablePath;

QString absolutePath = QDir(writablePath).absolutePath();
qDebug() << "absoluePath: " << absolutePath;

// We need to make sure we have the path for storage
QDir dir(absolutePath);
if ( dir.mkdir(absolutePath) ) {
qDebug() << "Successfully created the path!";
}

QString path = absolutePath + "/" + filename;

qDebug() << "path: " << path;

return path;
}

在这里，我们使用了QStandardPath来获得在Ubuntu手机中可以访问的文件目录。这个QAudioRecorder的API的使用也是非常直接的。

我们的Main.qml的界面也非常简单：

Main.qml

import QtQuick 2.0
import Ubuntu.Components 1.1
import QtMultimedia 5.0
import AudioRecorder 1.0

/*!
\brief MainView with a Label and Button elements.
*/

MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"

// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "audiorecorder.liu-xiao-guo"

/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true

// Removes the old toolbar and enables new features of the new header.
useDeprecatedToolbar: false

width: units.gu(60)
height: units.gu(85)

Page {
title: i18n.tr("AudioRecorder")

AudioRecorder {
id: audio
name: "sample.wav"

onRecordingChanged: {
console.log("recording: " + recording);
}
}

MediaPlayer {
id: player
autoPlay: true
volume: 1.0
}

Column {
anchors.fill: parent
spacing: units.gu(1)

Label {
text: "Supported Audio codecs:"
}
ListView {
id: audiocodecs
width: parent.width
height: audiocodecs.contentHeight
model:audio.supportedAudioCodecs()
delegate: Text {
text: modelData
}
}

Rectangle {
width: parent.width
height: units.gu(0.1)
}

Label {
text: "Supported Containers:"
}
ListView {
id: audiocontainer
width: parent.width
height: audiocontainer.contentHeight
model:audio.supportedContainers()
delegate: Text {
text: modelData
}
}
}

Row {
anchors.bottom: parent.bottom
anchors.bottomMargin: units.gu(2)
anchors.horizontalCenter: parent.horizontalCenter
anchors.margins: units.gu(2)

spacing: units.gu(2)

Button {
id: record
text: "Record Audio"

enabled: !audio.recording

onClicked: {
audio.record();
}
}

Button {
id: stop
text: "Stop"

onClicked: {
audio.stop();
player.stop();
}
}

Button {
id: play
text: "Play Audio"

onClicked: {
console.log("path: " + audio.path() );
player.source = audio.path();
player.play();
}
}

}
}
}

在QML中，我们直接地使用：

AudioRecorder {
id: audio
name: "sample.wav"

onRecordingChanged: {
console.log("recording: " + recording);
}
}

我们可以通过“Record Audio”按钮来进行录音的工作。应用的界面如下：





经过在手机上的实验，录音的效果非常好，非常清晰。我们可以使用“Play Audio”按钮来播放。

整个项目的源在: https://github.com/liu-xiao-guo/audiorecorder