https://github.com/newraina/meplayer

一款简洁的HTML5音乐播放器
https://github.com/newraina/meplayer

Last synced: 10 months ago
JSON representation

一款简洁的HTML5音乐播放器

• Host: GitHub
• URL: https://github.com/newraina/meplayer
• Owner: newraina
• Created: 2016-02-06T15:26:35.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2018-03-17T06:22:13.000Z (over 8 years ago)
• Last Synced: 2025-05-03T04:36:57.253Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 6.38 MB
• Stars: 186
• Watchers: 6
• Forks: 32
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# mePlayer

[![npm](https://img.shields.io/npm/v/npm.svg)](https://www.npmjs.com/package/meplayer)

一款简洁的HTML5音乐播放器。内置两套主题，可在运行时一键切换，[点我在线预览](http://newraina.github.io/mePlayer/demo)

![](demo/toggleTheme.gif)

## 主题说明

### 默认主题

- 有歌词时滚动显示歌词，无歌词时显示模拟频谱动画

- 播放中鼠标悬停在界面上滑动滚轮可调节音量，音量大小用音量条表示

![](demo/default-theme.gif)

![](demo/default-theme-nolrc.gif)

### 迷你主题

- 去掉了大部分控件，仅保留音量调节和播放暂停按钮

- 播放中鼠标悬停在界面上滑动滚轮可调节音量，音量大小用音量图标透明度表示

![](demo/mini-theme.gif)

## 使用方法

- 引入`dist`文件夹中相关文件，或者`npm install meplayer`

- 初始化

```javascript

mePlayer({

    theme: '可选，不指定时为默认主题，值为"mini"时为迷你版主题',

    music : {

        src   : '音乐文件地址',

        title : '歌名',

        author: '歌手名',

        cover : '封面路径',

        lrc   : '歌词字符串：[00:24.600]温柔的晚风\n[00:27.830]轻轻吹过 爱人的梦中\n ...'

    },

    target: '放置播放器的DOM容器，如: .music',

    autoplay: false // 是否自动播放

});

```

- 运行中可使用`meplayer.play()`和`meplayer.pause()`手动播放暂停

- `meplayer.toggleTheme()`可一键切换主题

## 致谢

- 制作过程中参考了 [APlayer](https://github.com/DIYgod/APlayer) 的部分代码

- UI设计参考了 [bottom-music-player](https://dribbble.com/shots/2365362-A-or-B-Bottom-music-player-dashboard)