Over a million developers have joined DZone.

Making a Very Small MP3 Player With QML

How you create your own music player with just a few lines of code

· IoT Zone

Access the survey results 'State of Industrial Internet Application Development' to learn about latest challenges, trends and opportunities with Industrial IoT, brought to you in partnership with GE Digital.

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) {
                playing = false
            } else {
                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 onpublicdomain4u, 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 thefile 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).

The IoT Zone is brought to you in partnership with GE Digital.  Discover how IoT developers are using Predix to disrupt traditional industrial development models.


Published at DZone with permission of Paul Hammant, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}