【问题标题】:How to pause track at certain duration using react-native-track-player如何使用 react-native-track-player 在特定时间暂停曲目
【发布时间】:2020-04-25 17:21:28
【问题描述】:

文件:DataList.json

[
  {
    "id": "abcd-001",
    "title": "Push Ups",
    "image": "imageOne",
    "description": "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. ",
    "duration": 10,
    "sets": "",
    "url" : "../assets/track1.mp3"
    "break": 40
  },
  {
    "id": "abcd-002",
    "title": "Pull Ups",
    "image": "imageTwo",
    "description": "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. ",
    "duration": 30,
    "sets": "",
    "url" : "../assets/track2.mp3"
    "break": 40
  },
]

组件Track.js

useEffect(() => {
    TrackPlayer.setupPlayer();
    TrackPlayer.updateOptions({
      stopWithApp: true,
      capabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE,
        TrackPlayer.CAPABILITY_STOP,
        TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
      ],
      compactCapabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE,
      ],
    });
  }, []);

  const togglePlayBack = async () => {
    await TrackPlayer.add({
      title: title,
      id: id,
      url: require('../assets/audio/track1.mp3'),
      artist: 'Imran Sayed',
      duration: duration,
    });
  };

     <TouchableOpacity style={styles.main}>
        <View style={styles.imgContainer}>
          <Image source={Images[`${image}`]} style={styles.image} />
        </View>
        <View style={styles.info}>
          <Text style={styles.text}> {title} </Text>
          <Text style={styles.description}> {description} </Text>
          <Text style={styles.duration}> Duration - {duration} </Text>
          <Button
            color="darkslateblue"
            title="Start"
            onPress={togglePlayBack}
          />
        </View>
      </TouchableOpacity>

当音乐时长等于曲目的 DataList.json 时长时,我找不到任何暂停音乐的方法。

音乐应暂停,并应在指定的持续时间后恢复。 任何帮助将不胜感激!

【问题讨论】:

    标签: javascript reactjs react-native react-native-track-player


    【解决方案1】:

    解决办法

    const progress = TrackPlayer.useTrackPlayerProgress();
    
    const getSectionDone = () => {
      if (progress.position > 5) {
        // to ensure that music is playing
        if (progress.position === progress.duration) {
          // finished
        }
      }
    };
    

    【讨论】:

    • 为什么要让它成为一个 const 箭头函数?没有this 保存,只需将其设为带有progress 参数的普通函数,这样您就可以为任何可能想要的progress 对象调用它?
    • 另外请注意,我必须更正您的代码,因为您说 if (progress.position = progress.duration) 这是一个作业,并且非常错误。
    • 哦,我真的为我的情况写了单 (=) 吗?我很抱歉,伙计。半夜我的头脑很迟钝
    • 听起来很酷,但问题是我无法“导入 useTrackPlayerProgress()”。我猜不再支持 Hooks 了?有没有办法使用这个。? :(
    • 你没有import useTrackPlayerProgress(),这在任何方面都不是有效的JS:你从文件中导入thin,例如import { Tracker } from "tracker" - 你所展示的试图从无处导入一些东西,并且你在导入过程中将它作为一个函数调用,所以这些都没有意义,也不是这个答案告诉你要做的.
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-12-18
    • 1970-01-01
    • 2022-12-18
    • 1970-01-01
    • 2022-07-20
    • 2022-10-13
    相关资源
    最近更新 更多