样式请自己定义哦~
需要其他功能请自行添加!

// 组件调用
<Audio src={src地址} id={srcID}/>

audio属性

  • src 歌曲的路径

  • preload 是否在页面加载后立即加载(设置autoplay后无效)

  • controls 显示audio自带的播放控件

  • loop 音频循环

  • autoplay 音频加载后自动播放

  • currentTime 音频当前播放时间

  • duration 音频总长度

  • ended 音频是否结束

  • muted 音频静音为true

  • volume 当前音频音量

  • readyState 音频当前的就绪状态

audio事件

  • abort 当音频/视频的加载已放弃时

  • canplay 当浏览器可以播放音频/视频时

  • canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时

  • durationchange 当音频/视频的时长已更改时

  • emptied 当目前的播放列表为空时

  • ended 当目前的播放列表已结束时

  • error 当在音频/视频加载期间发生错误时

  • loadeddata 当浏览器已加载音频/视频的当前帧时

  • loadedmetadata 当浏览器已加载音频/视频的元数据时

  • loadstart 当浏览器开始查找音频/视频时

  • pause 当音频/视频已暂停时

  • play 当音频/视频已开始或不再暂停时

  • playing 当音频/视频在已因缓冲而暂停或停止后已就绪时

  • progress 当浏览器正在下载音频/视频时

  • ratechange 当音频/视频的播放速度已更改时

  • seeked 当用户已移动/跳跃到音频/视频中的新位置时

  • seeking 当用户开始移动/跳跃到音频/视频中的新位置时

  • stalled 当浏览器尝试获取媒体数据,但数据不可用时

  • suspend 当浏览器刻意不获取媒体数据时

  • timeupdate 当目前的播放位置已更改时

  • volumechange 当音量已更改时

  • waiting 当视频由于需要缓冲下一帧而停止

组件结构

 <div className="audioBox">
<audio
id={`audio${id}`}
src={src}
preload={true}
onCanPlay={() => this.controlAudio('allTime')}
onTimeUpdate={(e) => this.controlAudio('getCurrentTime')}
>
您的浏览器不支持 audio 标签。
</audio>
<i
className={isPlay ? 'pause' : 'play'}
onClick={() => this.controlAudio(isPlay ? 'pause' : 'play')}
/>
<span className="current">
{this.millisecondToDate(currentTime)+'/'+this.millisecondToDate(allTime)}
</span>
<input
type="range"
className="time"
step="0.01"
max={allTime}
value={currentTime}
onChange={(value) => this.controlAudio('changeCurrentTime',value)}
/>
<i
className={isMuted ? 'mute' : 'nomute'}
onClick={() => this.controlAudio('muted')}
/>
<input
type="range"
className="volume"
onChange={(value) => this.controlAudio('changeVolume',value)}
value={isMuted ? 0 : volume}
/>
</div>

组件javascript

  constructor(props) {
super(props)
this.state = {
isPlay: false,
isMuted: false,
volume: 100,
allTime: 0,
currentTime: 0
}
} millisecondToDate(time) {
const second = Math.floor(time % 60)
let minite = Math.floor(time / 60)
// let hour
// if(minite > 60) {
// hour = minite / 60
// minite = minite % 60
// return `${Math.floor(hour)}:${Math.floor(minite)}:${Math.floor(second)}`
// }
return `${minite}:${second >= 10 ? second : `0${second}`}`
} controlAudio(type,value) {
const { id,src } = this.props
const audio = document.getElementById(`audio${id}`)
switch(type) {
case 'allTime':
this.setState({
allTime: audio.duration
})
break
case 'play':
audio.play()
this.setState({
isPlay: true
})
break
case 'pause':
audio.pause()
this.setState({
isPlay: false
})
break
case 'muted':
this.setState({
isMuted: !audio.muted
})
audio.muted = !audio.muted
break
case 'changeCurrentTime':
this.setState({
currentTime: value
})
audio.currentTime = value
if(value == audio.duration) {
this.setState({
isPlay: false
})
}
break
case 'getCurrentTime':
this.setState({
currentTime: audio.currentTime
})
if(audio.currentTime == audio.duration) {
this.setState({
isPlay: false
})
}
break
case 'changeVolume':
audio.volume = value / 100
this.setState({
volume: value,
isMuted: !value
})
break
}
}

基于react的audio组件的更多相关文章

  1. 如何基于 React 封装一个组件

    如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...

  2. 基于react hooks,zarm组件库配置开发h5表单页面

    最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...

  3. 使用CRA开发的基于React的UI组件发布到内网NPM上去

    前言:构建的ES组件使用CNPM发布内网上过程 1. 使用Create-React-APP开的组件 如果直接上传到NPM,你引用的时候会报: You may need an appropriate l ...

  4. RSuite 一个基于 React.js 的 Web 组件库

    RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...

  5. 基于React Native的Material Design风格的组件库 MRN

    基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...

  6. 基于 React 实现一个 Transition 过渡动画组件

    过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...

  7. 基于 react 的Java web 应用—— 组件复用(后续需更新)

    前言 实习第二周,被告知要用React与导师进行基于React的Javaweb 的开发,jinzhangaaaaa~由于React 这款框架没学过,看了一峰老师的基础入门教程,硬着头皮开始上了... ...

  8. 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。

    react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...

  9. 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer

    基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...

随机推荐

  1. WPS:公式在中间,编号靠右

    1.新建表格1*3 2.在中间单元格内输入公式,在右边单元格中输入编号 3.在"开始"菜单栏找到"居中"和"靠右"两个按钮,给中间单元格设置 ...

  2. ROS入门介绍

    1.ROS版本介绍 ROS版本:(已经推出数十个版本) 2013 ------> Hydro 2014 ------> Indigo (对应Ubuntu14.04) (现在已经基本废弃) ...

  3. docker入门-Dockerfile入门

    1.dockerfile 构建基础命令 2. 构建镜像命令 Usage: docker image build [OPTIONS] PATH | URL | -Options:-t, --tag li ...

  4. GBDT 梯度提升决策树简述

    首先明确一点,gbdt 无论用于分类还是回归一直都是使用的CART 回归树.不会因为我们所选择的任务是分类任务就选用分类树,这里面的核心是因为gbdt 每轮的训练是在上一轮的训练的残差基础之上进行训练 ...

  5. 安装xpath helper方便进行爬虫

    安装xpath helper方便进行爬虫 因为我使用的是edge浏览器,扩展商店搜索不到xpath-helper,但是我不甘心,取下载源扩展直接放在edge中试试 下载XPath helper的源码 ...

  6. 【持续更新】Git使用指南

    Tutorial from cs61B 1. 理解Git的不同视角 文件状态图 从状态视角理解git: 一个文件有4种状态, 状态转换如图所示 从存储视角理解git: 工作区:电脑里能看到的目录 暂存 ...

  7. VirtualBox 共享文件夹设置

    1. 安装VirtualBox的增强功能 2. 设置共享文件夹 参考:VirtualBox主机与虚拟机文件夹共享

  8. springboot Redistemplate的execute和 executePipelined

    springboot 的 RedisTemplate 的 execute 和 executePipelined 功能的区别 1.execute 以下是 springboot 官网原文: Redis p ...

  9. 统计学中数据分布的偏度(skewness)和峰度(kurtosis)

  10. 05tensorflow分布式会话

    一. tensorflow分布式 1.     概念 分布式Tensorflow是由高性能的gRPC框架作为底层技术来支持的.这是一个通信框架gRPC(google remote procedure ...