简体中文

音乐播放器

音乐播放器。

基础
import React, {Component} from 'react';
import {AudioPlayer} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

const songList = [
  {
    src: 'http://oekm6wrcq.bkt.clouddn.com/時間列車.mp3',
    poster: 'http://oekm6wrcq.bkt.clouddn.com/時間列車.jpg',
    title: '時間列車',
    artist: 'supercell'
  },
  {
    src: 'http://oekm6wrcq.bkt.clouddn.com/white-moon-and-smiling-sun.mp3',
    poster: 'http://oekm6wrcq.bkt.clouddn.com/white-moon-and-smiling-sun.jpg',
    title: '白い月、微笑んだ太陽',
    artist: '中恵光城'
  },
  {
    src: 'http://oekm6wrcq.bkt.clouddn.com/Ordinary World.ogg',
    poster: 'http://oekm6wrcq.bkt.clouddn.com/Ordinary World.jpg',
    title: 'Ordinary World',
    artist: '仲村芽衣子'
  }
];

/**
 * @en
 * Base
 *
 * Base example.
 *
 * @cn
 * 基础
 *
 * 基础例子。
 *
 */
export default class ExampleBase extends Component {
  render() {
    return (
      <div>
        <ExampleBlock>
          <AudioPlayer
            list={songList}
            defaultPoster={'http://activity.hdslb.com/blackboard/rhyme/images/29k5y2l840.gif'}
          >
            1
          </AudioPlayer>
        </ExampleBlock>
      </div>
    );
  }
}

基础例子。

時間列車
時間列車 - supercell

00:00

00:00

  • 時間列車 - supercell
  • 白い月、微笑んだ太陽 - 中恵光城
  • Ordinary World - 仲村芽衣子

属性说明

属性名 类型 默认值 说明
list arrayOf [] 歌单
autoPlay bool false 是否自动播放
mode enum:
 'random'
 'repeat'
 'normal'
'normal' 播放模式
volume number 1 音量
currentIndex number 0 当前歌曲索引
currentTime number 0 当前的currentTime
defaultPoster string 默认封面

未在文档中说明的属性将会被自动加到根元素或form元素上。