React Native (一) react-native-video实现音乐播放器和进度条的功能

React Native (一) react-native-video实现音乐播放器和进度条的功能

功能:

1.卡片滑动切歌

2.显示进度条

效果图:

第三方组件:

1.react-native-video

Github地址:https://github.com/react-native-community/react-native-video

2.react-native-animated-tabs

Github地址:https://github.com/philipshurpik/react-native-animated-tabs

下载方式:

Using npm:

npm install --save react-native-video
npm install --save react-native-animated-tabs

or using yarn:

yarn add react-native-video
yarn add react-native-animated-tabs

如果RN版本>=0.60,是自动link的,如果在0.60以下则需要手动link

运行 `react-native link react-native-video` 连接react-native-video库

react-native-animated-tabs同上

卡片滑动功能

1.导入需要的组件

import AnimatedTabs from "react-native-animated-tabs";

2.使用组件

 <AnimatedTabs
          panelWidth={getPanelWidth()}
          activePanel={this.state.activePanel}
          onAnimateFinish={activePanel => this.setState({ activePanel })}
        >
        /**
        此处放你的卡片
        <View><Image source={...}/></View>
        ...
        */
  </AnimatedTabs>

3.按钮切换卡片

 <View style={styles.buttons}>
          <TouchableOpacity
            style={styles.text}
            onPress={() => this.goToPanel(-1)}
          >
            <Text>上一首歌</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.text}
            onPress={() => this.goToPanel(1)}
          >
            <Text>下一首歌</Text>
          </TouchableOpacity>

4.goToPanel()函数

goToPanel(direction) {
    const nextPanel = this.state.activePanel + direction;

    if (nextPanel >= 0 && nextPanel < panelsCount) {
      this.setState({ activePanel: nextPanel });
    }
  }
}

这时候就可以实现滑动卡片功能了

示例图:

使用react-native-video音乐插入

1.导入需要的组件和音乐

import Video from "react-native-video";
import url1 from "../static/video/徐小明-渔歌.mp3";

2.使用组件

<Video
     source={require('./background.mp4')} // 视频的URL地址,或者本地地址
     //source={require('./music.mp3')} // 可以播放音频
    //source={{uri:'http://......'}}
     ref='player'
     rate={this.state.isPlay?1:0}                   // 控制暂停/播放,0 代表暂停paused, 1代表播放normal.
     volume={1.0}
    // 声音的放声音的放大倍数大倍数,0 为静音  ,1 为正常音量 ,更大的数字表示放大的倍数
     muted={false}                  // true代表静音,默认为false.
     paused={false}                 // true代表暂停,默认为false
     resizeMode="contain"           // 视频的自适应伸缩铺放行为,contain、stretch、cover
     repeat={false}                 // 是否重复播放
     playInBackground={false}       // 当app转到后台运行的时候,播放是否暂停
     playWhenInactive={false}       // [iOS] Video continues to play when control or notification center are shown. 仅适用于IOS
     onLoadStart={this.loadStart}   // 当视频开始加载时的回调函数
     onLoad={this.setDuration}      // 当视频加载完毕时的回调函数
     onProgress={this.setTime}      //  进度控制,每250ms调用一次,以获取视频播放的进度
     onEnd={this.onEnd}             // 当视频播放完毕后的回调函数
     onError={this.videoError}      // 当视频不能加载,或出错后的回调函数
     style={styles.backgroundVideo}
                  />

3.我设置组件的一些属性

 <Video
            ref={video => (this.player = video)}
            source={SONGS[this.state.activePanel].url}
            ref="video"
            paused={this.state.paused}
            onLoad={data => this.setDuration(data)}
            volume={1.0}
            paused={false}
            onEnd={() => this.goToPanel(1)}
            playInBackground={true}
            onProgress={e => this.setTime(e)}
            playWhenInactive={true}
          />

4.用到的函数

 constructor() {
    super();

    this.state = {
      activePanel: 0,                   //当前active的面板
      activeSong: SONGS[0],             //正在播放的歌
      currentTime: 0.0,                 //当前播放的时间
      paused: 1.0,                      //播放
      sliderValue: 0,                   //进度条的进度
      duration: 0.0                     //总时长
    };
  }
  //格式化音乐播放的时间为0:00
  formatMediaTime(duration) {
    let min = Math.floor(duration / 60);
    let second = duration - min * 60;
    min = min >= 10 ? min : "0" + min;
    second = second >= 10 ? second : "0" + second;
    return min + ":" + second;
  }

  //设置进度条和播放时间的变化
  setTime(data) {
    let sliderValue = parseInt(this.state.currentTime);
    this.setState({
      slideValue: sliderValue,
      currentTime: data.currentTime
    });
  }

    //设置总时长
  setDuration(duration) {
    this.setState({ duration: duration.duration });
  }

