Expo AV

一个通用库，为音频和视频播放提供单独的 API。

Audio.Sound 对象和 Video 组件共享用于媒体播放的统一命令式 API。

¥The Audio.Sound objects and Video components share a unified imperative API for media playback.

请注意，对于 Video，所有操作也可以通过组件上的 props 进行。但是，我们建议对大多数需要对视频播放状态进行更精细控制的应用使用此命令式播放 API。

¥Note that for Video, all of the operations are also available via props on the component. However, we recommend using this imperative playback API for most applications where finer control over the state of the video playback is needed.

有关 Audio.Sound 和 Video 的播放 API 的示例，请参阅 播放列表示例应用。

¥See the playlist example app for an example on the playback API for both Audio.Sound and Video.

信息 tvOS（Apple TV）上不提供录音 API。

¥Audio recording APIs are not available on tvOS (Apple TV).

安装

¥Installation

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

app.json/app.config.js 中的配置

¥Configuration in app.json/app.config.js

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

¥You can configure expo-av 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.

Example app.json with config plugin

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

Configurable properties

用法

¥Usage

在这个页面上，我们引用了 playbackObject 上的操作。以下是获取声音和视频参考的访问权限的示例：

¥On this page, we reference operations on playbackObjects. Here is an example of obtaining access to the reference for both sound and video:

示例：Audio.Sound

¥Example: Audio.Sound

await Audio.setAudioModeAsync({ playsInSilentModeIOS: true });

const playbackObject = new Audio.Sound();
// OR
const { sound: playbackObject } = await Audio.Sound.createAsync(
  { uri: 'http://foo/bar.mp3' },
  { shouldPlay: true }
);

有关 Audio.Sound.createAsync() 的更多信息，请参阅 音频文档。

¥See the audio documentation for further information on Audio.Sound.createAsync().

示例：Video

¥Example: Video

%%placeholder-start%%... %%placeholder-end%%
_handleVideoRef = component => {
  const playbackObject = component;
  ...
}
%%placeholder-start%%... %%placeholder-end%%

render() {
  return (
      <Video
        ref={this._handleVideoRef}
      />
      %%placeholder-start%%... %%placeholder-end%%
  )
}

请参阅 视频文档 了解更多信息。

¥See the video documentation for further information.

示例：setOnPlaybackStatusUpdate()

¥Example: setOnPlaybackStatusUpdate()

_onPlaybackStatusUpdate = playbackStatus => {
  if (!playbackStatus.isLoaded) {
    // Update your UI for the unloaded state
    if (playbackStatus.error) {
      console.log(`Encountered a fatal error during playback: ${playbackStatus.error}`);
      // Send Expo team the error on Slack or the forums so we can help you debug!
    }
  } else {
    // Update your UI for the loaded state

    if (playbackStatus.isPlaying) {
      // Update your UI for the playing state
    } else {
      // Update your UI for the paused state
    }

    if (playbackStatus.isBuffering) {
      // Update your UI for the buffering state
    }

    if (playbackStatus.didJustFinish && !playbackStatus.isLooping) {
      // The player has just finished playing and will stop. Maybe you want to play something else?
    }

    %%placeholder-start%%... %%placeholder-end%%
  }
};

// Load the playbackObject and obtain the reference.
playbackObject.setOnPlaybackStatusUpdate(this._onPlaybackStatusUpdate);

示例：正好循环媒体 20 次

¥Example: Loop media exactly 20 times

const N = 20;
%%placeholder-start%%... %%placeholder-end%%

_onPlaybackStatusUpdate = playbackStatus => {
  if (playbackStatus.didJustFinish) {
    if (this.state.numberOfLoops == N - 1) {
      playbackObject.setIsLooping(false);
    }
    this.setState({ numberOfLoops: this.state.numberOfLoops + 1 });
  }
};

%%placeholder-start%%... %%placeholder-end%%
this.setState({ numberOfLoops: 0 });
// Load the playbackObject and obtain the reference.
playbackObject.setOnPlaybackStatusUpdate(this._onPlaybackStatusUpdate);
playbackObject.setIsLooping(true);

什么是寻求宽容以及我为什么要使用它 [仅限 iOS]

¥What is seek tolerance and why would I want to use it [iOS only]

当被要求寻找 A/V 项目时，iOS 中的原生播放器有时可能会寻找略有不同的时间。苹果文档 中提到的这种技术用于缩短 seekTo 调用的时间（播放器可以决定从与请求的时间不同的时间立即播放，而不是解码确切的请求部分并以解码延迟播放）。

¥When asked to seek an A/V item, native player in iOS sometimes may seek to a slightly different time. This technique, mentioned in Apple documentation, is used to shorten the time of the seekTo call (the player may decide to play immediately from a different time than requested, instead of decoding the exact requested part and playing it with the decoding delay).

如果精度很重要，你可以指定玩家寻求的容差。然而，这将导致延迟增加。

¥If precision is important, you can specify the tolerance with which the player will seek. However, this will result in an increased delay.

API

import { Audio, Video } from 'expo-av';

Constants

{
  progressUpdateIntervalMillis: 500,
  positionMillis: 0,
  shouldPlay: false,
  rate: 1.0,
  shouldCorrectPitch: false,
  volume: 1.0,
  isMuted: false,
  isLooping: false,
}

Interfaces

Types

Enums

权限

¥Permissions

安卓

¥Android

你必须将以下权限添加到 expo.android.permissions 数组内的 app.json 中。

¥You must add the following permissions to your app.json inside the expo.android.permissions array.

iOS 系统

¥iOS

该库使用以下用法描述键：

¥The following usage description keys are used by this library: