Android Academy · Pelajaran

Memutar Audio dan Video

Pemutaran media sederhana di Android.

Pelajaran 4 dari 413 langkah

Memutar Audio dan Video adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.

Melampaui Gambar: Pemutaran Media

Coil menampilkan gambar dengan indah, tetapi aplikasi juga memutar suara dan video: bunyi notifikasi, podcast, klip latar belakang, atau umpan video. Android memiliki API khusus untuk media.

Pustaka modern yang direkomendasikan adalah Media3 (ExoPlayer). Pustaka ini menangani streaming, format, buffering, dan kontrol pemutaran jauh lebih baik daripada MediaPlayer lama. Dalam pelajaran ini, Anda akan memutar audio dan video sederhana di aplikasi Compose.

Menambahkan Dependensi Media3

Media3 dibagi menjadi beberapa modul. Untuk sebagian besar aplikasi, Anda memerlukan media3-exoplayer (mesin pemutar) dan media3-ui (tampilan pemutar siap pakai). Untuk video Compose, Anda juga dapat menggunakan PlayerView melalui AndroidView.

// build.gradle.kts (module level)
dependencies {
    implementation("androidx.media3:media3-exoplayer:1.5.0")
    implementation("androidx.media3:media3-ui:1.5.0")
}

Membuat ExoPlayer

ExoPlayer dibuat dari sebuah Context. Anda memberinya MediaItem (URL atau file lokal), memanggil prepare(), lalu memulai pemutaran. ExoPlayer menjalankan thread-nya sendiri, sehingga UI tidak terblokir.

Yang penting, pemutar menggunakan sumber daya sistem dan harus dirilis; kita akan membahasnya sebentar lagi.

import android.content.Context
import androidx.media3.common.MediaItem
import androidx.media3.exoplayer.ExoPlayer

fun createPlayer(context: Context, url: String): ExoPlayer {
    val player = ExoPlayer.Builder(context).build()
    player.setMediaItem(MediaItem.fromUri(url))
    player.prepare()
    player.playWhenReady = true
    return player
}

Memutar Audio

Untuk pemutaran audio saja, penyiapannya sama; Anda hanya mengarahkan MediaItem ke URL audio (mp3, aac, dan sebagainya). Tidak ada tampilan yang perlu ditampilkan, jadi Anda mengendalikannya melalui objek pemutar: play(), pause(), seekTo().

Ini sudah cukup untuk membuat pemutar podcast atau musik.

import androidx.media3.common.MediaItem
import androidx.media3.exoplayer.ExoPlayer

fun playPodcast(player: ExoPlayer, audioUrl: String) {
    player.setMediaItem(MediaItem.fromUri(audioUrl))
    player.prepare()
    player.play()
}

fun togglePause(player: ExoPlayer) {
    if (player.isPlaying) player.pause() else player.play()
}

Mengingat Pemutar di Compose

Di Compose, Anda sebaiknya membuat pemutar sekali dan mempertahankannya di antara komposisi ulang. Gunakan remember agar pemutar baru tidak dibuat pada setiap komposisi ulang.

Padukan ini dengan pembersihan yang tepat (pada bagian berikutnya) agar sumber daya tidak bocor.

import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.LocalContext
import androidx.media3.common.MediaItem
import androidx.media3.exoplayer.ExoPlayer

@Composable
fun rememberPlayer(url: String): ExoPlayer {
    val context = LocalContext.current
    return remember {
        ExoPlayer.Builder(context).build().apply {
            setMediaItem(MediaItem.fromUri(url))
            prepare()
        }
    }
}

Merilis Pemutar

Pemutar mempertahankan codec, buffer, dan fokus audio tetap aktif. Jika Anda lupa merilisnya, memori akan bocor dan pemutaran mungkin terus berlangsung setelah layar ditutup. Di Compose, DisposableEffect menjalankan pembersihan saat composable keluar dari komposisi.

Selalu panggil player.release() di sana.

import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.media3.exoplayer.ExoPlayer

@Composable
fun ManagedPlayer(player: ExoPlayer) {
    DisposableEffect(player) {
        onDispose {
            player.release()
        }
    }
    // ... use player here
}

Menampilkan Video dengan PlayerView

Media3 menyediakan PlayerView siap pakai dengan kontrol. Compose tidak memiliki composable video bawaan, jadi Anda menyematkan View menggunakan AndroidView dan memasang pemutar.

Dengan begitu, Anda mendapatkan tombol putar/jeda, bilah pencarian, dan layar penuh tanpa perlu membuatnya sendiri.

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.AndroidView
import androidx.media3.exoplayer.ExoPlayer
import androidx.media3.ui.PlayerView

@Composable
fun VideoPlayer(player: ExoPlayer, modifier: Modifier = Modifier) {
    AndroidView(
        factory = { context ->
            PlayerView(context).apply {
                this.player = player
            }
        },
        modifier = modifier
    )
}

Layar Video Lengkap

Mari kita satukan semuanya: buat pemutar, ingat pemutar tersebut, pasang ke PlayerView, lalu rilis saat dibuang. Ini adalah layar video mandiri yang dapat Anda gunakan kembali.

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import androidx.media3.common.MediaItem
import androidx.media3.exoplayer.ExoPlayer
import androidx.media3.ui.PlayerView

