Ymplayer NPM | npm.io

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 kirainmoe@gmail.com.