How to use the expo-av.Audio.INTERRUPTION_MODE_IOS_MIX_WITH_OTHERS function in expo-av

To help you get started, we’ve selected a few expo-av examples, based on popular ways it is used in public projects.

github expo / expo / apps / native-component-list / src / screens / AV / AudioModeSelector.ios.tsx View on Github external
interface State {
  modeToSet: Mode;
  setMode: Mode;
}

export default class AudioModeSelector extends React.Component<{}, State> {
  readonly state: State = {
    modeToSet: {
      interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_MIX_WITH_OTHERS,
      playsInSilentModeIOS: false,
      allowsRecordingIOS: false,
      staysActiveInBackground: false,
    },
    setMode: {
      interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_MIX_WITH_OTHERS,
      playsInSilentModeIOS: false,
      allowsRecordingIOS: false,
      staysActiveInBackground: false,
    },
  };

  _applyMode = async () => {
    try {
      await Audio.setAudioModeAsync({
        ...this.state.modeToSet,
        // Android values don't matter, this is iOS-only selector
        shouldDuckAndroid: false,
        interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
        playThroughEarpieceAndroid: false,
      });
      this.setState({ setMode: this.state.modeToSet });
github expo / expo / home / screens / AudioDiagnosticsScreen.tsx View on Github external
/>
      {!Environment.IsIOSRestrictedBuild ? (
        <AudioOptionSwitch
          title="Continues Playing in Background"
          value={audioMode.staysActiveInBackground}
          disabled={!isAudioEnabled || !audioMode.playsInSilentModeIOS}
          onValueChange={value => {
            const newAudioMode = { ...audioMode, staysActiveInBackground: value };
            setAudioMode(newAudioMode);
          }}
        />
      ) : null}
      <AudioOptionSelector
        title="Interruption Mode"
        items={[
          { name: 'Mix with Other Apps', value: Audio.INTERRUPTION_MODE_IOS_MIX_WITH_OTHERS },
          { name: 'Do Not Mix', value: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX },
          {
            name: 'Duck Other Apps',
            value: Audio.INTERRUPTION_MODE_IOS_DUCK_OTHERS,
            disabled: !audioMode.playsInSilentModeIOS,
          },
        ]}
        disabled={!isAudioEnabled}
        selectedValue={audioMode.interruptionModeIOS}
        onSelect={value => {
          const newAudioMode = { ...audioMode, interruptionModeIOS: value };
          setAudioMode(newAudioMode);
        }}
      />
    </StyledScrollView>
  );
github expo / expo / home / screens / AudioDiagnosticsScreen.tsx View on Github external
import { Audio } from 'expo-av';
import React from 'react';
import { StyleSheet, Switch, View } from 'react-native';
import { BorderlessButton } from 'react-native-gesture-handler';

import AudioPlayer from '../components/AudioPlayer';
import Colors from '../constants/Colors';
import Environment from '../utils/Environment';
import { useAudio, useAudioMode } from '../utils/useAudio';
import { StyledScrollView } from '../components/Views';
import { StyledText } from '../components/Text';

const initialAudioMode = {
  interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_MIX_WITH_OTHERS,
  playsInSilentModeIOS: false,
  allowsRecordingIOS: false,
  staysActiveInBackground: false,
};

export default function AudioDiagnosticsScreen() {
  const [isAudioEnabled, setAudioEnabled] = useAudio();
  const [audioMode, setAudioMode] = useAudioMode(initialAudioMode);

  return (
    <StyledScrollView style={styles.screen} contentContainerStyle={styles.contentContainer}>
      <StyledText style={styles.title}>Audio Player</StyledText>
      <AudioPlayer
        isAudioEnabled={isAudioEnabled}
        source={{
          uri:
github expo / expo / apps / native-component-list / src / screens / AV / AudioModeSelector.ios.tsx View on Github external
})}
        {this._renderToggle({
          title: 'Allows recording',
          valueName: 'allowsRecordingIOS',
          disabled: !this.state.modeToSet.playsInSilentModeIOS,
          value: !this.state.modeToSet.playsInSilentModeIOS ? false : undefined,
        })}
        {this._renderToggle({
          title: 'Stay active in background',
          valueName: 'staysActiveInBackground',
          disabled: !this.state.modeToSet.playsInSilentModeIOS,
          value: !this.state.modeToSet.playsInSilentModeIOS ? false : undefined,
        })}
        {this._renderModeSelector({
          title: 'Mix with others',
          value: Audio.INTERRUPTION_MODE_IOS_MIX_WITH_OTHERS,
        })}
        {this._renderModeSelector({
          title: 'Do not mix',
          value: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
        })}
        {this._renderModeSelector({
          disabled: this.state.modeToSet.playsInSilentModeIOS === false,
          title: 'Duck others',
          value: Audio.INTERRUPTION_MODE_IOS_DUCK_OTHERS,
        })}
        <Button
          title="Apply changes"
          onPress={this._applyMode}
          style={{ marginTop: 10 }}
          disabled={this._modesEqual(this.state.modeToSet, this.state.setMode)}
        />
github expo / expo / apps / native-component-list / src / screens / AV / AudioModeSelector.ios.tsx View on Github external
interface Mode {
  interruptionModeIOS: number;
  playsInSilentModeIOS: boolean;
  allowsRecordingIOS: boolean;
  staysActiveInBackground: boolean;
}

interface State {
  modeToSet: Mode;
  setMode: Mode;
}

export default class AudioModeSelector extends React.Component<{}, State> {
  readonly state: State = {
    modeToSet: {
      interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_MIX_WITH_OTHERS,
      playsInSilentModeIOS: false,
      allowsRecordingIOS: false,
      staysActiveInBackground: false,
    },
    setMode: {
      interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_MIX_WITH_OTHERS,
      playsInSilentModeIOS: false,
      allowsRecordingIOS: false,
      staysActiveInBackground: false,
    },
  };

  _applyMode = async () => {
    try {
      await Audio.setAudioModeAsync({
        ...this.state.modeToSet,