Android Academy · Oppitunti

Äänen ja videon toistaminen

Yksinkertainen median toisto Androidissa.

Oppitunti 4/413 vaihetta

Äänen ja videon toistaminen on ilmainen Android Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Android Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Android Academy-kurssilla on yhteensä 4 oppituntia.

Kuvien tuolle puolen: median toistaminen

Coil näyttää kuvat hienosti, mutta sovellukset toistavat myös ääntä ja videota: ilmoitusääniä, podcasteja, taustavideoita ja videosyötteitä. Android tarjoaa medialle omat rajapintansa.

Nykyaikainen suositeltu kirjasto on Media3 (ExoPlayer). Se käsittelee suoratoistoa, formaatteja, puskurointia ja toiston hallintaa huomattavasti paremmin kuin vanha MediaPlayer. Tässä oppitunnissa toistatte yksinkertaista ääntä ja videota Compose-sovelluksessa.

Media3-riippuvuuksien lisääminen

Media3 on jaettu moduuleihin. Useimmissa sovelluksissa tarvitsette media3-exoplayer-moduulin (soittimen moottori) ja media3-ui-moduulin (valmiit soitinnäkymät). Compose-videota varten voitte käyttää myös PlayerView-näkymää AndroidView-komponentin kautta.

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

ExoPlayerin luominen

ExoPlayer rakennetaan Context-olion perusteella. Annette sille MediaItem-kohteen (URL-osoitteen tai paikallisen tiedoston), kutsutte prepare()-funktiota ja käynnistätte toiston. Se käyttää omia säikeitään, joten käyttöliittymä ei esty.

On tärkeää huomata, että soitin varaa järjestelmäresursseja ja se on vapautettava. Palaamme tähän pian.

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
}

Äänen toistaminen

Vain ääntä toistettaessa määritykset ovat samat: osoitatte MediaItem-kohteen äänen URL-osoitteeseen (mp3, aac jne.). Näytettävää näkymää ei ole, joten ohjaatte soitinta suoraan soitinoliolla: play(), pause(), seekTo().

Tämä riittää podcast- tai musiikkisoittimen rakentamiseen.

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

Soittimen säilyttäminen Composessa

Composessa soitin kannattaa luoda kerran ja säilyttää se koostamisten välillä. Käyttäkää remember-funktiota, jotta uutta soitinta ei luoda jokaisen koostamisen yhteydessä.

Yhdistäkää tähän asianmukainen siivous (seuraavassa osiossa), jotta resurssit eivät vuoda.

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

Soittimen vapauttaminen

Soitin pitää koodekit, puskurit ja äänen toistoon tarvittavan fokuksen aktiivisina. Jos unohdatte vapauttaa sen, seurauksena voi olla muistivuoto ja toisto saattaa jatkua näytön poistuttua. Composessa DisposableEffect suorittaa siivouksen, kun composable-komponentti poistuu koostamisesta.

Kutsukaa siellä aina player.release()-funktiota.

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
}

Videon näyttäminen PlayerView-komponentilla

Media3 tarjoaa valmiin PlayerView-näkymän ohjaimineen. Composessa ei ole natiivia videocomposable-komponenttia, joten upotatte View-näkymän AndroidView-komponentilla ja liitätte soittimen siihen.

Saatte näin toiston käynnistyksen ja keskeytyksen, hakupalkin ja koko näytön tilan käyttöön ilman lisätyötä.

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

Kokonainen videonäkymä

Kootaan kokonaisuus yhteen: luokaa soitin, säilyttäkää se, liittäkää se PlayerView-näkymään ja vapauttakaa se näkymän tuhouduttua. Tämä on itsenäinen videonäkymä, jota voitte käyttää uudelleen.

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

Toiston tilan seuraaminen

Käyttöliittymän päivittämiseksi (esimerkiksi toisto-/taukokuvaketta tai edistymispalkkia varten) kuunnelkaa soitinta Player.Listener-kuuntelijalla. Se ilmoittaa tilan muutoksista, kuten puskuroinnista, valmiudesta ja toiston päättymisestä, sekä siitä, onko toisto aktiivinen.

Lisätkää kuuntelija näkymän avautuessa ja poistakaa se näkymän tuhouduttua.

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
}

Toiston keskeyttäminen sovelluksen siirtyessä taustalle

Sisäkkäisessä videossa (ei musiikkisovelluksessa) toisto yleensä keskeytetään, kun käyttäjä poistuu näytöltä, ja jatketaan hänen palatessaan. Voitte sitoa toiston Composen elinkaareen tarkkailemalla Lifecycle-elinkaarta ja keskeyttämällä toiston tilassa ON_PAUSE.

Näin video ei toistu käyttäjän ollessa näkymättömissä ja akku säästyy.

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

Taustaääni MediaSessionin avulla

Jos äänen on tarkoitus jatkaa toistoa sovelluksen siirtyessä taustalle (musiikki, podcastit), ympäröikää toisto MediaSessionService-palvelulla. Tämä integroituu järjestelmän ohjaimiin, lukitusnäyttöön ja Bluetooth-painikkeisiin.

Toteutus on monivaiheisempi, mutta perusideana on tarjota soitin MediaSession-olion kautta.

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

Pikatarkistus

Compose-näytössä säilytetään ExoPlayer-soitinta. Mitä Compose-rajapintaa pitäisi käyttää soittimen vapauttamiseen, kun näyttö poistuu koostamisesta?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Lisäsitte sovellukseen äänen ja videon toiston:

Käyttäkää Media3 ExoPlayer -soitinta, joka on MediaPlayerin nykyaikainen korvaaja.
Rakentakaa soitin, asettakaa sille MediaItem, kutsukaa prepare()-funktiota ja sen jälkeen play()-funktiota.
Käyttäkää Composessa remember-funktiota soittimen säilyttämiseen ja vapauttakaa se DisposableEffect-komponentin onDispose-käsittelijässä.
Näyttäkää video upottamalla PlayerView AndroidView-komponentilla.
Seuratkaa tilaa Player.Listener-kuuntelijalla ja käyttäkää MediaSessionService-palvelua taustaääntä varten.

Tähän päättyy Images & Media Loading with Coil -kurssi. Osaatte nyt ladata kuvia sujuvasti ja toistaa mediaa Androidin nykyaikaisella tavalla.

Aloita maksutta

Opi Kotlin tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 36
Oppitunnit: 152

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Äänen ja videon toistaminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Android Academy-oppimispolun 3 oppituntia, myös oppitunnin “Äänen ja videon toistaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Android Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Äänen ja videon toistaminen”?

Yksinkertainen median toisto Androidissa. Harjoittelet Android Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Android Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Android Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Äänen ja videon toistaminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Android Academy-oppitunnilla?

Kyllä. Jokainen Android Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Android Academy