Android Academy · Lektion

Spela upp ljud och video

Enkel medieuppspelning i Android.

Lektion 4 av 413 steg

Spela upp ljud och video är en gratis lektion i Android Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Android Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Android Academy innehåller totalt 4 lektioner.

Bortom bilder: uppspelning av media

Coil visar bilder på ett utmärkt sätt, men appar spelar även upp ljud och video: en aviseringssignal, en podcast, ett bakgrundsklipp eller ett videoflöde. Android har särskilda API:er för media.

Det moderna rekommenderade biblioteket är Media3 (ExoPlayer). Det hanterar strömning, format, buffring och uppspelningskontroller betydligt bättre än gamla MediaPlayer. I den här lektionen spelar ni upp enkelt ljud och enkel video i en Compose-app.

Lägga till Media3-beroenden

Media3 är uppdelat i moduler. För de flesta appar behöver ni media3-exoplayer (spelarens motor) och media3-ui (färdiga spelarkomponenter). För video i Compose kan ni också använda PlayerView via AndroidView.

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

Skapa en ExoPlayer

En ExoPlayer skapas från en Context. Ni anger ett MediaItem (en URL eller lokal fil), anropar prepare() och startar uppspelningen. Den kör sina egna trådar, så UI-tråden blockeras inte.

Viktigt är att en spelare håller systemresurser och måste frigöras. Mer om det snart.

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
}

Spela upp ljud

För uppspelning av enbart ljud är konfigurationen identisk. Ni anger bara en ljud-URL (mp3, aac och så vidare) i MediaItem. Det finns ingen vy att visa, så ni styr spelaren via spelarobjektet: play(), pause() och seekTo().

Det räcker för att bygga en podcast- eller musikspelare.

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()
}

Komma ihåg spelaren i Compose

I Compose bör ni skapa spelaren en gång och behålla den mellan recompositions. Använd remember så att en ny spelare inte skapas vid varje recomposition.

Kombinera detta med korrekt resursstädning (i nästa scen) så att ni inte läcker resurser.

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()
        }
    }
}

Frigöra spelaren

En spelare håller codecs, buffertar och ljudfokus aktiva. Om ni glömmer att frigöra den läcker ni minne, och uppspelningen kan fortsätta efter att skärmen har försvunnit. I Compose kör DisposableEffect städningen när composable-komponenten lämnar composition.

Anropa alltid player.release() där.

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
}

Visa video med PlayerView

Media3 tillhandahåller en färdig PlayerView med kontroller. Compose har ingen inbyggd composable för video, så ni bäddar in vyn med AndroidView och kopplar till spelaren.

Det ger er uppspelning/paus, ett sökfält och helskärm utan extra arbete.

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
    )
}

En komplett videoskärm

Nu sätter vi ihop allt: skapa spelaren, kom ihåg den, koppla den till en PlayerView och frigör den när den tas bort. Detta är en fristående videoskärm som ni kan återanvända.

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)
    )
}

Följa uppspelningens tillstånd

För att uppdatera UI:t (en ikon för uppspelning/paus eller en förloppsindikator) lyssnar ni på spelaren med en Player.Listener. Den rapporterar tillståndsändringar som buffring, redo och avslutad uppspelning samt om uppspelningen är aktiv.

Lägg till lyssnaren när skärmen visas och ta bort den när den tas bort.

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
}

Pausa när appen går till bakgrunden

För infogad video (inte en musikapp) vill ni vanligtvis pausa när användaren lämnar skärmen och återuppta uppspelningen när användaren kommer tillbaka. Ni kan koppla uppspelningen till Compose-livscykeln genom att observera Lifecycle och pausa vid ON_PAUSE.

Det förhindrar att video spelas upp när användaren inte kan se den och sparar batteri.

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) }
    }
}

Bakgrundsljud med MediaSession

För ljud som ska fortsätta spelas när appen ligger i bakgrunden (musik och podcaster) bäddar ni in uppspelningen i en MediaSessionService. Det integrerar med systemkontroller, låsskärmen och Bluetooth-knappar.

Det kräver lite mer arbete, men grundidén är att exponera spelaren via en 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()
    }
}

Snabb kontroll

I en Compose-skärm som innehåller en ExoPlayer, vilket Compose-API bör ni använda för att frigöra spelaren när skärmen lämnar composition?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni lade till uppspelning av ljud och video:

Använd Media3 ExoPlayer, den moderna ersättaren för MediaPlayer.
Skapa en spelare, ange ett MediaItem, anropa prepare() och sedan play().
Använd remember för spelaren i Compose och frigör den i onDispose i DisposableEffect.
Visa video genom att bädda in PlayerView med AndroidView.
Följ tillståndet med en Player.Listener och använd en MediaSessionService för bakgrundsljud.

Därmed är kursen Images & Media Loading with Coil klar. Nu kan ni läsa in bilder smidigt och spela upp media på det moderna sättet i Android.

Gratis att börja

Lär dig Kotlin med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 36
Lektioner: 152

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Spela upp ljud och video” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Android Academy, inklusive ”Spela upp ljud och video”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Android Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Spela upp ljud och video”?

Enkel medieuppspelning i Android. Ni övar på Android Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Android Academy?

Du behöver inga förkunskaper. Utbildningen i Android Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Spela upp ljud och video”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Android Academy-lektionen?

Ja. Varje Android Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Android Academy