如何在面向Kotlin/Wasm的Compose Multiplatform中播放MP3音频？

直接调用浏览器原生的Audio API是最轻量化的方案，无需依赖第三方库，能避开你遇到的第三方库适配问题，步骤如下：

1. 声明JS互操作的Audio类 #

在Kotlin代码中定义与浏览器Audio对象对应的外部类，实现跨语言调用：

external class Audio(src: String) {
    fun play()
    fun pause()
    fun load()
    var volume: Double
    // 可选：添加播放结束等事件监听
    var onended: (() -> Unit)?
}

2. 在Compose组件中实现播放逻辑 #

用remember缓存Audio实例避免重复创建，配合按钮触发播放/暂停操作：

@Composable
fun Mp3Player() {
    // 本地音频：放在src/jsMain/resources/public目录下，直接写文件名
    // 远程音频：传入完整URL即可
    val audio = remember { Audio("your-audio-file.mp3") }

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize().padding(16.dp)
    ) {
        Button(onClick = { audio.play() }) {
            Text("播放")
        }
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { audio.pause() }) {
            Text("暂停")
        }
    }
}

3. 资源路径注意事项 #

• 本地MP3文件请放在src/jsMain/resources/public目录下，编译后会自动部署到Web应用根路径，直接使用文件名即可访问
• 如果使用远程音频，直接传入完整的HTTP/HTTPS URL，比如Audio("https://example.com/sample.mp3")

可选扩展 #

如果需要监听播放状态（比如播放结束），可以给Audio类添加对应回调属性，示例：

// 扩展Audio类的事件
external class Audio(src: String) {
    fun play()
    fun pause()
    var onended: (() -> Unit)?
}

// 在Compose中使用
@Composable
fun Mp3PlayerWithEndCallback() {
    val audio = remember { Audio("your-audio-file.mp3") }
    LaunchedEffect(Unit) {
        audio.onended = {
            // 播放结束后执行的逻辑，比如打印提示
            println("音频播放完毕")
        }
    }

    // 播放/暂停按钮...
}

内容的提问来源于stack exchange，提问作者AndrazP