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.)
$ 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 webpack dev-server mode:
$ npm run serve
Run in dist mode:
$ npm run demo
Have a look at https://kirainmoe.github.io/ymplayer/demo .
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'));
Install YMPlayer from npm, and import YMPlayer as an expoted class:
import YMPlayer from 'ymplayer';
require(['ymplayer'], function(YMPlayer) {
YMPlayer.render(opt);
});
<script type="text/javascript" src="./dist/ymplayer.js"></script>
This will export YMPlayer to window:
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 [email protected].
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 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.
-
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 !!
- Responsive design
- Play list
- Fullscreen mode (testing)
- Rendering method of pure Javascript
- Right-click menu
- Support of different environment
The MIT License (MIT).