react-jinke-music-player 播放器监听歌曲切换

react-jinke-music-player 播放器提供了多个事件用于监听歌曲的切换。具体来说，你可以使用 onAudioPlay、onAudioPause、onAudioEnded、onAudioAbort、onAudioProgress、onAudioVolumeChange、onAudioError、onThemeChange 等事件来监听播放器的不同状态。

例如，如果你想在歌曲播放完成后执行某些操作，可以在组件中定义一个函数，然后在 onAudioEnded 事件中调用它：

import React from 'react';
import AudioPlayer from 'react-jinke-music-player';
import 'react-jinke-music-player/assets/index.css';

function MyAudioPlayer() {
  const handleSongEnd = () => {
    console.log('歌曲播放完成');
    // 执行其他操作
  };

  return (
    <AudioPlayer
      audioLists={audioLists}
      onAudioEnded={handleSongEnd}
    />
  );
}

类似地，你可以使用其他事件来监听播放器的不同状态，以便在合适的时候执行相应的操作。

相关问题

react-jinke-music-player 设置中文

react-jinke-music-player 是一款基于 React 的音乐播放器组件，支持多种音频格式和自定义样式。要将 react-jinke-music-player 设置为中文，可以按照以下步骤进行：

1. 安装 react-jinke-music-player 组件：

npm install react-jinke-music-player --save

2. 导入 react-jinke-music-player 组件：

import React from 'react';
import ReactDOM from 'react-dom';
import 'react-jinke-music-player/assets/index.css';
import Player from 'react-jinke-music-player';

3. 在组件中设置语言选项为中文：

const options = {
  ...
  defaultPlayMode: 'order',
  // 设置语言为中文
  playModeTexts: {
    order: '顺序播放',
    orderLoop: '列表循环',
    singleLoop: '单曲循环',
    shufflePlay: '随机播放'
  },
  ...
};

4. 在组件中使用 react-jinke-music-player：

class App extends React.Component {
  render() {
    return (
      <Player
        {...options}
        audioLists={audioLists}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

这样就可以将 react-jinke-music-player 设置为中文了。

react-jinke-music-player 文档

react-jinke-music-player 是一个基于 React 的音乐播放器组件，提供了丰富的配置选项和交互功能，支持多种音乐格式和音乐源。以下是 react-jinke-music-player 的文档：

### 安装

使用 npm 安装：

npm install react-jinke-music-player --save

或者使用 yarn 安装：

yarn add react-jinke-music-player

### 使用

import React from 'react';
import ReactDOM from 'react-dom';
import ReactJkMusicPlayer from 'react-jinke-music-player';
import 'react-jinke-music-player/assets/index.css';

ReactDOM.render(
  <ReactJkMusicPlayer
    audioLists={[
      {
        name: '此时此刻',
        singer: '许巍',
        musicSrc: 'http://www.170mv.com/kw/other.web.ra01.sycdn.kuwo.cn/resource/n2/128/78/30/3374853090.mp3',
        cover: 'http://img.5nd.com/2018/2018-7-13/640/cover/871c9477bfc246eaa43a3d26a2b36f2a.jpg',
      },
      {
        name: '夜曲',
        singer: '周杰伦',
        musicSrc: 'http://www.170mv.com/kw/other.web.rz01.sycdn.kuwo.cn/resource/n3/128/62/30/3831933686.mp3',
        cover: 'http://img.5nd.com/2018/2018-7-13/640/cover/871c9477bfc246eaa43a3d26a2b36f2a.jpg',
      },
    ]}
  />,
  document.getElementById('root')
);

### API

react-jinke-music-player 提供了多个配置选项和方法，以下是常用的 API：

#### 配置选项

- `audioLists`: 必填，音乐列表，类型为数组，每个元素包含以下属性：

- `name`: 必填，音乐名称，类型为字符串。
- `singer`: 选填，音乐演唱者，类型为字符串。
- `musicSrc`: 必填，音乐源地址，类型为字符串。
- `cover`: 选填，音乐封面地址，类型为字符串。

- `autoPlay`: 选填，是否自动播放，类型为布尔值，默认为 false。

- `defaultPlayMode`: 选填，默认播放模式，类型为字符串，默认为 'order'。可选值为：

- `order`: 顺序播放。
- `orderLoop`: 列表循环。
- `singleLoop`: 单曲循环。
- `shufflePlay`: 随机播放。

- `drag`: 选填，是否开启拖拽播放进度条，类型为布尔值，默认为 true。

- `seeked`: 选填，是否开启播放进度条拖拽结束后的回调，类型为布尔值，默认为 true。

- `showDownload`: 选填，是否显示下载按钮，类型为布尔值，默认为 true。

- `showThemeSwitch`: 选填，是否显示主题切换按钮，类型为布尔值，默认为 true。

- `showPlayMode`: 选填，是否显示播放模式切换按钮，类型为布尔值，默认为 true。

- `showReload`: 选填，是否显示重新加载按钮，类型为布尔值，默认为 true。

- `showLyric`: 选填，是否显示歌词面板，类型为布尔值，默认为 true。

- `showDestroy`: 选填，是否显示销毁按钮，类型为布尔值，默认为 false。

- `preload`: 选填，预加载音乐的数量，类型为数字，默认为 2。

- `remove`: 选填，删除音乐的回调，类型为函数。

- `onAudioPlay`: 选填，音乐播放的回调，类型为函数。

- `onAudioPause`: 选填，音乐暂停的回调，类型为函数。

- `onAudioEnded`: 选填，音乐播放结束的回调，类型为函数。

- `onAudioAbort`: 选填，音乐加载失败的回调，类型为函数。

- `getContainer`: 选填，渲染容器的回调，类型为函数。

- `glassBg`: 选填，是否开启毛玻璃背景，类型为布尔值，默认为 false。

- `remember`: 选填，是否记忆播放状态，类型为布尔值，默认为 false。

- `remove`: 选填，删除音乐的回调，类型为函数。

- `locale`: 选填，国际化配置，类型为对象，包含以下属性：

- `playModeText`: 播放模式文本，类型为对象，包含以下属性：
- `order`: 顺序播放文本，类型为字符串。
- `orderLoop`: 列表循环文本，类型为字符串。
- `singleLoop`: 单曲循环文本，类型为字符串。
- `shufflePlay`: 随机播放文本，类型为字符串。
- `controllerTitle`: 控制器标题，类型为字符串。
- `emptyLyricText`: 空歌词文本，类型为字符串。

#### 方法

- `playNext()`: 播放下一首音乐。

- `playPrev()`: 播放上一首音乐。

- `playIndex(index: number)`: 播放指定索引的音乐。

- `toggleMode()`: 切换播放模式。

- `togglePlay()`: 切换播放状态。

- `destroyPlayer()`: 销毁播放器。