进度条的配置

 <Slider
            style={styles.slider}
            value={this.state.slideValue}
            maximumValue={this.state.duration}
            step={1}
            onValueChange={value => this.setState({ currentTime: value })}
          />

原文地址:https://www.cnblogs.com/Crystal-Zh/p/11263367.html

时间: 2024-10-12 22:40:06

React Native (一) react-native-video实现音乐播放器和进度条的功能的相关文章

Android——音乐播放器完善——进度条显示当前播放进度,加可拖动进度条(未待解决完问题)

效果: 问题:可拖动进度条随进度条移动时,会致使音乐卡顿(待解决) xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:l

qml 音乐播放器的进度条

进度条采用qml的Slider组件 样式什么的,网上很多.我就不列举了.接下来主要说明,进度条是怎样按秒移动的. Slider { id: control    value: 0 stepSize: 0.01       onValueChanged: { txt_time_start.text =formation(control.value) txt_time_end.text = formation(maximumValue); }}//timer启动   Timer{ id:time r

音乐播放器项目计划进度安排

音乐播放器项目计划进度安排 时间 任务分解 完成内容——代码(类.方法等) 界面 逻辑功能 第十三周 搭建用户界面总体框架(菜单,模块) SoundPlayer GUI.java makeFrame() 第十三周 功能:在界面中实现导入磁盘文件,列表的功能 SoundPlayer GUI.java 第十三周 功能:筛选文件类型 SoundPlayer GUI.java 第十四周 基本播放功能的实现 SoundPlayer EngIne.java 第十五周 基本拓展功能的实现 SoundPlaye

实战React音乐播放器

上篇文章<一步一步实战HTML音乐播放器>中,我用HTML+JS + CSS的方式一步步实现了一个音乐播放器,因为最近接触了一下React,感觉挺不错的,在这里我用React的方式实现一个同样的音乐播放器. 播放器功能 自动显示 专辑图片.歌手名.歌曲名.专辑名 显示播放器进度条 音乐播放暂停.上一曲.下一曲 实时显示播放时间.播放总长度 歌曲播放完后,自动切换下一曲 播放器效果 React 环境准备 在这个小项目中,不再使用传统的构建React的方式来搭建环境了,这里用一种很方便的小工具来实

【程序开发小记】VB.NET音乐播放器

写在前面的话: 为了营造一个很好的交流学习的环境,也是为了迎合学校毕业设计的需求,开通了博客园.在下学期伊始,会每星期更新毕业设计的进度.博客业已开通,为了交流学习,要只是更新毕业设计的进度显得有些做作.博主并不是好看书时写些小评的主儿,遂不知有和内容好献于此,只得将之前课程中或是实习时开发的程序在此做个简述. 因这些项目也是博主心血,也是怕某些学弟学妹直接搬用引发事端,不便将源码原封不动摆在这里,在此只做简要说明. 若有意愿交流学习,可以在评论或是私信留下联系方式. 话不多说,接下来直奔主题.

Andriod小项目——在线音乐播放器

Android在线音乐播放器 从大一开始就已经开始自学Java和Android了,到现在差不多有一年了. 终于到了开始做项目实战的阶段了.就先DIY个在线音乐播放器. 实现了以下功能: 这个播放器可以从本机电脑搭建的简易服务器里异步读取并解析json数据,播放音乐,实现音乐切换,时间显示,以及显示播放进度. 程序有三个界面,启动画面,音乐列表,播放器页面,可以通过音乐列表点击进入到播放界面. 这篇文章只大概写了一下实现的思路,描述了一些关键的地方. 文章最后还提供了源代码,可以在文章结尾处  下

Android音乐播放器源码(歌词.均衡器.收藏.qq5.0菜单.通知)

Android音乐播放器(歌词.均衡器.收藏.qq5.0菜单.通知) 一款Android音乐播放器源码,基本功能都实现了 qq5.0菜单(歌词.均衡器.收藏.qq5.0菜单.通知) 只有向右滑动出现,菜单键和指定按钮都还没有添加. 下载地址:http://www.devstore.cn/code/info/1144.html 运行截图:     热门源码下载: 高仿京东商城 Android快速开发不可或缺的11个工具类 Android快速开发框架LoonAndroid Android应用源码比较

【黑马Android】(11)音乐播放器/视频播放器/照相机/常见对话框/notification通知/样式和主题/帧动画/传感器/应用程序反编译与安装

音乐播放器api <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:or

迷你音乐播放器v1.0正式上线!

迷你音乐播放器V1.0正式上线! 功能: 1.随机播放切换开关 2.歌曲为服务器本地音乐 3.网上搜索功能暂不支持...看下图 简单戳戳感受一下吧.. 快来一起分享吧~~~GitHub(戳我)   原文地址:https://www.cnblogs.com/yadongliang/p/10336409.html