安卓app,MediaPlayer播放本地音频 | 按钮控制播放和停止

简介: 在Jetpack Compose中,不直接操作原生Android组件如`Button`和`MediaPlayer`,而是使用Compose UI构建器定义界面并结合ViewModel管理音频播放逻辑。以下示例展示如何播放本地音频并用按钮控制播放/停止:创建一个`AudioPlayerViewModel`管理`MediaPlayer`实例和播放状态,然后在Compose UI中使用`Button`根据`isPlaying`状态控制播放。记得在`MainActivity`设置Compose UI,并处理相关依赖和权限。

本文讨论内容基于 Jetpack Compose 框架



在Jetpack Compose中,我们通常不会直接操作Android的原生组件(如ButtonMediaPlayer),而是会利用Compose的UI构建器来定义UI,并可能使用ViewModel和Lifecycle等组件来管理音频播放的逻辑。

以下是一个简单的例子,展示了如何在Jetpack Compose中使用MediaPlayer来播放本地音频,并使用按钮来控制播放和停止。

首先,你需要在你的项目中添加一个ViewModel来管理MediaPlayer的实例和播放状态。


viewModel

import android.content.Context  
import android.media.MediaPlayer  
import androidx.lifecycle.MutableLiveData  
import androidx.lifecycle.ViewModel  
  
class AudioPlayerViewModel : ViewModel() {  
    private var mediaPlayer: MediaPlayer? = null  
  
    // 播放状态  
    val isPlaying = MutableLiveData<Boolean>(false)  
  
    // 初始化MediaPlayer并准备播放  
    fun initPlayer(context: Context, audioResourceId: Int) {  
        mediaPlayer = MediaPlayer.create(context, audioResourceId)  
        mediaPlayer?.setOnPreparedListener {  
            isPlaying.value = false  
        }  
    }  
  
    // 播放音频  
    fun play() {  
        mediaPlayer?.start()  
        isPlaying.value = true  
    }  
  
    // 暂停音频  
    fun pause() {  
        mediaPlayer?.pause()  
        isPlaying.value = false  
    }  
  
    // 停止并释放MediaPlayer  
    fun stopAndRelease() {  
        mediaPlayer?.stop()  
        mediaPlayer?.release()  
        mediaPlayer = null  
        isPlaying.value = false  
    }  
  
    // 检查是否正在播放  
    fun isCurrentlyPlaying(): Boolean {  
        return mediaPlayer?.isPlaying ?: false  
    }  
}



Compose UI

接下来,在你的Compose UI中,你可以使用Button组件来控制播放和停止,并使用Observer来观察播放状态


import android.content.Context  
import androidx.activity.ComponentActivity  
import androidx.activity.compose.setContent  
import androidx.compose.foundation.layout.*  
import androidx.compose.runtime.*  
import androidx.compose.ui.Modifier  
import androidx.compose.ui.tooling.preview.Preview  
import androidx.lifecycle.ViewModelProvider  
import androidx.lifecycle.viewmodel.compose.viewModel  
import com.google.accompanist.insets.navigationBarsPadding  
import com.google.accompanist.insets.statusBarsPadding  
  
@Composable  
fun AudioPlayerScreen(context: Context) {  
    val viewModel: AudioPlayerViewModel = viewModel()  
  
    viewModel.initPlayer(context, R.raw.your_audio_file) // 替换为你的音频文件资源ID  
  
    BoxWithConstraints(  
        modifier = Modifier  
            .fillMaxSize()  
            .statusBarsPadding()  
            .navigationBarsPadding()  
    ) {  
        Column(  
            modifier = Modifier  
                .fillMaxSize()  
                .padding(16.dp),  
            verticalArrangement = Arrangement.Center,  
            horizontalAlignment = Alignment.CenterHorizontally  
        ) {  
            Button(  
                onClick = {  
                    if (viewModel.isCurrentlyPlaying()) {  
                        viewModel.pause()  
                    } else {  
                        viewModel.play()  
                    }  
                }  
            ) {  
                Text(  
                    if (viewModel.isPlaying.value == true) "Pause" else "Play",  
                    style = MaterialTheme.typography.button  
                )  
            }  
  
            // 这里可以添加更多UI元素,如播放进度条等  
        }  
    }  
  
    // 清理MediaPlayer资源  
    DisposableEffect(Unit) {  
        onDispose {  
            viewModel.stopAndRelease()  
        }  
    }  
}  
  
@Preview(showBackground = true)  
@Composable  
fun DefaultPreview() {  
    AudioPlayerScreen(LocalContext.current)  
}  
  
// 在你的Activity中设置Compose UI  
class MainActivity : ComponentActivity() {  
    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)  
        setContent {  
            AudioPlayerScreen(this)  
        }  
    }  
}


请注意,上述代码中的R.raw.your_audio_file需要替换为你的音频文件在资源目录中的ID。同时,你还需要在build.gradle文件中添加对Jetpack Compose和Accompanist(用于处理窗口内边距)的依赖。

确保你的应用有适当的权限来访问和播放音频文件。如果你的音频文件在外部存储上,你可能还需要处理运行时权限请求。







在Jetpack Compose中集成MediaPlayer以播放本地音频,并使用按钮来控制播放和停止的过程,涉及到几个关键点:状态管理、生命周期感知以及与Compose UI的交互。下面是一个示例代码片段,展示了如何在Jetpack Compose中实现这些功能。

