基于React 的audio音频播放组件, 自定义播放/暂停按钮、进度条调节、音量调节、倍速播放。
组件代码：AudioPlay.js
import React, { Component } from "react"; class App extends Component { constructor(props) { super(props); this.state = { rateList: [1.0, 1.25, 1.5, 2.0], playRate: 1.0, isPlay: false, isMuted: false, volume: 100, allTime: 0, currentTime: 0, }; } componentDidMount() {} formatSecond(time) { const second = Math.floor(time % 60); let minite = Math.floor(time / 60); return `${minite}:${second >= 10 ? second : `0${second}`}`; } // 该视频已准备好开始播放 onCanPlay = () => { const { id } = this.props; const audio = document.getElementById(`audio${id}`); this.setState({ allTime: audio.duration, }); }; playAudio = () => { const { id } = this.props; const audio = document.getElementById(`audio${id}`); audio.play(); this.setState({ isPlay: true, }); }; pauseAudio = () => { const { id } = this.props; const audio = document.getElementById(`audio${id}`); audio.pause(); this.setState({ isPlay: false, }); }; onMuteAudio = () => { const { id } = this.props; const audio = document.getElementById(`audio${id}`); this.setState({ isMuted: !audio.muted, }); audio.muted = !audio.muted; }; changeTime = (e) => { const { value } = e.target; const { id } = this.props; const audio = document.getElementById(`audio${id}`); this.setState({ currentTime: value, }); audio.currentTime = value; if (value === audio.duration) { this.setState({ isPlay: false, }); } }; // 当前播放位置改变时执行 onTimeUpdate = () => { const { id } = this.props; const audio = document.getElementById(`audio${id}`); this.setState({ currentTime: audio.currentTime, }); if (audio.currentTime === audio.duration) { this.setState({ isPlay: false, }); } }; changeVolume = (e) => { const { value } = e.target; const { id } = this.props; const audio = document.getElementById(`audio${id}`); audio.volume = value / 100; this.setState({ volume: value, isMuted: !value, }); }; // 倍速播放 changePlayRate = (num) => { this.audioDom.playbackRate = num; this.setState({ playRate: num, }); }; render() { const { src, id } = this.props; const { isPlay, isMuted, volume, allTime, currentTime, rateList, playRate, } = this.state; return ( <div> <audio id=http://www.likecs.com/{`audio${id}`} src=http://www.likecs.com/{src} ref=http://www.likecs.com/{(audio) => { this.audioDom = audio; }} preload=http://www.likecs.com/{"auto"} onCanPlay=http://www.likecs.com/{this.onCanPlay} onTimeUpdate=http://www.likecs.com/{this.onTimeUpdate} > <track src=http://www.likecs.com/{src} kind="captions" /> </audio> {isPlay ? ( <div onClick=http://www.likecs.com/{this.pauseAudio}>暂停</div> ) : ( <div onClick=http://www.likecs.com/{this.playAudio}>播放</div> )} <div> <span> {this.formatSecond(currentTime) + "http://www.likecs.com/" + this.formatSecond(allTime)} </span> <input type="range" step="0.01" max=http://www.likecs.com/{allTime} value=http://www.likecs.com/{currentTime} onChange=http://www.likecs.com/{this.changeTime} /> </div> <div onClick=http://www.likecs.com/{this.onMuteAudio}>静音</div> <div> <span>音量调节：</span> <input type="range" onChange=http://www.likecs.com/{this.changeVolume} value=http://www.likecs.com/{isMuted ? 0 : volume} /> </div> <div> <span>倍速播放：</span> {rateList && rateList.length > 0 && rateList.map((item) => ( <button key=http://www.likecs.com/{item} style=http://www.likecs.com/{ playRate === item ? { border: "1px solid #188eff", color: "#188eff", } : null } onClick=http://www.likecs.com/{() => this.changePlayRate(item)} > {item} </button> ))} </div> </div> ); } } export default App; 组件引用 import Audio from "./AudioPlay"; <Audio src=http://www.likecs.com/{ "https://xxx.mp3" } id=http://www.likecs.com/{123} />