![ed5338b1-05cd-43b5-9ea1-b84617115e04.jpg](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6d0045d9c3e54072a820619b371ea2b0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgV2dsbHNz:q75.awebp?rk3s=f64ab15b&x-expires=1758853361&x-signature=2t%2Fw3qJ7Mgld4TAM%2B7g3Yj%2Fc%2BTc%3D) > 循序渐进Kotlin+Compose+Multiplatform跨平台之桌面端实现系列： > > [完整案例:Kotlin+Compose+Multiplatform跨平台之桌面端实现（一）](https://juejin.cn/post/7534386099231572006 "https://juejin.cn/post/7534386099231572006")\ > [完整案例:Kotlin+Compose+Multiplatform跨平台之桌面端实现（二）](https://juejin.cn/spost/7535335090902532136 "https://juejin.cn/spost/7535335090902532136")\ > [完整案例:Kotlin+Compose+Multiplatform之桌面端音乐播放器，数据库使用实现(三）](https://juejin.cn/post/7535672518667239459) **`效果图如下`：** ![20250807221624\_rec\_.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c3cdb0c81c324e1a9437de9600d55b5e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgV2dsbHNz:q75.awebp?rk3s=f64ab15b&x-expires=1758853361&x-signature=SfEBsYN0wiq8vNNAr06EXqxpaJs%3D) ## 一、前言在前面两篇文章已经介绍了项目工程，打包配置，基础相关使用，\ 今天来到`Kotlin+Compose+Multiplatform`之桌面端 * 数据库使用， * 音乐播放器，实现 * 音频动画效果 * LRC歌词展示下面进行详细分解 ## 二、数据库使用在`Kotlin+Compose+Multiplatform`之桌面端上面有很多数据库可以使用，本案例采用介绍的是： // Kotlinx.Serialization implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.0") // SQLite JDBC 驱动 implementation("org.xerial:sqlite-jdbc:3.42.0.0") * ***此方案*** 1. 可以通过Kotlin序列化可直接将数据库查询结果映射为数据类 2. 可以在编译器插件生成序列化代码，避免运行时反射开销 3. 它支持跨平台数据格式转换（如SQLite结果→JSON→UI模型） 4. `SQLite+ JDBC`的组合实现轻量级持久化，嵌入式数据库无需额外服务部署，特别适合桌面端 5. 通过`JDBC`标准接口实现`ACID`事务，兼容所有`Kotlin/JVM平台`(`Mac,Window,linux`) 6. 它与`Compose`状态管理无缝集成，支持协程异步操作 * ***接入配置:*** 1. 在`build.gradle`中添加如下配置： plugins { kotlin("plugin.serialization") version "1.9.0" // Kotlin 序列化插件 } 2\. 在`jvmMain.dependencies {}`加依赖引入模块: jvmMain.dependencies { // Kotlinx.Serialization implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.0") // SQLite JDBC 驱动 implementation("org.xerial:sqlite-jdbc:3.42.0.0") } * ***具体使用：*** 1. 创建数据库获取到连接`connection`： private val dbName = "music.db" private val connection: Connection by lazy { val dbPath = DatabaseUtils.getDatabasePath(dbName) DriverManager.getConnection("jdbc:sqlite:$dbPath") } 2\. 创建表结构：通 `connection.createStatement().executeUpdate`直接可以执行创建表的sql语句 private fun createTable() { connection.createStatement().executeUpdate( """ CREATE TABLE IF NOT EXISTS play_list ( id INTEGER PRIMARY KEY AUTOINCREMENT, musicID TEXT NOT NULL, name TEXT NOT NULL, singer TEXT NOT NULL, pic TEXT NOT NULL, url TEXT NOT NULL, lrc TEXT NOT NULL, musicSuffer TEXT NOT NULL, localFile INTEGER CHECK (localFile IN (0, 1)) ) """ ) } 3\. 插入一条数据如下：（*`注意：`？`的顺序是从1开始依次往后连续加上去的`*） //插入播放列表 fun inserPlayItem(user: MusicItem): Int { val sql = "INSERT INTO play_list (musicID, name, singer, pic, url, lrc, musicSuffer,localFile) VALUES (?, ?, ?, ?, ?, ?, ?, ?)" val statement = connection.prepareStatement(sql) statement.setString(1, user.musicID) statement.setString(2, user.name) statement.setString(3, user.singer) statement.setString(4, user.pic) statement.setString(5, user.url) statement.setString(6, user.lrc) statement.setString(7, user.musicSuffer) statement.setBoolean(8, user.localFile) statement.executeUpdate() return statement.generatedKeys.getInt(1) // 返回生成的 ID } 4\. 从表中查询数据转化成实体列表： //查询播放列表 fun getAllPlayList(): List { val list = mutableListOf() val resultSet = connection.createStatement().executeQuery("SELECT * FROM play_list ORDER BY id ASC") while (resultSet.next()) { list.add( MusicItem( resultSet.getString("musicID"), resultSet.getString("name"), resultSet.getString("singer"), resultSet.getString("pic"), resultSet.getString("url"), resultSet.getString("lrc"), resultSet.getString("musicSuffer"), resultSet.getBoolean("localFile"), resultSet.getInt("id") ) ) } return list } 5\. 操作数据库相关删除： //删除播放列表，删除表结构 fun dropTable(): Int { val statement = connection.createStatement() // 执行删除表操作 statement.executeUpdate("DROP TABLE IF EXISTS play_list") statement.close() return 1 } //删除整个播放列表中数据 fun delList(): Int { val statement = connection.createStatement() // 执行清空操作 statement.executeUpdate("DELETE FROM play_list") statement.close() return 1 } //通过musicID 删除指定数据 fun delItemByID(musicID: String): Int { val statement = connection.prepareStatement( "DELETE FROM play_list WHERE musicID = ?" ).apply { setString(1, musicID) } val deletedRows = statement.executeUpdate() statement.close() return 1 } 6\. 对数据库中某条数据进行修改如下： // 更新指定的字段值 fun updateField(musicID: String): Int { val sql = "UPDATE play_list SET localFile = ? WHERE musicID = ?" val statement = connection.prepareStatement(sql).apply { setInt(1, 1) setString(2, musicID) executeUpdate() } statement.close() return 1 } ## 三、音乐播放器在`Kotlin+Compose+Multiplatform`之桌面端上面有比较流行的方案：`ComposeMultiplatformMediaPlaye`r方案，它是采用采用跨平台媒体播放库，支持`Windows/macOS/Linux`三端统一开发，核心集成VLC引擎实现硬件加速解码，但是它要电脑安装好VLC环境配置，比如：`Windows要安装` - `VLC官方播放器 `，所以本案例不采用它，我们采用它\ 而是采用，电脑无需额外安装任何配置的，JavaFX提供开箱即用的`Media`/`MediaPlaye`即：`org.openjfx:javafx`， * ***它具备以下优势：*** 1. 原生支持`MP3/WAV/AAC`等主流音频格式的解码播放，无需额外依赖第三方解码库 2. 通过`DirectX（Windows）/CoreAudio（macOS）`等原生图形接口实现硬件级音频加速，显著降低CPU占用率 3. 支持一套代码无缝运行于`Windows/macOS/Linux`，自动适配各平台音频驱动（如`Windows WASAPI、Linux ALSA`）开发者无需处理平台差异逻辑 4. 它从`JDK11`起采用模块化设计，通过`javafx-media`模块精准控制依赖，应用打包体积`比传统方案减少40%+` * ***接入相关配置：*** 1. 在`build.gradle`中添加如下配置： ``` plugins { id("org.openjfx.javafxplugin") version "0.1.0" } javafx { version = "20.0.2" modules = listOf("javafx.media", "javafx.graphics", "javafx-swing") } ``` 2. 在`jvmMain.dependencies {}`内添加实现播放器的相关依赖,如下： jvmMain.dependencies { val javafxPlatform = System.getProperty("os.name").lowercase().let { when { it.contains("linux") -> "linux" it.contains("mac") -> "mac" else -> "win" } } implementation("org.openjfx:javafx-base:20.0.2:$javafxPlatform") { exclude(group = "org.openjfx", module = "javafx-base") } // 必须的基础模块 implementation("org.openjfx:javafx-media:20.0.2:$javafxPlatform") { exclude(group = "org.openjfx", module = "javafx-media") } implementation("org.openjfx:javafx-graphics:20.0.2:$javafxPlatform") { exclude(group = "org.openjfx", module = "javafx-graphics") } implementation("org.openjfx:javafx-swing:20.0.2:$javafxPlatform") { exclude(group = "org.openjfx", module = "javafx-swing") } } * ***使用步骤和相关API：*** 1. 提前初始化 `Platform.startup { }` 2. 播放加载音乐如下示代码：需要注意的是必须在主线程调用该方法：即，下面的代码必须包在 `Platform.runLater{ }`内部或者 `SwingUtilities.invokeLater { }` 的内部，否则会抛出`IllegalStateException` val media = Media(cacheFile.toURI().toString()) mediaPlayer = MediaPlayer(media).apply { setOnReady { play() } } 3\. 音乐 **`播放暂停，停止，是否正在播放`** 如下操作： //提供是否正在播放 fun isPlaying() = mediaPlayer?.status == MediaPlayer.Status.PLAYING //提供暂停播放方法 fun pause() = mediaPlayer?.pause() //提供停止播放方法 fun stop() = mediaPlayer?.stop() 4\. 播放 **`前一首，下一首`** :主要是通过播放列表的当前索引切换：`position + 1` 后获得的播放资源重新播放即播放下一首，`position - 1`后获得的播放资源重新播放即播放上一首。 5\. 获取播放的当前时间：`val time = mediaPlayer?.currentTime?.toSeconds()?.toLong() ?: 0L` 6. 获取播放总时长：\` fun totalDuration(): Long = mediaPlayer?.totalDuration?.toSeconds()?.toLong() ?: 0L 7. 根据当前时间和总时长，可以计算出播放进度。 8. 拖动UI进度条seekTo,需要计算出拖动后的时间然后直接调用：`mediaPlayer?.seek(Duration.seconds(seconds))` 9. 播放文件缓存配置：需要手动设置 val cacheFile = if (!localFile) { File(PlatformKVStore.getDownloadDir(), downloadFileName).apply { DownLoadUtils.instance.WXDownload2(playItem.url, this@apply) } } else { println("zou huan cun ") File(PlatformKVStore.getDownloadDir(), downloadFileName) } val media = Media(cacheFile.toURI().toString()) ## 四、音频动画效果本案例播放器音频动画效果：主要包含2个： 1. 专辑封面转圈图片， 2. 从播放器那边拿到的实时动态数据绘制条形变化，和转圈外围颜色条纹： * ***从播放器里面拿到音频数据：*** 1. 设置获取音频数据配置：在JavaFX媒体框架中，`audioSpectrumInterval`、`audioSpectrumNumBands`和`audioSpectrumThreshold`是用于控制音频频谱分析的核心参数，其中： **`audioSpectrumInterval`** 控制频谱数据更新的时间间隔（秒），默认值为0.1秒。较短的间隔可实现更实时的频谱反馈，但会增加CPU负载。**`audioSpectrumNumBands`** 指定频谱分析的频段数量，默认128个频段。增加频段数可提高频谱分辨率，但会提升计算复杂度。**`audioSpectrumThreshold`** 设置频谱灵敏度阈值（dB），默认-60dB。低于该阈值的音频信号将被过滤，避免显示噪声干扰。\ 本案例配置如下： MediaPlayer(media).apply { audioSpectrumInterval = 0.03 audioSpectrumNumBands = 320 audioSpectrumThreshold = -60 //监听频谱数据 audioSpectrumListener = AudioSpectrumListener { _, _, magnitudes, phases -> //magnitudes 就是频谱数据，FloatArray类型 } 2\. Compose UI 部分，通过`.graphicsLayer { rotationZ}` 修改`rotationZ`的值来选择封面图片 AsyncImage( model = picUrl, contentDescription = "唱片 Network Image", modifier = Modifier.padding(20.dp, 0.dp, 0.dp, 80.dp).size(300.dp).clip(CircleShape).border( width = 45.dp, color = Color.Black, shape = CircleShape ).padding(45.dp).graphicsLayer { rotationZ = viewModel.sheetDiskRotate.value }, contentScale = ContentScale.Crop ) 3\. 通过`Compose` 的 `Canvas` 来绘频谱数据，这个没什么难度。如下：`条形频谱和圆圈周围动态频谱` ``` //条形动态频谱 @Composable fun AudioVisualizer(viewModel: PlayerViewModel) { var canvasWidth by remember { mutableFloatStateOf(0f) } val spectrumData by viewModel.spectrumDataFlow.collectAsState() Canvas(modifier = Modifier.padding(10.dp, 430.dp, 0.dp, 0.dp).width(300.dp).onSizeChanged { canvasWidth = it.width.toFloat() }) { if (spectrumData.isNotEmpty()) { drawRect(Color.Transparent) val barWidth = canvasWidth / spectrumData.size spectrumData.forEachIndexed { i, value -> // val newValue = value //if (value == -60.0f) randomInRange(-60f, -45f) else value val newValue = if (value == -60.0f) randomInRange(-60f, -45f) else value val height = (newValue + 60) * 3f // 标准化幅度值 val newIndex = i //if (i > haftSize) (i + haftSize) % dataSize else i + haftSize drawRect( color = Color.hsv(newIndex * 360f / spectrumData.size, 1f, 1f), topLeft = Offset(newIndex * barWidth, size.height - height), size = Size(barWidth * 0.8f, height) ) } } } } //圆圈周围动态频谱 @Composable fun CircularAudioVisualizer(viewModel: PlayerViewModel) { var center by remember { mutableStateOf(Offset.Zero) } var baseRadius by remember { mutableStateOf(0f) } val spectrumData by viewModel.spectrumDataFlow.collectAsState() Canvas(modifier = Modifier.padding(20.dp, 0.dp, 0.dp, 80.dp).size(280.dp).onSizeChanged { center = Offset(it.width.toFloat() / 2, it.height.toFloat() / 2) baseRadius = min(it.width, it.height) * 0.55f }) { if (spectrumData.isNotEmpty()) { drawCircle(Color.Transparent, baseRadius, center, style = Stroke(2f)) val angleStep = 2f * PI / spectrumData.size spectrumData.forEachIndexed { i, value -> val newValue = value //if (value == -60.0f) randomInRange(-60f, -46f) else value val normalized = newValue * 2 / 60f val spikeLength = baseRadius * 0.08f * normalized val angle = i * angleStep val startX = center.x + baseRadius * cos(angle).toFloat() val startY = center.y + baseRadius * sin(angle).toFloat() val endX = startX + spikeLength * cos(angle).toFloat() val endY = startY + spikeLength * sin(angle).toFloat() drawLine( color = Color.hsv(i * 360f / spectrumData.size, 1f, 1f), start = Offset(startX, startY), end = Offset(endX, endY), strokeWidth = 6f ) drawCircle( color = Color.hsv(i * 360f / spectrumData.size, 1f, 1f), radius = 4f, center = Offset(endX, endY) ) } } } } ``` ## 五、LRC歌词展示 LRC歌词展示中：这个没什么难度，使用Compose 的 `LazyColumn`展示歌词的每一行，获取到播放器当前播放时间，与解析LRC歌词头部时间进行对比，返回 `LazyColumn`中列表的位置索引，然后根据索引对当前歌词行文字颜色，大小进行设置，详细请看项目地址源码： ## 六、总结本篇是完整案例:`Kotlin + Compose + Multiplatform`之桌面端实现的第三篇，\ 主要介绍了： 1. 数据库使用， 2. 音乐播放器，实现 3. 音频动画效果 4. LRC歌词展示相信会给你带来一定帮助。 #### ***`后续还有：`*** 1. 视频播放介绍 2. 桌面端插件化 3. 跨端到 `移动端，桌面端，web端`的公用研究。 #### [源码地址](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fwgllss%2FKotlin_Compose_Multiplatform_Demo "https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fwgllss%2FKotlin_Compose_Multiplatform_Demo") ## 感谢阅读： #### 欢迎用你发财的小手关注，点赞、收藏 #### 这里你会学到不一样的东西