DMPlayer音乐播放器 - 基于SolidJS

低配置云服务器，首次加载速度较慢，请耐心等候

#### 演示地址

http://www.daelui.com/daelui/dmplayer/demo/index.html

#### 介绍

- DMPlayer(Dog Music Player) - 狗狗音乐播放器

- 可在Web页面使用，支持script引用与npm模式

- 可自定义布局(参照示例自行修改)，默认提供：mode： standard(标准，用于pc端)、mini(迷你，用于移动端)

- 可自行扩展

- 功能说明：

1. 播放列表展示：歌曲、歌手、专辑、时长

2. 封面展示

3. 歌词展示

4. 播放进度展示与调整

5. 音量调节与静音切换

6. 播放模式设置：列表循环、随机播放、单曲循环、顺序播放

#### 软件架构

- SolidJS + ES6

#### 安装步骤

npm install @daelui/dmplayer --save

#### 使用说明

##### 1. npm

<div class="player"></div>

import '@daelui/dmplayer/dist/style/dmplayer.css'

import DMPlayer from '@daelui/dmplayer'

new DMPlayer('.player', {

  sources: [

    {

      name: '回心转意',

      singer: '黑龙',

      url: `./assets/audio/回心转意 - 黑龙.mp3`,

      cover: './images/cover.jpg',

      album: '回心转意',

      duration: 297

    },

    {

      name: 'Faded',

      singer: 'Alan Walker',

      url: `./assets/audio/Faded - Alan Walker.mp3`,

      duration: 212

    }

  ]

})

##### 2. script

<link rel="stylesheet" href="dmplayer/dist/style/dmplayer.css">

<script src="dmplayer/dist/dmplayer.all.js"></script>

<div class="player"></div>


new DMPlayer('.player', {

  sources: [

    {

      name: '回心转意',

      singer: '黑龙',

      url: `./assets/audio/回心转意 - 黑龙.mp3`,

      cover: './images/cover.jpg',

      album: '回心转意',

      duration: 297

    },

    {

      name: 'Faded',

      singer: 'Alan Walker',

      url: `./assets/audio/Faded - Alan Walker.mp3`,

      duration: 212

    }

  ]

})

 

#### 文件说明

1. dmplayer.all.js：包含slidjs与solid-js/web所有子模块

2. dmplayer.standard.js：包含slidjs与solid-js/web部分使用的子模块

3. dmplayer.pure.js：排除了slidjs

git库：https://gitee.com/daelui/daelui/tree/master/packages/dmplayer