Expo-AV Sound.playAsync() doesn't work with expo-av 9.2.3 and Expo 42.0.3

Question

Summary

Context: I'm trying to make a timer app with React Native, Expo, and Expo-AV.

I'm initialising a stock app with Managed workflow and trying to play an mp3 file using expo-av (9.2.3). I saw another issue where no sound was playing on Moto G5, Android 8. For me, sound doesn't play for Moto G6 Android 9, iPhone SE iOS 14.6, OR on the web. App.json and package.json attached.

Managed or bare workflow?

managed

What platform(s) does this occur on?

Android, Web

SDK Version (managed workflow only)

42.0.3

Environment

Expo CLI 4.9.0 environment info:

• System: OS: Windows 10 10.0.19042
• Binaries: Node: 14.17.4 - C:\Program Files\nodejs\node.EXE, npm: 6.14.14 - C:\Program Files\nodejs\npm.CMD
• IDEs: Android Studio: Version 2020.3.0.0 AI-203.7717.56.2031.7583922
• npmPackages:
  • expo: ~42.0.1 => 42.0.3
  • react: 16.13.1 => 16.13.1
  • react-dom: 16.13.1 => 16.13.1
  • react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2
  • react-native-web: ~0.13.12 => 0.13.18
• Expo Workflow: managed

Reproducible demo or steps to reproduce from a blank project

1. Run expo init my-app
2. Run expo install expo-av
3. Add some mp3 file to the root directory. I'm using this one.
4. Copy this code into app.js

import { StatusBar } from 'expo-status-bar';
import React, { useEffect } from 'react';
import { Audio } from 'expo-av';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  useEffect(() => {
    playSound()
  }, []);

  async function playSound() {
    const sound = new Audio.Sound();
    try {
      await sound.loadAsync(require('./sound.mp3'));
      await sound.playAsync();
      await sound.unloadAsync();
    } catch (error) {
      console.error(error)
    }
  }

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

5. Run expo start
6. Preview on Expo Go app on Moto G6 Android 9.0, iPhone SE iOS 14.6. Or open on web by entering w with terminal.

Answer 1

I received a suggestion on how to change the functions I use to play the audio in the Expo Github Issues.

Before, my code was:

async function playSound() {
    const sound = new Audio.Sound();
    try {
      await sound.loadAsync(require('./sound.mp3'));
      await sound.playAsync();
      await sound.unloadAsync();
    } catch (error) {
      console.error(error)
    }
}

Now, I used the .setPositionAsync() and .playAsync() functions, as well as the { shouldPlay: true} flag. This code worked after I updated to "expo": "^45.0.8" and "expo-av": "~11.2.3" as well (since Expo 42 is deprecated). I haven't tested this on versions of Expo besides 42 and 45.

async function playSound() {
    const sound = new Audio.Sound();
    try {
      await sound.loadAsync(require('./sound.mp3'), {shouldPlay: true});
      await sound.setPositionAsync(0);
      await sound.playAsync();
    } catch (error) {
      console.error(error)
    }
}