用音频，重叠的声音来解决本机问题

Question

目前，我在使用重叠的声音时遇到了问题：

import {Audio} from 'expo';

链接：here

这是博览会上的一个有效示例，用于显示开始时发生的情况，重叠的曲目并仅在某些情况下造成混乱。

我无法确定何时会发生这种情况，但是我认为如果线掉了然后又恢复了，因为它们与线程一起工作了，所以会发生这种情况。

我想使用react-native-sound，但是我无法使用它，代码如下：

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  ImageBackground,
  Animated,
  TouchableWithoutFeedback,
} from 'react-native';
const size = 40;

import { Audio } from 'expo';
const soundObject = new Audio.Sound();

export default class Album extends React.Component {
  constructor(props) {
    super(props);
    this.min = size / 4;
    this.max = size / 2;
    this.heightCenter = new Animated.Value(this.min);
    this.heightLateral = new Animated.Value(size / 2);
    this.state = {
      heightCenter: new Animated.Value(this.min),
      heightLateral: new Animated.Value(size / 2),
    };
  }

  animateBar = (el, value) => {
    var newValue = value == this.max ? this.min : this.max;
    Animated.timing(el, {
      toValue: value,
    }).start(() => this.animateBar(el, newValue));
  };

  onPress = e => {
    return this.props.onPress(e);
  };

  componentDidMount() {
    console.log('componentDidMount');
    this.animateBar(this.heightCenter, this.min);
    this.animateBar(this.heightLateral, this.max);
    let { preview_url } = this.props;
    this.playSound(preview_url);
  }

  componentWillMount() {
    console.log('componentWillMount');
  }

  playSound = async preview_url => {
    console.log('playSound');
    await soundObject.loadAsync({ uri: preview_url });
    soundObject.setIsLoopingAsync(true);
    soundObject.playAsync();
  };

  stopSound = async () => {
    console.log('stopSound');
    await soundObject.stopAsync();
  };

  componentWillReceiveProps(nextProps) {
    if (nextProps.preview_url !== this.props.preview_url) {
      console.log('componentWillReceiveProps');
      soundObject.unloadAsync();
      this.playSound(nextProps.preview_url);
      //this.stopSound();
    }
  }

  coverBig = el => {
    let { cover, barWidthCenter, barWidthLateral, title, artist } = el;
    return (
      <TouchableWithoutFeedback onPress={() => this.onPress()}>
        <View
          style={[
            {
              alignItems: 'center',
              justifyContent: 'center',
            },
          ]}>
          <ImageBackground
            source={{
              uri: cover,
            }}
            imageStyle={{ borderRadius: 4 }}
            style={{
              flexDirection: 'row',
              alignItems: 'flex-end',
              justifyContent: 'flex-start',
              height: 200,
              width: 200,
            }}>
            <View
              style={{
                borderRadius: 4,
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
                backgroundColor: 'rgba(0,0,0,0.3)',
                padding: 5,
                height: 40,
                width: 40,
                margin: 5,
              }}>
              <Animated.View
                style={[
                  {
                    backgroundColor: 'rgba(255,255,255,1)',
                    width: 5,
                    borderRadius: 5 / 2,
                    margin: 2,
                  },
                  barWidthLateral,
                ]}
              />
              <Animated.View
                style={[
                  {
                    backgroundColor: 'rgba(255,255,255,1)',
                    width: 5,
                    borderRadius: 5 / 2,
                    margin: 2,
                  },
                  barWidthCenter,
                ]}
              />
              <Animated.View
                style={[
                  {
                    backgroundColor: 'rgba(255,255,255,1)',
                    width: 5,
                    borderRadius: 5 / 2,
                    margin: 2,
                  },
                  barWidthLateral,
                ]}
              />
            </View>
          </ImageBackground>
          <View style={{ paddingLeft: 12, paddingRight: 12 }}>
            <Text style={{ fontWeight: 'bold', color: '#fff' }}>{title}</Text>
            <Text style={{ color: '#fff' }}>{artist}</Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
    );
  };

  coverRed = el => {
    let {
      cover,
      barWidthCenter,
      barWidthLateral,
      title,
      artist,
      backgroundColor,
      color,
    } = el;
    return (
      <TouchableWithoutFeedback onPress={() => this.onPress()}>
        <Animated.View
          style={[
            {
              backgroundColor: backgroundColor,
              flexDirection: 'row',
              //alignItems: 'center',
              //justifyContent: 'center',
              borderRadius: 4,
              padding: 4,
            },
          ]}>
          <ImageBackground
            source={{
              uri: cover,
            }}
            imageStyle={{ borderRadius: 4 }}
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'center',
              height: size,
              width: size,
            }}>
            <Animated.View
              style={[
                {
                  backgroundColor: 'rgba(255,255,255,1)',
                  width: 5,
                  borderRadius: 5 / 2,
                  margin: 2,
                },
                barWidthLateral,
              ]}
            />
            <Animated.View
              style={[
                {
                  backgroundColor: 'rgba(255,255,255,1)',
                  width: 5,
                  borderRadius: 5 / 2,
                  margin: 2,
                },
                barWidthCenter,
              ]}
            />
            <Animated.View
              style={[
                {
                  backgroundColor: 'rgba(255,255,255,1)',
                  width: 5,
                  borderRadius: 5 / 2,
                  margin: 2,
                },
                barWidthLateral,
              ]}
            />
          </ImageBackground>
          <View style={{ paddingLeft: 12, paddingRight: 12 }}>
            <Text style={{ fontWeight: 'bold', color }}>{title}</Text>
            <Text style={{ color }}>{artist}</Text>
          </View>
        </Animated.View>
      </TouchableWithoutFeedback>
    );
  };

  render() {
    let { type, title, artist, cover } = this.props;
    if (type != 'normal' && type != 'transparent' && type != 'big')
      type = 'transparent';
    let barWidthCenter = {
      height: this.heightCenter,
    };
    let barWidthLateral = {
      height: this.heightLateral,
    };
    let backgroundColor =
      type == 'normal' ? 'rgba(255,255,255,1)' : 'rgba(255,255,255,0.5)';
    let color = type == 'normal' ? '#000' : '#fff';
    var el = {
      cover,
      barWidthCenter,
      barWidthLateral,
      title,
      artist,
      backgroundColor,
      color,
    };
    if (type == 'big') return this.coverBig(el);
    return this.coverRed(el);
  }
}