是否可以下载音频文件并使用React Native Expo播放它？

Question

我将音频文件托管在服务器上，我希望我的应用程序在身份验证后可以访问。用户发送包含身份验证令牌的GET请求，然后服务器返回二进制音频数据。

据我所知，没有办法将此“ blob”作为音频文件保存到文件系统。当前在react-native中实现的抓取功能不支持Blob：link

...而且expo也不支持理想的react-native-fetch-blob库：link

此外，我看不到任何从服务器流式传输音频文件的方法。包含有expo的音频库允许从URL（例如http://example.com/myaudio.mp3）流式传输音频，但是我看不到将授权标头附加到请求的任何方法（例如“ Authorization”：“不记名[我的令牌]“）。

是否可以通过下载和保存音频Blob或从包含请求中包含授权标头的URL进行流传输来实现此目的？我可以将项目与世博会分离，但我想把它留作最后的手段。

Answer 1

是的。您需要使用expo公开的Audio模块来执行此操作。以下是从给定URL加载和播放音频文件所必须遵循的步骤。我还复制了我的组件代码，该代码也为我做同样的事情。

• 加载Expo暴露的音频模块

  import { Audio } from 'expo'

• 从中创建一个新的声音对象

  soundObject = new Audio.Sound()

• 异步加载文件

  await this.soundObject.loadAsync({ uri: this.props.source })

• 加载后，使用播放已加载的文件

  this.soundObject.playAsync()

以下是我为此编写的一个简单组件-

import React, { Component } from 'react';
import { View, TouchableNativeFeedback } from 'react-native';
import { Audio } from 'expo';

class AudioPlayer extends Component {
  constructor(props) {
    super(props);
    this.state = { isPlaying: false };

    this.loadAudio = this.loadAudio.bind(this);
    this.toggleAudioPlayback = this.toggleAudioPlayback.bind(this);
  }

  componentDidMount() {
    this.loadAudio();
  }

  componentWillUnmount() {
    this.soundObject.stopAsync();
  }

  async loadAudio() {
    this.soundObject = new Audio.Sound();
    try {
      await this.soundObject.loadAsync({ uri: this.props.source /* url for your audio file */ });
    } catch (e) {
      console.log('ERROR Loading Audio', e);
    }
  }

  toggleAudioPlayback() {
    this.setState({
      isPlaying: !this.state.isPlaying,
    }, () => (this.state.isPlaying
      ? this.soundObject.playAsync()
      : this.soundObject.stopAsync()));
  }

  render() {
    return (
      <TouchableNativeFeedback onPress={this.toggleAudioPlayback}>
        <View style={this.props.style}>
          {this.props.children}
        </View>
      </TouchableNativeFeedback>
    );
  }
}

export default AudioPlayer;