YMPlayer

Just a simple and diligent HTML5 audio player made with ❤ :) (current version: 4)

Install

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.)

$ yarn add ymplayer    # using yarn
$ npm install ymplayer # using npm

Or, via Git repository :

$ 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 your local machine

Run in webpack dev-server mode:

$ npm run serve

Run in dist mode:

$ npm run demo

Online Demo

Have a look at https://kirainmoe.github.io/ymplayer/demo .

Usage

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.

<script type="text/javascript" src="./dist/ymplayer.js"></script>

You can render a player component as we used to construct tag in DOM:

<ymplayer>
    <song title="Your song title" artist="Your artist" cover="Album image src" src="Audio file src">
		<lyric>Your lyric here. If you do not have a raw lyric, delete this tag.</lyric>

		<translation>Translation should be put here. If you do not need a translation, delete this tag.</translation>
	</song>

	<!-- You can add far more musics by adding more <song> tag. -->
</ymplayer>

You are permitted to use YMPlayer.render() method to render a player in YMPlayer 4, just like this:

/**
 * 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:

import YMPlayer from 'ymplayer';

RequireJS or other AMD mobule loader

require(['ymplayer'], function(YMPlayer) {
    YMPlayer.render(opt);
});

Others

<script type="text/javascript" src="./dist/ymplayer.js"></script>

This will export YMPlayer to window:

window.YMPlayer.render(opt);

Related project

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~.

Developing & APIs

You can find a detailed documentation about APIs, methods, specification, etc. on WiKi soon.

Troubleshooting

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 [email protected].

Thanks

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.

Browser supports

| | | | --- | --- | --- | --- | --- | 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.

Known issues

• [x] Can not parse [ti:] [ar:] [by:] [al:] solved : )
• [ ] Responsive design may not work well on Internet Explorer.
• [ ] Lyric balloon may not display normally.

Other

If you have any good idea, just tell me, let me make it come true. I NEED YOUR HELP TO MAKE THIS PLAYER BETTER !!

Todo list

• [x] Responsive design
• [x] Play list
• [x] Fullscreen mode (testing)
• [x] Rendering method of pure Javascript
• [ ] Right-click menu
• [ ] Support of different environment

License

The MIT License (MIT).