Paul Hammant's Blog: Making a very small MP3 player with QML

I’ve been futzing around with QML. Here’s a tiny MP3 player, for a single song in the current directory.

It would be nice if the Mac’s homebrew could install QML for you, but it can’t (yet I guess). Thus, I had to install the QT 5.5 piece manually (via it’s installer at qt.io).

The installer doesn’t make links for commands into /usr/local/bin or similar, so forgive the long path in the shebang line below (line 1):

#!/usr/bin/env /Users/paul/Qt/5.5/clang_64/bin/qml.app/Contents/MacOS/qml

import QtQuick 2.2
import QtMultimedia 5.0

Rectangle {
    width: 200
    height: 100
    property bool playing: false

    Text {
        anchors.centerIn: parent
        // one way binding - neat!
        text: playing ? "Stop music" : "Start music"
    }
    Audio {
        id: playMusic
        source: "MemphisSlim-IJustLandedInYourTown.mp3"
    }    
    MouseArea {
        anchors.fill: parent
        onClicked: {
            if(playing == true) {
                playMusic.stop()
                playing = false
            } else {
                playMusic.play()
                playing = true
            }
        }
    }
}

That’s an elegant syntax IMO. Not ugly bedfellows, like HTML and JavaScript.

The app only plays one song though. If you’re interested, that song is Memphis Slim’s “I Just Landed In Your Town”. Read about it on publicdomain4u, or grab the song from archive.org

The app on Mac OS X:

I’d like the app to offer a selection of a choice of songs from the current directory. There’s a Repeat{ } structure in QML that looks exactly what I want, but no ability to list files, which is a gaping hole in the API. At least, if there is, I can’t find it, as Google search results are littered with previous versions of QT, and indeed the name for QML isn’t standardized (it is alternately known as QtQuick and QtCreator). I believe the owners of Qt want you to dive off to C++ or a High level language that can bootstrap QML to do heavy lifting like List_the_files_or_subdirectories_in_a_directory. QML in the style that I have it, leverages JavaScript for the programmatic bits (as opposed to declarative).

The NodeJs people had to enhance JavaScript to add a lot more functions to make it usable server-side. For my needs that would be the file system API. Lo and behold, a Oleg Shparber (trollixx) has done just that with A port of Node.js to QML. That is Linux only though, and only after patching your own build of Qt 5.5 (for now).