1

我正在尝试为我的应用程序实现一个反应原生的音频播放器。这个播放器的目的是播放一些从 JSON 文件中获取的录音带。目前我成功地为它做了 UI，但没有任何功能。

做一些研究我发现我需要 react-native-track-player 包才能使其工作。但是，我真的很难理解文档。如果有人能给我一个提示，那就太好了。

我将附上播放器的代码：

import React, {Component} from 'react';
import {
  Text,
  StyleSheet,
  View,
  Image,
  SafeAreaView,
  TouchableOpacity,
} from 'react-native';
import {Slider} from 'react-native';
import Moment from 'moment';
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';

import {
  faCoffee,
  faArrowCircleLeft,
  faArrowAltCircleRight,
  faAngleDoubleRight,
  faAngleDoubleLeft,
  faStar,
  faArrowCircleRight,
  faArrowRight,
  faForward,
  faPlay,
  faBackward,
} from '@fortawesome/free-solid-svg-icons';

export default class App extends React.Component<Props> {
  state = {
    trackLength: 300,
    timeElapsed: '0:00',
    timeRemaining: '5:00',
  };

  changeTime = (seconds) => {
    this.setState({timeElapsed: Moment.utc(seconds * 1000).format('m:ss')});
    this.setState({
      timeRemaining: Moment.utc(
        (this.state.trackLength - seconds) * 1000,
      ).format('m:ss'),
    });
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View style={{alignItems: 'center'}}>
          <View style={{alignItems: 'center', marginTop: 24}}>
            <Text style={[styles.textLight, {fontSize: 12}]}>PLAYLIST</Text>
            <Text
              style={[
                styles.text,
                {fontSize: 15, fontWeight: '500', marginTop: 8},
              ]}>
              Meditation
            </Text>
          </View>

          <View style={styles.coverContainer}>
            <Image
              source={require('../../../assets/coverArt.jpg')}
              style={styles.cover}
            />
          </View>

          <View style={{alignItems: 'center', marginTop: 32}}>
            <Text style={[styles.textDark, {fontSize: 20, fontWeight: '500'}]}>
              Exhale
            </Text>
            <Text style={[styles.text, {fontSize: 16, marginTop: 8}]}>
              Cap Mare
            </Text>
          </View>
        </View>

        <View style={{margin: 32}}>
          <Slider
            minimumValue={0}
            maximumValue={this.state.trackLength}
            trackStyle={styles.track}
            thumbStyle={styles.thumb}
            minimumTrackTintColor="#93A8B3"
            onValueChange={(seconds) => this.changeTime(seconds)}
          />
          <View
            style={{
              marginTop: -12,
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}>
            <Text style={[styles.textLight, styles.timeStamp]}>
              {this.state.timeElapsed}
            </Text>
            <Text style={[styles.textLight, styles.timeStamp]}>
              {this.state.timeRemaining}
            </Text>
          </View>
        </View>

        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: 16,
          }}>
          <TouchableOpacity>
            <FontAwesomeIcon icon={faBackward} size={32} color="#93A8B3" />
          </TouchableOpacity>
          <TouchableOpacity style={styles.playButtonContainer}>
            <FontAwesomeIcon
              name="play"
              icon={faPlay}
              size={32}
              color="#3D425C"
            />
          </TouchableOpacity>
          <TouchableOpacity>
            <FontAwesomeIcon icon={faForward} size={32} color="#93A8B3" />
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#EAEAEC',
  },
  textLight: {
    color: '#B6B7BF',
  },
  text: {
    color: '#8E97A6',
  },
  textDark: {
    color: '#3D425C',
  },
  coverContainer: {
    marginTop: 32,
    width: 250,
    height: 250,
    shadowColor: '#5D3F6A',
    shadowOffset: {height: 15},
    shadowRadius: 8,
    shadowOpacity: 0.3,
  },
  cover: {
    width: 250,
    height: 250,
    borderRadius: 125,
  },
  track: {
    height: 2,
    borderRadius: 1,
    backgroundColor: '#FFF',
  },
  thumb: {
    width: 8,
    height: 8,
    backgroundColor: '#3D425C',
  },
  timeStamp: {
    fontSize: 11,
    fontWeight: '500',
  },
  playButtonContainer: {
    backgroundColor: '#FFF',
    borderColor: 'rgba(93, 63, 106, 0.2)',
    borderWidth: 16,
    width: 128,
    height: 128,
    borderRadius: 64,
    alignItems: 'center',
    justifyContent: 'center',
    marginHorizontal: 32,
    shadowColor: '#5D3F6A',
    shadowRadius: 30,
    shadowOpacity: 0.5,
  },
});

