论坛 › Qt交流 › 音乐播放器2.0版--QT动画制作（二十）

alltolove 发表于 2017-3-11 09:04:16

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

效果：


功能增加了播放进度和音量调节，再往后的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网络通信

不二如是 发表于 2017-3-11 09:18:59

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

不二如是 发表于 2017-3-11 09:19:24

这么快就到socket！！！

alltolove 发表于 2017-3-11 10:09:40

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

嫌我做的丑吧{:5_107:}

不二如是 发表于 2017-3-11 10:19:32

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

至少有播放键了，，，{:10_266:}

alltolove 发表于 2017-3-11 12:41:30

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

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

wei_Y 发表于 2017-3-11 14:17:47

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

alltolove 发表于 2017-3-11 14:54:12

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

应该就是QT的版本吧

wei_Y 发表于 2017-3-11 16:03:52

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

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

查看完整版本: 音乐播放器2.0版--QT动画制作（二十）