音乐播放器。
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>
);
}
}
基础例子。
00:00
00:00
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
list | arrayOf | [] | 歌单 |
autoPlay | bool | false | 是否自动播放 |
mode | enum: 'random' 'repeat' 'normal' |
'normal' | 播放模式 |
volume | number | 1 | 音量 |
currentIndex | number | 0 | 当前歌曲索引 |
currentTime | number | 0 | 当前的currentTime |
defaultPoster | string | 默认封面 |
未在文档中说明的属性将会被自动加到根元素或form元素上。