首先,你需要在你的build.gradle文件中添加androidx.media:media依赖项,以便使用MediaPlayer



dependencies {
    implementation 'androidx.media:media:1.4.3'
}



接下来,使用下面的Composable函数来创建UI和逻辑:



import android.media.MediaPlayer
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import kotlinx.coroutines.delay

@Composable
fun MediaPlayerDemo() {
    var mediaPlayer by remember { mutableStateOf<MediaPlayer?>(null) }
    var isPlaying by remember { mutableStateOf(false) }

    LaunchedEffect(key1 = true) {
        mediaPlayer = MediaPlayer.create(LocalContext.current, R.raw.your_audio_file)
        mediaPlayer?.setOnCompletionListener {
            isPlaying = false
        }
    }

    Column(modifier = Modifier.fillMaxSize()) {
        Button(
            onClick = {
                if (!isPlaying && mediaPlayer != null) {
                    mediaPlayer?.start()
                    isPlaying = true
                }
            },
            enabled = !isPlaying
        ) {
            Text(text = "Play")
        }
        Button(
            onClick = {
                if (isPlaying && mediaPlayer != null) {
                    mediaPlayer?.pause()
                    isPlaying = false
                }
            },
            enabled = isPlaying
        ) {
            Text(text = "Stop")
        }
    }
}


在这段代码中,我们使用remember来保持MediaPlayerisPlaying状态。LaunchedEffect用于初始化MediaPlayer,并设置一个完成监听器,以便在音频播放完毕时停止播放状态。

两个Button分别用于控制播放和停止。onClick回调根据当前的播放状态来决定是否应该开始播放或暂停播放。

请确保替换R.raw.your_audio_file为你自己的音频资源ID。此外,由于LocalContext.current在Compose中可能不总是返回正确的上下文,你可能需要根据你的具体需求调整获取上下文的方式,例如从ViewModel或Application中获取。

这段代码提供了一个基本的框架,你可以在此基础上添加错误处理、更复杂的UI元素,或者根据应用的需求进行扩展。



相关文章
|
8月前
|
存储 消息中间件 人工智能
【03】AI辅助编程完整的安卓二次商业实战-本地构建运行并且调试-二次开发改注册登陆按钮颜色以及整体资源结构熟悉-优雅草伊凡
【03】AI辅助编程完整的安卓二次商业实战-本地构建运行并且调试-二次开发改注册登陆按钮颜色以及整体资源结构熟悉-优雅草伊凡
277 3
|
8月前
|
存储 消息中间件 人工智能
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
257 11
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
|
11月前
|
安全 Java Android开发
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
473 0
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
|
安全 Java Android开发
安卓开发中的新趋势:Kotlin与Jetpack的完美结合
【6月更文挑战第20天】在不断进化的移动应用开发领域,Android平台以其开放性和灵活性赢得了全球开发者的青睐。然而,随着技术的迭代,传统Java语言在Android开发中逐渐显露出局限性。Kotlin,一种现代的静态类型编程语言,以其简洁、安全和高效的特性成为了Android开发中的新宠。同时,Jetpack作为一套支持库、工具和指南,旨在帮助开发者更快地打造优秀的Android应用。本文将探讨Kotlin与Jetpack如何共同推动Android开发进入一个新的时代,以及这对开发者意味着什么。
273 5
|
开发工具
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
阿里云点播服务web播放器sdk,短剧视频类App实现参考。仿抖音 仿陌陌 短视频 无限滑动播放 视频流。无uniapp video 原生组件的层级、遮挡、覆盖问题,适合与不同功能视图组合使用,实现丰富的应用功能。
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
|
安全 Java Android开发
探索安卓应用开发的新趋势:Kotlin和Jetpack Compose
在安卓应用开发领域,随着技术的不断进步,新的编程语言和框架层出不穷。Kotlin作为一种现代的编程语言,因其简洁性和高效性正逐渐取代Java成为安卓开发的首选语言。同时,Jetpack Compose作为一个新的UI工具包,提供了一种声明式的UI设计方法,使得界面编写更加直观和灵活。本文将深入探讨Kotlin和Jetpack Compose的特点、优势以及如何结合使用它们来构建现代化的安卓应用。
619 11
|
存储 移动开发 Android开发
使用kotlin Jetpack Compose框架开发安卓app, webview中h5如何访问手机存储上传文件
在Kotlin和Jetpack Compose中,集成WebView以支持HTML5页面访问手机存储及上传音频文件涉及关键步骤:1) 添加`READ_EXTERNAL_STORAGE`和`WRITE_EXTERNAL_STORAGE`权限,考虑Android 11的分区存储;2) 配置WebView允许JavaScript和文件访问,启用`javaScriptEnabled`、`allowFileAccess`等设置;3) HTML5页面使用`<input type="file">`让用户选择文件,利用File API;
|
安全 JavaScript 前端开发
kotlin开发安卓app,JetPack Compose框架,给webview新增一个按钮,点击刷新网页
在Kotlin中开发Android应用,使用Jetpack Compose框架时,可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角,点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要:
深入了解 Jetpack Compose 中的 Modifier
深入了解 Jetpack Compose 中的 Modifier
591 0
|
Android开发
Jetpack Compose: Hello Android
Jetpack Compose: Hello Android
427 0

热门文章

最新文章