Expo 音频 (expo-audio)

提供 API 以在应用中实现音频播放和录音的库。

本页记录了即将推出的音频库版本。Expo Audio 目前处于 alpha 阶段，可能会发生重大更改。

expo-audio 是一个跨平台音频库，用于访问设备的原生音频功能。

¥expo-audio is a cross-platform audio library for accessing the native audio capabilities of the device.

请注意，如果耳机/蓝牙音频设备断开连接，音频会自动停止。

¥Note that audio automatically stops if headphones/bluetooth audio devices are disconnected.

安装

¥Installation

If you are installing this in an existing React Native app, start by installing expo in your project. Then, follow the additional instructions as mentioned by the library's README under "Installation in bare React Native projects" section.

应用配置中的配置

¥Configuration in app config

如果你在项目中使用配置插件（EAS 构建 或 npx expo run:[android|ios]），则可以使用其内置的 配置插件 配置 expo-audio。该插件允许你配置无法在运行时设置的各种属性，并且需要构建新的应用二进制文件才能生效。如果你的应用不使用 EAS Build，则你需要手动配置包。

¥You can configure expo-audio using its built-in config plugin if you use config plugins in your project (EAS Build or npx expo run:[android|ios]). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect. If your app does not use EAS Build, then you'll need to manually configure the package.

Example app.json with config plugin

{
"expo": {
  "plugins": [
    [
      "expo-audio",
      {
        "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone."
      }
    ]
  ]
}
}

Configurable properties

用法

¥Usage

播放声音

¥Playing sounds

import { useEffect, useState } from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { useAudioPlayer } from 'expo-audio';

const audioSource = require('./assets/Hello.mp3');

export default function App() {
const player = useAudioPlayer(audioSource);

return (
  <View style={styles.container}>
    <Button title="Play Sound" onPress={() => player.play()} />
  </View>
);
}

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

录制声音

¥Recording sounds

import { useState } from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { useAudioRecorder, RecordingOptions, AudioModule, RecordingPresets } from 'expo-audio';

export default function App() {
const audioRecorder = useAudioRecorder(RecordingPresets.HIGH_QUALITY);

const record = async () => {
  await audioRecorder.prepareToRecordAsync();
  audioRecorder.record();
};

const stopRecording = async () => {
  // The recording will be available on `audioRecorder.uri`.
  await audioRecorder.stop();
};

useEffect(() => {
  (async () => {
    const status = await AudioModule.requestRecordingPermissionsAsync();
    if (!status.granted) {
      Alert.alert('Permission to access microphone was denied');
    }
  })();
}, []);

return (
  <View style={styles.container}>
    <Button
      title={audioRecorder.isRecording ? 'Stop Recording' : 'Start Recording'}
      onPress={audioRecorder.isRecording ? stopRecording : record}
    />
  </View>
);
}

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

在后台播放或录制音频

¥Playing or recording audio in background

在 iOS 上，后台音频播放和录音只能在独立应用中使用，并且需要一些额外的配置。在 iOS 上，每个后台功能都需要 Info.plist 文件中 UIBackgroundModes 数组中的特殊键。在独立应用中，该数组默认为空，因此要使用后台功能，你需要向 app.json 配置添加适当的键。

¥On iOS, audio playback and recording in background is only available in standalone apps, and it requires some extra configuration. On iOS, each background feature requires a special key in UIBackgroundModes array in your Info.plist file. In standalone apps this array is empty by default, so to use background features you will need to add appropriate keys to your app.json configuration.

请参阅启用后台音频播放的 app.json 示例：

¥See an example of app.json that enables audio playback in background:

{
  "expo": {
    ...
    "ios": {
      ...
      "infoPlist": {
        ...
        "UIBackgroundModes": [
          "audio"
        ]
      }
    }
  }
}

网络使用注意事项

¥Notes on web usage

• Chrome 上的 MediaRecorder 问题会生成缺少持续时间元数据的 WebM 文件。请参阅未解决的 Chromium 问题。

  ¥A MediaRecorder issue on Chrome produces WebM files missing the duration metadata. See the open Chromium issue.

• MediaRecorder 编码选项和其他配置在浏览器之间不一致，在应用中使用 kbumsik/opus-media-recorder 或 ai/audio-recorder-polyfill 等 Polyfill 将改善你的体验。传递给 prepareToRecordAsync 的任何选项都将直接传递给 MediaRecorder API 以及 polyfill。

  ¥MediaRecorder encoding options and other configurations are inconsistent across browsers, utilizing a Polyfill such as kbumsik/opus-media-recorder or ai/audio-recorder-polyfill in your application will improve your experience. Any options passed to prepareToRecordAsync will be passed directly to the MediaRecorder API and as such the polyfill.

• Web 浏览器要求网站能够安全地提供服务，以便它们能够收听麦克风的声音。详细信息请参见 MediaDevices getUserMedia() 安全性。

  ¥Web browsers require sites to be served securely for them to listen to a mic. See MediaDevices getUserMedia() security for more details.

API

import { useAudioPlayer, useAudioRecorder } from 'expo-audio';

Constants

RecordingPresets.HIGH_QUALITY = {
 extension: '.m4a',
  sampleRate: 44100,
  numberOfChannels: 2,
  bitRate: 128000,
  android: {
    outputFormat: 'mpeg4',
    audioEncoder: 'aac',
  },
  ios: {
    outputFormat: IOSOutputFormat.MPEG4AAC,
    audioQuality: AudioQuality.MAX,
    linearPCMBitDepth: 16,
    linearPCMIsBigEndian: false,
    linearPCMIsFloat: false,
  },
  web: {
    mimeType: 'audio/webm',
    bitsPerSecond: 128000,
  },
};

RecordingPresets.LOW_QUALITY = {
  extension: '.m4a',
  sampleRate: 44100,
  numberOfChannels: 2,
  bitRate: 64000,
  android: {
    extension: '.3gp',
    outputFormat: '3gp',
    audioEncoder: 'amr_nb',
  },
  ios: {
    audioQuality: AudioQuality.MIN,
    outputFormat: IOSOutputFormat.MPEG4AAC,
    linearPCMBitDepth: 16,
    linearPCMIsBigEndian: false,
    linearPCMIsFloat: false,
  },
  web: {
    mimeType: 'audio/webm',
    bitsPerSecond: 128000,
  },
};

Hooks

Classes

Methods

Event Subscriptions

Interfaces

Types

Enums