QT音乐播放器13----歌词内容解析、歌词滚动效果、本地音乐页面

2301_80668528

944人浏览 · 2025-10-25 20:37:43

2301_80668528 · 2025-10-25 20:37:43 发布

简介：

基于QT5.12版本的Quick QML项目----恋羽音乐播放器（爆肝中......）

上一讲链接：https://blog.csdn.net/2301_80668528/article/details/153560295

下一讲链接：https://blog.csdn.net/2301_80668528/article/details/153884436?fromshare=blogdetail&sharetype=blogdetail&sharerId=153884436&sharerefer=PC&sharesource=2301_80668528&sharefrom=from_link

上一讲效果：

音乐播放效果⑥

ps：如有错误，欢迎指出^\/^

原视频出处：https://b23.tv/gFnMsLg

一、歌词内容解析

1.请求歌词

（1）歌词获取方式：在https://neteasecloudmusicapi.js.org/中查询获取方式：

（2）在LayoutBottomView.qml文件中添加getLyric()函数接口

（3）在getCover()函数接口的onReply()中调用

Ctrl+R运行，随机点击一首歌曲进行播放，输出栏显示了歌词：

2.解析歌词

（1）用replace()的正则表达式将下图所示的所有歌词所在时间点给替换掉

（2）提取时间信息

（3）添加变量--歌词列表

进入PageDetailView.wml文件，新增变量lyricsList：

赋予MusicLyricView组件id ：

用lyrics获取lyricView中的歌词：lyrics

(4)在getLyric()函数中将lyrics赋值给lyricList：

Ctrl+R运行，随机播放一首音乐，并进入音乐详情页面：

滚动鼠标滚轮，发现歌词正常显示：

歌词效果①

二、歌词滚动效果

1.用新变量暴露出PageDetailView的current

在PageDetailView.qml中添加新变量current：

2.添加歌词对应时长变量--times

在main.qml的MediaPlayer组件中添加（75行）：

2.在getLyric()函数中调用

进入LayoutBottomView.qml文件的接口函数中：

3.在onPositionChanged:{}中调用

回到main.qml的MediaPlayer组件中：

Ctrl+R运行，发现歌词随时间滚动，且当鼠标滚轮滚动歌词移位后不久也会自动回到当前播放位置：

歌词效果②

三、本地音乐页面

1.本地音乐页面布局

进入DetialLocalPageView.qml文件：

此页面中我们将本地音乐划分成顶部三个按键（添加本地音乐、刷新纪录、清空记录）区域与下方本地音乐列表区：

（1）按键组与音乐列表列布局：

（2）新建组件--“MusicTextButton”：

复制粘贴一份MusicIconBotton，重命名为“MusicTextButton”：

（3）设置MusicTextButton属性：

删除icon部分设置：

添加按键文本变量：btnText

设置默认文本：

设置选中属性：

设置高宽：

删除气泡提示框：

添加背景其他属性：

设置字体：

整体代码：

/************ 本地音乐页面下：顶部按键 ************/
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3  //布局

Button
{
    property alias btnText: self.text   //按键文本
    property alias isCheckable: self.checkable    //不可被选中
    property alias isChecked:  self.checked       //是否被选中
    property alias btnWidth: self.width           //宽度
    property alias btnHeight: self.height         //高度

    /* 赋值 */
    id: self        //按键id

    text: "Button"  //默认文本
    font.family: window.mFONT_FAMILY
    font.pointSize: 10

    background: Rectangle
    {
        implicitHeight: self.height
        implicitWidth: self.width
        //按下按键(true)--赋予颜色#497563
        //未按下按键（false）--赋予颜色#20e9f4ff
        color: self.down || (self.Checkable && self.checked) ? "#e2f0f8" : "#70e9f4ff"
        radius: 3       //圆角
    }

    width: 35
    height: 35
    checkable: false
    checked: false

}

（4）在本地音乐页面布局的按键组RowLayout中调用MusicTextButton：

/* 上方按键组 */
    RowLayout
    {
        height: 70
        Item        //按键组左边间距，防止顶格
        {
            width: 5
        }

        /* 按键：添加本地音乐 */
        MusicTextButton
        {
            btnText: "添加本地音乐"
            btnHeight: 35
            btnWidth: 150
            onClicked:
            {

            }
        }

        /* 按键：刷新记录 */
        MusicTextButton
        {
            btnText: "刷新记录"
            btnHeight: 35
            btnWidth: 100
            onClicked:
            {

            }
        }

        /* 按键：清空记录 */
        MusicTextButton
        {
            btnText: "清空记录"
            btnHeight: 35
            btnWidth: 100
            onClicked:
            {

            }
        }
    }

Ctrl+R运行：

2.添加本地音乐

添加本地音乐时设计流程为：

点击“添加本地音乐”按键-->弹出对话框-->从本地选择音乐-->添加音乐

（1）设计弹出的对话框

对话框需要用到FileDialog组件：

添加包含此组件的模块：

import Qt.labs.platform 1.0

添加FileDialog组件：

/* 按下按键“添加本地音乐”后弹出的对话框” */
    FileDialog
    {
        id: fielDialog
        fileMode: FileDialog.OpenFiles                                          //文件操作方式：打开多个文件
        nameFilters: ["MP3 Music Files(*.mp3)", "FLAC Music Files(*.flac)"]     //被打开文件的格式
        folder: StandardPaths.standardLocations(StandardPaths.MusicLocation)[0] //默认路径
        acceptLabel: "确定"
        rejectLabel: "取消"

        onAccepted:
        {
            var list = []
            for(var index in files)     //遍历
            {
                var path = files[index]
                /* 按照“/”分割path */
                var arr = path.split("/")
                var fileNameArr = arr[arr.length -1].split(".")
                /* 删除末尾的元素（文件后缀名） */
                fileNameArr.pop()
                var fileName = fileNameArr.join(".")   //排除歌名/歌手的名称中带有“.”的情况，如G.E.M邓紫棋

                //默认歌曲文件格式：“歌名-歌手.mp3”
                var nameArr = fileName.split("-")
                var name = "恋羽音乐"
                var artist = "小鱼儿"
                if(nameArr.length > 1)
                {
                    artist = nameArr[0]     //“歌手”
                    nameArr.shift()         //删除第一个元素(歌手)
                }
                name = nameArr.join("-")    //“歌名-”
                /* 在列表中插入元素 */
                list.push({
                              id: path + "",
                              name,artist,
                              url:path + "",
                              album: "本地音乐",
                              type: "1"         //1：本地音乐，0：网络
                          })
                localListView.musicList = list  //赋值
            }

        }
    }

（2）调用FileDialog组件：