examples/QtQuick/qmlaudioplayer/qml/qmlaudioplayer/main.qml

import QtQuick 1.0
import QtMultimediaKit 1.1
import SampleFileBrowser 1.0

ApplicationWindow{
    id:main

    // Variables to find the current status and volume of the audio.
    property int statusPos
    property int volumePos
    width: 360
    height: 640
    statusPos: (playMusic.duration - playMusic.position)/1000
    volumePos: (playMusic.volume)*100

    Text{

        // Display the remaining duration of the audio loaded in seconds.
        id:statusMusic
        text: "Duration:"+ parent.statusPos + "sec"
        width: 150
        height: 50
        elide: Text.ElideRight
        wrapMode: Text.WrapAnywhere
    }

    Text{

        // Display the volume level of the music.
        id:volumeMusic
        text: "Volume:" + parent.volumePos + "%"
        width: 150
        height: 50
        anchors.left: statusMusic.right
    }

    // File browser component to load the supported audio files.
    MyFileBrowser{id:browseFile}

    Image{

        // Browse icon, which open the file dialog when clicked.
        id:browse
        source: "browse.png"
        anchors.top: statusMusic.bottom
        width: 300
        height:300
        MouseArea {
            anchors.fill: parent
            onClicked:  {
                browseFile.openDialog();
            }
        }
    }

    Slider{

        // Position of the playing audio is shown by the position of moving slider.
        id:statusSlider
        anchors { bottom: browse.bottom; left: browse.left
            right: browse.right;
            //leftMargin: 20; rightMargin: 20
            //bottomMargin: 10
        }
    }


    Rectangle{

        // A volume icon, and a slider to control the audio volume.
        id:volumeContainer
        anchors.top: parent.width < parent.height ? statusSlider.bottom : statusMusic.bottom
        anchors.left: parent.width < parent.height ? parent.left : browse.right
        height: 50
        width: 230


        Image{
            id:volumeIcon
            source: "mute.png"
            width: 80
            height:parent
        }

        Slider{

            // Volume slider to control the audio volume.
            anchors.left: volumeIcon.right
            y:28
            id:volumeSlider
            width:150
        }
    }

    // Audio player component.
    Audio { id: playMusic; source: "music.wav";
            volume: volumeSlider.position/(volumeSlider.width - 32)
    }

    // Exit button, to exit the application.
    Image{
        id:exitButton
        anchors.right: parent.right
        anchors.top: parent.top
        source: "exit.png"
        MouseArea {
            anchors.fill: parent
            onPressed:  { Qt.quit() }
        }
    }

    // Options to play, pause and stop music.
    Row{
        id:musicOptions
        anchors.left: parent.width < parent.height ? parent.left : browse.right
        anchors.bottom: parent.bottom
        Image{
            id: playOption
            property bool playing
            source: "play.png"
            playing:false
            MouseArea {
                anchors.fill: parent
                onClicked:  {
                    if(!parent.playing){
                        playMusic.play();
                        parent.source = "pause.png";
                        parent.playing = true;
                        return;
                    }
                    else{
                        playMusic.pause();
                        parent.source = "play.png";
                        parent.playing = false;
                        return;
                    }

                }
            }

        }

        Image{
            id:stopOption
            source: "stop.png"
            MouseArea {
                anchors.fill: parent
                onPressed:  {
                    playMusic.stop();
                    playOption.source = "play.png";
                }
            }

        }
    }

    // Connections to change the position of status slider according to the position of the audio.
    Connections {
        target: playMusic
        onPositionChanged: {
            statusSlider.position = playMusic.position * (statusSlider.width -32)/playMusic.duration;
        }
    }

    // Connections to update position of the audio according to the position of the status slider.
    Connections {
        target: statusSlider
        onSliderMoved: {
            playMusic.position = statusSlider.position*(playMusic.duration)/(statusSlider.width - 32);
        }
    }

    // Connections to change the volume icon according to the audio volume.
    Connections {
        target: volumeSlider
        onSliderMoved: {
            if(main.volumePos == 0)
                volumeIcon.source = "mute.png"
            else
                volumeIcon.source = "volume.png"
        }
    }

    // Connections to load a new audio source file, which is selected using file browser component.
    Connections {
        target: browseFile
        onFileSelected: {
            playMusic.source = newSourceFile;
        }
    }
}

---