QML Multimedia play all mp3 in a folder - c++

Question

I am trying to build a simple media player in QML . I can't use QFile Dialog as its a single window application running on EGLFS . I managed so far to build a simple file browser for QML and can play a mp3 from a fixed location. But here is where I am stuck:
How do I set the current selected file from the treeview as source for my audio ?
How can I get the Audio play each file with file ending mp3 from the selected folder?
Thanks for your help
.pro file
QT += qml quick multimedia widgets
CONFIG += c++11
SOURCES += main.cpp
RESOURCES += qml.qrc
QML_IMPORT_PATH =
QML_DESIGNER_IMPORT_PATH =
DEFINES += QT_DEPRECATED_WARNING
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
main.cpp:
#include <QApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QtQml>
#include <QFileSystemModel>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
app.setOrganizationName("Power-Tune");
app.setOrganizationDomain("power-tune.org");
app.setApplicationName("PowerTune");
QQmlApplicationEngine engine;
//
QFileSystemModel model;
model.setRootPath("/");
engine.rootContext()->setContextProperty("my_model", &model);
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
return app.exec();
}
my main.qml :
import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4
import QtMultimedia 5.8
ApplicationWindow {
visible: true
width: 800
height: 480
minimumWidth: 800
minimumHeight: 480
title: qsTr("PowerTune ")
// visibility: "FullScreen"
color: "black"
Rectangle {
width: parent.width
height: parent.height
property bool playing: false
Audio {
id: playMusic
//source: currently selected file in TreeView
}
Button {
id: previous
text: "previous"
width: 100
anchors.right: playpause.left
// onClicked: select previous item in current folder
}
Button {
id: playpause
text: "play/pause" //playing ? "Stop music" : "Start music"
width: 100
anchors.right: next.left
onClicked: {
if(playing == true) {
playMusic.stop()
playing = false
} else {
playMusic.play()
playing = true
}
}
}
Button {
id: next
text: "next"
width: 100
anchors.right: parent.right
}
TreeView {
id:mp3selector
width: parent.width/2
height: parent.height
TableViewColumn {
title: "Name"
role: "fileName"
width: 300
}
model: my_model
}
}
}

Answer 1

Couple of notes:
property bool playing: false
Properties are better to be defined at top of hierarchy so that they accessible in all children, so prefer to put it directly in ApplicationWindow not in Rectangle element.
And, I think TreeView is not a suitable choice (Its a Quick Controls 1.0 element not available in Quick Controls 2.0 , and for mixing check this post);
You can do the model directly from QML, using a ListView with FolderListModel, you only need an additional of decorations for highlighting and selecting of files with mouse .. that's all, TreeView could be replaced with below code, it works and fancy!
...
import QtQuick.Controls 2.2
import Qt.labs.folderlistmodel 2.1
...
ListView {
id: list
width: parent.width/2
height: parent.height
model: folderModel
onCurrentIndexChanged: {
// This will handle changing playlist with all possible selection methods
playMusic.source = folderModel.get(currentIndex, "fileURL")
}
FolderListModel {
id: folderModel
folder: "file:///MP3/"
showDirs: false
nameFilters: ["*.mp3"]
}
delegate: Component {
Item {
width: parent.width
height: 40
Column {
Text { text: fileName }
}
MouseArea {
anchors.fill: parent
onClicked: {
list.currentIndex = index
}
}
}
}
highlight: Rectangle {
color: 'grey'
}
focus: true
}
For your buttons onClicked just handle currentIndex of the ListView , for example in the next button add:
onClicked: list.currentIndex += 1
you also need to add some code to avoid getting index out of range or -1 ...etc.