QML Multimedia 播放文件夹中的所有 mp3答案

【问题标题】：QML Multimedia play all mp3 in a folderQML Multimedia 播放文件夹中的所有 mp3
【发布时间】：2018-04-09 04:36:41
【问题描述】：

我正在尝试在 QML 中构建一个简单的媒体播放器。我不能使用 QFile Dialog 作为在 EGLFS 上运行的单窗口应用程序。到目前为止，我设法为 QML 构建了一个简单的文件浏览器，并且可以从固定位置播放 mp3。但这是我卡住的地方：

如何将树视图中当前选定的文件设置为我的音频源？
如何让Audio播放所选文件夹中文件结尾为mp3的每个文件？

感谢您的帮助

.pro 文件

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();

}

我的 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
        }
    }
}

【问题讨论】：

对不起，我的代码实际上有一个上一个和下一个按钮。我只是粘贴了代码的相关部分，因为 previous 和 next 目前不做任何事情。刚刚更正了
嗨，对不起，我开车去上班。我使代码示例现在可以作为独立的可执行文件执行。我想在 Treeview 中只显示扩展名为 *.mp3 的文件，然后将 playmusic 的源设置为当前选择的路径和所选文件名
是的，这也是个好主意。
它只需要能够显示文件夹和驱动器，因为我计划在我的树莓派上使用它，而且音乐 99% 的时间都在外部 USB 记忆棒上

标签： c++ qt audio qml multimedia

【解决方案1】：

几个笔记：

property bool playing: false

属性最好在层次结构的顶部定义，以便所有子级都可以访问它们，因此最好将其直接放在ApplicationWindow而不是Rectangle元素中。

而且，我认为TreeView 不是一个合适的选择（它是 Quick Controls 2.0 中不可用的 Quick Controls 1.0 元素，并且要混合检查此post）；

你可以直接从 QML 做模型，使用 ListView 和 FolderListModel，你只需要额外的装饰来突出显示和用鼠标选择文件..就是这样，TreeView 可以替换为下面代码，它工作得很好！

...
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
    }

对于您的按钮 onClicked 只需处理 ListView 的 currentIndex ，例如在 next 按钮中添加：

onClicked: list.currentIndex += 1

您还需要添加一些代码以避免索引超出范围或 -1 ...等。

【讨论】：