@Composable
fun VideoScreen(videoUrl: String) {
    val context = LocalContext.current
    val player = remember {
        ExoPlayer.Builder(context).build().apply {
            setMediaItem(MediaItem.fromUri(videoUrl))
            prepare()
            playWhenReady = true
        }
    }
    DisposableEffect(Unit) { onDispose { player.release() } }

    AndroidView(
        factory = { PlayerView(it).apply { this.player = player } },
        modifier = Modifier.fillMaxWidth().height(220.dp)
    )
}

Melacak Status Pemutaran

Untuk memperbarui UI (ikon putar/jeda atau bilah kemajuan), Anda mendengarkan pemutar dengan Player.Listener. Pemutar melaporkan perubahan status seperti buffering, siap, dan selesai, serta apakah pemutaran sedang aktif.

Tambahkan listener saat layar muncul dan hapus saat dibuang.

import androidx.media3.common.Player
import androidx.media3.exoplayer.ExoPlayer

fun observe(player: ExoPlayer, onPlaying: (Boolean) -> Unit): Player.Listener {
    val listener = object : Player.Listener {
        override fun onIsPlayingChanged(isPlaying: Boolean) {
            onPlaying(isPlaying)
        }
        override fun onPlaybackStateChanged(state: Int) {
            when (state) {
                Player.STATE_BUFFERING -> { /* show spinner */ }
                Player.STATE_READY -> { /* ready */ }
                Player.STATE_ENDED -> { /* finished */ }
            }
        }
    }
    player.addListener(listener)
    return listener
}

Menjeda Saat Aplikasi Berjalan di Latar Belakang

Untuk video sebaris (bukan aplikasi musik), biasanya Anda ingin menjeda video saat pengguna meninggalkan layar dan melanjutkannya saat mereka kembali. Anda dapat menghubungkan pemutaran dengan siklus hidup Compose dengan mengamati Lifecycle dan menjeda pada ON_PAUSE.

Dengan begitu, video tidak diputar saat pengguna tidak dapat melihatnya dan baterai lebih hemat.

import androidx.compose.runtime.*
import androidx.compose.ui.platform.LocalLifecycleOwner
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.LifecycleEventObserver
import androidx.media3.exoplayer.ExoPlayer

@Composable
fun PauseWithLifecycle(player: ExoPlayer) {
    val lifecycleOwner = LocalLifecycleOwner.current
    DisposableEffect(lifecycleOwner) {
        val observer = LifecycleEventObserver { _, event ->
            when (event) {
                Lifecycle.Event.ON_PAUSE -> player.pause()
                Lifecycle.Event.ON_RESUME -> player.play()
                else -> {}
            }
        }
        lifecycleOwner.lifecycle.addObserver(observer)
        onDispose { lifecycleOwner.lifecycle.removeObserver(observer) }
    }
}

Audio Latar Belakang dengan MediaSession

Untuk audio yang harus tetap diputar saat aplikasi berada di latar belakang (musik atau podcast), bungkus pemutaran dalam MediaSessionService. Ini mengintegrasikannya dengan kontrol sistem, layar kunci, dan tombol Bluetooth.

Prosesnya lebih rumit, tetapi gagasan intinya adalah mengekspos pemutar Anda melalui MediaSession.

import androidx.media3.exoplayer.ExoPlayer
import androidx.media3.session.MediaSession
import androidx.media3.session.MediaSessionService

class PlaybackService : MediaSessionService() {
    private var session: MediaSession? = null

    override fun onCreate() {
        super.onCreate()
        val player = ExoPlayer.Builder(this).build()
        session = MediaSession.Builder(this, player).build()
    }

    override fun onGetSession(controllerInfo: MediaSession.ControllerInfo) = session

    override fun onDestroy() {
        session?.run { player.release(); release() }
        session = null
        super.onDestroy()
    }
}

Pemeriksaan Singkat

Dalam layar Compose yang memiliki ExoPlayer, API Compose apa yang harus digunakan untuk merilis pemutar saat layar keluar dari komposisi?

Jawab di pelajaran interaktif

Rangkuman

Anda telah menambahkan pemutaran audio dan video:

Gunakan Media3 ExoPlayer, pengganti modern untuk MediaPlayer.
Buat pemutar, tetapkan MediaItem, panggil prepare(), lalu play().
Di Compose, ingat pemutar dengan remember dan rilis di dalam DisposableEffect melalui onDispose.
Tampilkan video dengan menyematkan PlayerView menggunakan AndroidView.
Lacak status dengan Player.Listener; gunakan MediaSessionService untuk audio latar belakang.

Dengan ini, kursus Pemuatan Gambar & Media dengan Coil telah selesai. Kini Anda dapat memuat gambar dengan lancar dan memutar media dengan cara Android modern.

Gratis untuk memulai

Belajar Kotlin dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 36
Pelajaran: 152

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memutar Audio dan Video” gratis?

Ya — teks lengkap “Memutar Audio dan Video” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Memutar Audio dan Video”?

Pemutaran media sederhana di Android. Kamu berlatih Android Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Android Academy?

Tidak diperlukan pengalaman sebelumnya. Android Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Memutar Audio dan Video” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy