react-jinke-music-player 获取当前播放位置
时间: 2024-01-04 15:03:31 浏览: 200
react-music-player:React,TS的音乐播放插件,歌词同步功能,适配PC和移动端;一个带有React和Typescript的音乐播放器,可用于手机和PC
3星 · 编辑精心推荐
要获取 react-jinke-music-player 组件的当前播放位置,可以使用该组件的 ref 对象,然后调用其 getCurrentTime() 方法来获取当前播放的时间。示例如下:
```jsx
import React, { Component } from 'react';
import ReactJkMusicPlayer from 'react-jinke-music-player';
import 'react-jinke-music-player/assets/index.css';
class App extends Component {
constructor(props) {
super(props);
this.musicPlayerRef = React.createRef();
}
handleGetCurrentTime = () => {
const currentTime = this.musicPlayerRef.current.audio.currentTime;
console.log(currentTime);
}
render() {
const musicList = [{
name: 'Despacito',
singer: 'Luis Fonsi',
musicSrc: 'http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3',
cover: 'http://res.cloudinary.com/alick/image/upload/v1502689731/Despacito_uvolhp.jpg',
}];
return (
<div>
<ReactJkMusicPlayer
ref={this.musicPlayerRef}
audioLists={musicList}
/>
<button onClick={this.handleGetCurrentTime}>获取当前播放位置</button>
</div>
);
}
}
export default App;
```
在上面的示例中,我们创建了一个名为 musicPlayerRef 的 ref 对象,并将其传递给了 ReactJkMusicPlayer 组件。然后,在 handleGetCurrentTime 方法中,我们使用 ref 对象获取了当前播放时间,并将其打印到控制台中。最后,在组件的 render 方法中,我们创建了一个按钮,用于触发 handleGetCurrentTime 方法。
阅读全文