How to Play Audio (MP3) in Compose Multiplatform with Kotlin/Wasm Target?

Welcome to this comprehensive guide on playing audio files in Compose Multiplatform with Kotlin/Wasm target! If you’re struggling to get your audio files to play in your Compose Multiplatform app, you’re in the right place. In this article, we’ll take you through a step-by-step process to help you achieve this feat.

Prerequisites

Before we dive into the tutorial, make sure you have the following installed on your system:

• Kotlin Multiplatform plugin (version 1.6.0 or higher)
• Compose Multiplatform (version 1.1.0 or higher)
• VS Code or IntelliJ IDEA (with Kotlin and Compose plugins)
• A Wasm-capable browser (e.g., Google Chrome or Mozilla Firefox)

Step 1: Set up Your Project

Create a new Kotlin Multiplatform project in your preferred IDE (VS Code or IntelliJ IDEA). Choose the “Compose Multiplatform” template and name your project (e.g., “AudioPlayer”). Make sure to select “Wasm” as the target platform.

kotlin {
  js(IR) {
    browser()
    moduleName = "AudioPlayer"
  }
}

This configuration tells Kotlin to compile your code for the JavaScript platform, using the IR compiler, and targets the browser.

Step 2: Add Audio File to Your Project

Create a new folder called “assets” in your project’s root directory. Add your MP3 audio file (e.g., “music.mp3”) to this folder.

File Structure
AudioPlayer/ assets/ music.mp3 …

Step 3: Create an Audio Player Composable

Create a new Kotlin file called “AudioPlayer.kt” in your project’s “common” folder. Define a composable function called “AudioPlayer” that takes a string parameter for the audio file URL:

>import androidx.compose.runtime.Composable
import org.jetbrains.compose.web.dom.HtmlTag

@Composable
fun AudioPlayer(audioUrl: String) {
  HtmlTag("audio") {
    attrs.src = audioUrl
    attrs.controls = true
  }
}

This composable function creates an HTML audio element with the provided audio URL and enables controls for the audio player.

Step 4: Load and Play Audio File

Create another Kotlin file called “Main.kt” in your project’s “jsMain” folder. In this file, define a composable function called “Main” that loads and plays the audio file:

>import androidx.compose.runtime.Composable
import androidx.compose.web.runtime.remember
import org.jetbrains.compose.web.dom.Document
import org.jetbrains.compose.web.dom.HtmlTag

@Composable
fun Main() {
  val audioUrl = remember { "assets/music.mp3" }
  Document {
    HtmlTag("body") {
      AudioPlayer(audioUrl)
    }
  }
}

This composable function loads the audio file URL and passes it to the “AudioPlayer” composable function, which creates the audio element and enables playback.

Step 5: Run and Test Your App

Run your application using the following command in your terminal:

./gradlew jsBrowser Distribution

Open a Wasm-capable browser and navigate to http://localhost:8080. You should see an audio player with controls, and the audio file should start playing automatically.

Troubleshooting

If you encounter any issues during this process, check the following:

1. Verify that the audio file is correctly added to the “assets” folder and imported in your Kotlin file.
2. Check the audio file URL and ensure it’s correctly formatted.
3. Verify that your browser supports Wasm and audio playback.

Conclusion

That’s it! You’ve successfully played an audio file in your Compose Multiplatform app with Kotlin/Wasm target. This tutorial demonstrates the power of Compose Multiplatform and its ability to create cross-platform applications with ease. With this knowledge, you can now add audio playback capabilities to your own Compose Multiplatform projects.

Remember, this is just the beginning. You can further customize and enhance your audio player by adding more features, such as playback controls, volume adjustment, and more.

Next Steps

Take your audio player to the next level by exploring the following topics:

• Implementing playback controls (play, pause, stop)
• Adding volume adjustment functionality
• Creating a playlist feature with multiple audio files
• Using audio libraries like Howler.js or Pizzicato.js for more advanced audio processing

Happy coding, and don’t hesitate to reach out if you have any questions or need further assistance!

Frequently Asked Question

Get ready to groove with your Kotlin/Wasm target project! Here are some frequently asked questions about playing audio (mp3) in Compose Multiplatform.