Import a sound and play it using Audio expo-av

Before teaching you how to do that, I had to learn this myself, because the documentation doens’t contain this specific situation very clearly, to play some audio that you recently imported.

First - You have to install the dependecies

$ expo install expo-av

$ expo install expo-document-picker

Second - Import inside your project

Importing the dependencies

Third - Then create a var to store the imported audio

Use ‘useState()’ for re-render the page when you choose some audio

Fourth - Inside the return page code, create a button to import the audio

Don’t forget to import the View, TouchbleHighlight, styles, and Text

Fifth - Create a function to import an audio

Use the DocumentPicker.getDocumentAsync() to open the file browser in the user cellphone, with the configuration ({type: ‘audio/*’}) to just allow the user to import audio

Sixth - Update the button ‘onPress’

Seventh - Create a button to play the imported audio

Eighth - Create the function to play the audio when the user clicks on the button

Getting the imported audio Uri, creating new Audio Sound, loading the imported audio, and playing it!

Nineth - Now just update the button ‘onPress’

Tenth - Now have Fun!!! Here are the full code:

And here are the full code in snack.expo.io for you test it or copy it

https://snack.expo.io/71LTgzZKc

Thanks for seeing this! I hope this article helped you!