Music Playback

In MusicPlayback

PlayButton

Get code →

@Composable
fun NiceTry(){
    Column {
        BasicText("Nice try. Use code COMPOSE10 for a 10% discount on checkout ;)")
    }
}

In MusicPlayback

MusicPlayerControls

var isPlaying by remember { mutableStateOf(false) }

val repeatModes = listOf("off", "once", "all")
var repeatMode by remember { mutableStateOf(repeatModes[0]) }
var shuffle by remember { mutableStateOf(false) }

Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(24.dp),
) {
    IconButton(
        onClick = {/*TODO Enable shuffle mode*/
            shuffle = shuffle.not()
        },
    ) {
        val icon = when (shuffle) {
            true -> Lucide.Shuffle
            false -> Lucide.Shuffle
        }
        Icon(
            imageVector = icon,
            contentDescription = "Forward 5 seconds",
            modifier = Modifier.size(24.dp),
            tint = MaterialTheme.colorScheme.primary
        )
    }

    IconButton(onClick = {/*TODO Skip to previous media item*/ }) {
        Icon(
            imageVector = Lucide.SkipBack,
            contentDescription = "Play Previous",
            modifier = Modifier.size(36.dp),
            tint = MaterialTheme.colorScheme.primary
        )
    }
    FilledIconButton(onClick = {/*TODO toggle playback*/
        isPlaying = !isPlaying
    }, modifier = Modifier.size(64.dp), shape = CircleShape) {
        if (isPlaying) {
            Icon(imageVector = Lucide.Pause, contentDescription = "Pause", modifier = Modifier.size(48.dp))
        } else {
            Icon(imageVector = Lucide.Play, contentDescription = "Play", modifier = Modifier.size(48.dp))
        }
    }
    IconButton(onClick = {/*TODO Skip to previous media item*/ }) {
        Icon(
            imageVector = Lucide.SkipForward,
            contentDescription = "Play Next",
            modifier = Modifier.size(36.dp),
            tint = MaterialTheme.colorScheme.primary
        )
    }
    IconButton(
        onClick = {
            repeatMode = repeatModes[(repeatModes.indexOf(repeatMode) + 1) % repeatModes.size]
        },
    ) {
        val icon = when (repeatMode) {
            "once" -> Lucide.Repeat1
            "all" -> Lucide.Repeat2
            else -> Lucide.Repeat
        }
        Icon(
            imageVector = icon,
            contentDescription = "Forward 5 seconds",
            modifier = Modifier.size(24.dp),
            tint = MaterialTheme.colorScheme.primary
        )
    }
}
In MusicPlayback

MusicPlayerWithAlbumCoverAndSeekbar

Get code →

@Composable
fun NiceTry(){
    Column {
        BasicText("Nice try. Use code COMPOSE10 for a 10% discount on checkout ;)")
    }
}

In MusicPlayback

MusicPlayerMini

Get code →

@Composable
fun NiceTry(){
    Column {
        BasicText("Nice try. Use code COMPOSE10 for a 10% discount on checkout ;)")
    }
}

Sit tight. We are loading your preview
🐛 Bugs & Suggestions