音乐播放器2.0版--QT动画制作（二十）

alltolove

效果：


功能增加了播放进度和音量调节，再往后的3.0版更新我不想做了，其实还可以有很多功能，比如多曲播放和现实时间长度，这都没什么难度，希望有志人士能继续研究。
还有视频播放器也跟这个原理差不多，我以后就不讲了
main.qml文件：

import QtQuick 2.5
import QtQuick.Controls 1.3
import QtQuick.Dialogs 1.0
import QtMultimedia 5.0
ApplicationWindow {
    visible: true
    width: 300
    height: 250
    title: qsTr("Hello World")
    Action{
        id:open
        text:"open"
        onTriggered:fg.open()
    }
 menuBar:MenuBar{
    Menu{
        title: qsTr("File")
        MenuItem{
            action: open
        }
        MenuItem {
                        text: qsTr("Exit")
                        onTriggered: Qt.quit();//退出程序
                    }
    }

 }
 FileDialog{
     id:fg
     onAccepted: main.rect.music.source=fg.fileUrl
 }
    MainForm {
        id:main
        anchors.fill: parent

    }
}

MainForm.ui.qml文件：

import QtQuick 2.5
import QtQuick.Controls 1.3
Rect{
    property alias rect: rect
    id:rect
    anchors.centerIn: parent
}

Rect.qml文件：

import QtQuick 2.0
import QtMultimedia 5.0
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0

Item{
   property alias music:music
    MediaPlayer{
        id:music
        loops:MediaPlayer.Infinite//无限循环播放
        autoPlay: false//自动播放设定为假
    }
Column{
    anchors.centerIn: parent
    spacing: 20
    Row{
        spacing: 20
    Button{
    id:btn
    text:"play"
    style:button
    onClicked: music.play()//开始播放
    }
    Button{
    id:btn1
    text:"pause"
    style: button
    onClicked: music.pause()//暂停播放
    }
    }
    /*播放进度*/
    Slider{id:progress;maximumValue: music.duration}
    Row{
        Text{text:"volume:"}
        Slider{id:s;style:slider;value: maximumValue/2}
    }
}
Text{anchors.bottom: parent.bottom;text:"鱼C工作室制作"}
    property Component button:ButtonStyle{
    background: Rectangle{
        implicitHeight: 70
        implicitWidth: 100
        radius: 5
        border.width: 2
        border.color: "gray"
        /*当控件按下时颜色为灰，否则为白*/
        color:control.pressed?"darkgray":"white"
    }
}
function sound()
{
    music.volume=s.value;
}
function position()
{
    progress.value=music.position;
}
property Component slider: SliderStyle{//给声音大小的滑动条设定样式
    handle:Rectangle{
        width:10
        height: 10
        radius:2
        color: control.pressed?"darkgray":"gray"
    }
}
Connections{//改变声音
    target:s
    onValueChanged: sound()
}
Connections{//让滑动条进度跟随播放进度
    target:music
    onPositionChanged:position()
}
Connections{//滑条手动拖动时，播放进度跟着改变
    target:progress
    onValueChanged:music.seek(progress.value)
}
}

Preview: 明天我们介绍Socket网络通信

不二如是

终于有点播放器的样子了。。。

不二如是

这么快就到socket！！！

alltolove

不二如是 发表于 2017-3-11 09:18
终于有点播放器的样子了。。。

嫌我做的丑吧

不二如是

alltolove 发表于 2017-3-11 10:09
嫌我做的丑吧

至少有播放键了，，，

alltolove

不二如是 发表于 2017-3-11 09:19
这么快就到socket！！！

我是讲QML模式下的，不是QWiget网络编程，QWiget其它没讲完的你还是继续讲吧

wei_Y

一直有个问题，怎么知道QML的版本是多少。

alltolove

wei_Y 发表于 2017-3-11 14:17
一直有个问题，怎么知道QML的版本是多少。

应该就是QT的版本吧

wei_Y

alltolove 发表于 2017-3-11 14:54
应该就是QT的版本吧

额，我是说QtQuick这类在导入时怎么确定他的版本。。