react-jinke-music-player 点击的时候,获取播放进度
时间: 2023-06-27 12:06:20 浏览: 144
可以使用react-jinke-music-player提供的onTimeUpdate回调函数来获取播放进度。具体做法如下:
首先,在组件中定义一个state来存储当前播放时间,如下所示:
```javascript
import React, { useState } from 'react';
import ReactJkMusicPlayer from 'react-jinke-music-player';
import 'react-jinke-music-player/assets/index.css';
function MusicPlayer() {
const [currentTime, setCurrentTime] = useState(0);
const handleTimeUpdate = (currentTime, duration) => {
setCurrentTime(currentTime);
};
return (
<ReactJkMusicPlayer
audioLists={[
{
name: 'Song Name',
singer: 'Singer Name',
musicSrc: 'http://music.163.com/song/media/outer/url?id=xxx.mp3',
},
]}
onTimeUpdate={handleTimeUpdate}
/>
);
}
export default MusicPlayer;
```
在上面的代码中,我们定义了一个叫做currentTime的state来存储当前播放时间,然后在handleTimeUpdate回调函数中更新它。
接下来,在ReactJkMusicPlayer组件中添加onTimeUpdate回调函数,并将它绑定到handleTimeUpdate函数上。在handleTimeUpdate函数中,我们可以获取到当前播放时间,并更新state。
最后,在组件中使用currentTime state来显示当前播放时间,如下所示:
```javascript
function MusicPlayer() {
const [currentTime, setCurrentTime] = useState(0);
const handleTimeUpdate = (currentTime, duration) => {
setCurrentTime(currentTime);
};
return (
<div>
<ReactJkMusicPlayer
audioLists={[
{
name: 'Song Name',
singer: 'Singer Name',
musicSrc: 'http://music.163.com/song/media/outer/url?id=xxx.mp3',
},
]}
onTimeUpdate={handleTimeUpdate}
/>
<p>Current Time: {currentTime}</p>
</div>
);
}
```
在上面的代码中,我们在组件中添加了一个p标签,用来显示当前播放时间。注意,currentTime的单位是秒。
阅读全文