欢迎任何帮助。

好的，所以我设法播放并暂停了声音，但我很确定这不是正确的方法


TrackPlayer.setupPlayer().then(async () => {
  // Adds a track to the queue

  await TrackPlayer.add({
    id: 'trackId',
    url: require('../../../assets/track.mp3'),
    title: 'Track Title',
    artist: 'Track Artist',
  });

  let state = TrackPlayer.play();

  let trackId = await TrackPlayer.getCurrentTrack();
  let trackObject = await TrackPlayer.getTrack(trackId);
  // Starts playing it
  TrackPlayer.play();
});

export default class Player extends React.Component<Props> {
  pause = () => {
    TrackPlayer.pause();
  };
  play = () => {
    TrackPlayer.play();
  };
  meditationList = () => {
    const adress = this.props.route.params;

    return JSON.stringify(adress);
  };

  state = {
    trackLength: 300,
    timeElapsed: '0:00',
    timeRemaining: '5:00',
  };

  changeTime = (seconds) => {
    this.setState({timeElapsed: Moment.utc(seconds * 1000).format('m:ss')});
    this.setState({
      timeRemaining: Moment.utc(
        (this.state.trackLength - seconds) * 1000,
      ).format('m:ss'),
    });
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View style={{alignItems: 'center'}}>
          <View style={{alignItems: 'center', marginTop: 24}}>
            <Text style={[styles.textLight, {fontSize: 12}]} />

            <Text
              style={[
                styles.text,
                {fontSize: 15, fontWeight: '500', marginTop: 8},
              ]}>
              {/* {this.meditationList()} */}meditations
            </Text>
          </View>

          <View style={styles.coverContainer}>
            <Image
              source={require('../../../assets/coverArt.jpg')}
              style={styles.cover}
            />
          </View>

          <View style={{alignItems: 'center', marginTop: 32}}>
            <Text style={[styles.textDark, {fontSize: 20, fontWeight: '500'}]}>
              Exhale
            </Text>
            <Text style={[styles.text, {fontSize: 16, marginTop: 8}]}>sal</Text>
          </View>
        </View>

        <View style={{margin: 32}}>
          <Slider
            minimumValue={0}
            maximumValue={this.state.trackLength}
            trackStyle={styles.track}
            thumbStyle={styles.thumb}
            minimumTrackTintColor="#93A8B3"
            onValueChange={(seconds) => this.changeTime(seconds)}
          />
          <View
            style={{
              marginTop: -12,
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}>
            <Text style={[styles.textLight, styles.timeStamp]}>
              {this.state.timeElapsed}
            </Text>
            <Text style={[styles.textLight, styles.timeStamp]}>
              {this.state.timeRemaining}
            </Text>
          </View>
        </View>

        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: 16,
          }}>
          <TouchableOpacity>
            <FontAwesomeIcon icon={faBackward} size={32} color="#93A8B3" />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.playButtonContainer}
            onPress={this.pause}>
            <FontAwesomeIcon
              name="play"
              icon={faPlay}
              size={32}
              color="#3D425C"
            />
          </TouchableOpacity>
          <TouchableOpacity onPress={this.play}>
            <FontAwesomeIcon icon={faForward} size={32} color="#93A8B3" />
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }
}
4

0 回答 0