Just a simple and diligent HTML5 audio player made with love.
npm install ymplayer![npm]()
![devDependencies]()
![license]()
Just a simple and diligent HTML5 audio player made with ❤ :) (current version: 4)
You can install YMplayer from both _npm_ and _yarn_. (Yarn is a new package manager for Node.js developed by Facebook. It will be faster.)
``shell`
$ yarn add ymplayer # using yarn
$ npm install ymplayer # using npm
Or, via Git repository :
`shell`
$ git clone https://github.com/kirainmoe/ymplayer
$ cd ymplayer
$ npm install
Pay attention that YMPlayer used a dependency named node-sass may not be installed by npm successfully sometimes. To avoid that, run npm install -g cnpm && cnpm install node-sass yourself, or use npm run setup instead of command npm install.
Run in webpack dev-server mode:
`shell`
$ npm run serve
Run in dist mode:
`shell`
$ npm run demo
Have a look at https://kirainmoe.github.io/ymplayer/demo .
#### Easily render player for single page
There are two methods for you to render a player on your own web page. Both of them requires you to import ymplayer.js at first. This file is included in the dist/ directory. PS: Stylesheet has been injected in this Javascript file.
`html`
You can render a player component as we used to construct
`html
`
You are permitted to use `YMPlayer.render()` method to render a player in YMPlayer 4, just like this:
`javascript
/**
* render a YMPlayer component on your page.
*
* @param data {Array} musics' detail
* @param node {Object} HTML element in which new player will be put.
*/
YMPlayer.render([{
title: '',
artist: '',
cover: '',
src: '',
lyric: '',
translation: '' // if you do not need translation, delete this row.
}, {
// ......
}], document.getElementById('player'));
`
#### Use player in your own project
#### webpack
Install YMPlayer from npm, and import YMPlayer as an expoted class:
`javascript`
import YMPlayer from 'ymplayer';
#### RequireJS or other AMD mobule loader
`javascript`
require(['ymplayer'], function(YMPlayer) {
YMPlayer.render(opt);
});
#### Others
``html``
This will export YMPlayer to window:
`javascript``
window.YMPlayer.render(opt);
There are some project related to YMPlayer. They can help you construct YmPlayer on your site more easily.
- Typecho Plugin YmPlayer by @kokororin : https://github.com/kokororin/typecho-plugin-ymplayer
_ (:з」∠) _ Thanks to my friend for her help~.
You can find a detailed documentation about APIs, methods, specification, etc. on WiKi soon.
You can find most problems solution on WiKi. If not, please open an issue / pull a request whenever you face a problem or have some suggestions, or contact me at kirainmoe@gmail.com.
Thank those who have contributed to this project or solved problems: @frank-deng, @kokororin.
Thank those projects that make this player more easy and effective to be developed: Yeoman, generator-react-webpack as well as their dependence.
Finally, thanks to all of you for your likes, thanks to myself for the best code I have ever written.
!IE | !Chrome | !Firefox | !Opera | !Safari
--- | --- | --- | --- | --- |
IE 10+ ✔ | Chrome 24.0+ ✔ | Firefox 24.0+ ✔ | Opera 15.0+ ✔ | Safari 7.0+ ✔ |
PS: Because of the ClassList API, some elder browser can not be support well.
- [x] Can not parse [ti:] [ar:] [by:] [al:] solved : )
- [ ] Responsive design may not work well on Internet Explorer.
- [ ] Lyric balloon may not display normally.
If you have any good idea, just tell me, let me make it come true. I NEED YOUR HELP TO MAKE THIS PLAYER BETTER !!
- [x] Responsive design
- [x] Play list
- [x] Fullscreen mode (testing)
- [x] Rendering method of pure Javascript
- [ ] Right-click menu
- [ ] Support of different environment
The MIT License (MIT).