在 React Native 博览会中构建媒体播放器并获取歌曲的持续时间

Posted

技术标签:

【中文标题】在 React Native 博览会中构建媒体播放器并获取歌曲的持续时间【英文标题】:Building a Media Player in React Native expo and Getting duration of song 【发布时间】:2019-09-06 02:42:49 【问题描述】:

我正在 React Native 博览会中实现一个媒体播放器。我已经设计了我的播放器、播放歌曲、下一首和上一首歌曲功能,但我在获取歌曲的持续时间时遇到了问题,以便能够使用进度条显示歌曲的进度。

我已经通过https://docs.expo.io/versions/latest/sdk/audio/ 并没有找到任何关于如何获取文件的持续时间或如何获取任何可以帮助我实现进度条的信息。任何想法都非常受欢迎。

我正在试验的代码:

// Create new object from Expo.Audio.Sound
   this.soundObject = new Audio.Sound();
   await this.soundObject.loadAsync(url);
   await this.soundObject.playAsync();


   getCurrentItemArtistName = ()=> 
        return this.list[this.index].artistname;
    ;

   getCurrentItemCover = ()=> 
        return this.list[this.index].cover;
    ;

提前谢谢你

【问题讨论】:

到目前为止你有这个吗?世博会音频适合您吗? 【参考方案1】:

这对我有用。但它是在Sound 类组件中使用的。

CurrentDuration = async () => 
        const Mill = await this.soundObject.getStatusAsync();
        let p = Mill.positionMillis;
    return curr:p;
  ;

【讨论】:

【参考方案2】:

不过,我不确定您是否仍然感兴趣,请按照以下方法获取持续时间

const sound = new Audio.Sound();

try 

   const track = await sound.loadAsync(require('../../models/smw_bonus_game_end.mp3'));

   console.log(track.durationMillis); // Prints the duration in milliseconds

   catch (err) 
   console.log(err);
  ;

您可以获取加载文件后的持续时间


可以在对象中找到其他信息。使用下面相同的代码,尝试只打印 const track:

console.log(track);

它将打印一个对象如下:

 Object 
  "didJustFinish": false,
  "durationMillis": 3108,
  "hasJustBeenInterrupted": false,
  "isBuffering": false,
  "isLoaded": true,
  "isLooping": false,
  "isMuted": false,
  "isPlaying": false,
  "pitchCorrectionQuality": "Varispeed",
  "playableDurationMillis": 3108,
  "positionMillis": 0,
  "progressUpdateIntervalMillis": 500,
  "rate": 1,
  "shouldCorrectPitch": false,
  "shouldPlay": false,
  "uri": "THE URI OF THE FILE IN YOUR DEVICE",
  "volume": 1,

还有许多其他信息可用,如果您需要特定信息,请告诉我。

我希望这会有所帮助!

干杯,

【讨论】:

以上是关于在 React Native 博览会中构建媒体播放器并获取歌曲的持续时间的主要内容,如果未能解决你的问题,请参考以下文章

无法在博览会上调试/测试我的 react-native 应用程序

navigation.setOptions() 在 React Native(博览会环境)中不起作用

React Native - 在博览会弹出后安装博览会

React Native - 在博览会弹出后安装博览会

在博览会上的“npm runeject”之后无法运行 react-native 应用程序

如何在 React Native 中登录 YouTube 帐户以访问私人播放列表