Skip to content

YMPlayer4: Getting start

Jump to bottom
吟夢ちゃん edited this page May 28, 2017 · 1 revision

Getting start (Chinese Simplified)

用于你的页面中

如果你的目的只是想简单地使用 YMPlayer，并把它渲染到你的 Web page 中，只需执行下面的步骤：

  1. 提取源代码中 dist 目录下的文件 ymplayer.js，并放到你的项目目录下（不用担心， CSS 样式表已经被镶嵌到这个文件中了）。

  2. 在你的页面中引入 ymplayer.js 文件，我们建议您在页面的尾部，即 <body> 标签结束之前引入它。

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

接下来有两种方法可以将 YMPlayer 渲染到你的页面上。其中之一是在 YMPlayer 3 中熟悉的构造 DOM 结构：

<ymplayer>
	<song title="歌曲名" artist="艺术家" cover="专辑封面图地址" src="音频文件地址">
		<lyric>把歌词填写在这里，否则删除这个标签。</lyric>

		<translation>YMPlayer 4 已经支持显示翻译。如果不需要翻译，请删除这个标签</translation>
	</song>

	<!-- 以此类推，你可以添加多个 <song> 标签。 -->
</ymplayer>

YMPlayer 4 中允许你使用 YMPlayer.render() 方法渲染一个播放器实例：

/**
 * render a YMPlayer component on your page.
 *
 * @param data {Array}  每首歌的详细信息，使用数组包含对象的形式传入
 * @param node {Object} 播放器将被渲染的位置
 */
YMPlayer.render([{
    title: '',
    artist: '',
    cover: '',
    src: '',
    lyric: '',			 // 如果不需要歌词，就删除这个字段
    translation: ''	 // 如果不需要翻译，就删除这个字段
}, {
	// ......
}], document.getElementById('player'));

提示：以上代码需要插入在引入 ymplayer.js 的位置之后。

在本地安装并运行

若要在本地安装或运行，你需要执行以下的步骤：

1.将 YMPlayer 4 的源代码拉到本地。你可以通过克隆 Git 仓库或者运行 npm install ymplayer 来这么做。推荐通过前者。

2.如果你是通过克隆 Git 仓库的方式，那么应该如是做：

$ git clone https://github.com/kirainmoe/ymplayer.git
$ cd ymplayer
$ npm install

3.完成后，运行 npm run serve 便可以运行 webpack-dev-server。

提示：由于 YMPlayer 使用 generator-react-webpack 构建，使用了名为 node-sass 的依赖。由于从 npm 安装 node-sass 是通过编译安装的形式，此依赖可能无法在部分系统中正常安装，并提示错误。如果你遇到这样的情况，请安装 cnpm，并使用 cnpm 手动安装 node-sass。具体操作是：npm install -g cnpm && cnpm install node-sass。或者，可以直接运行 npm run setup 命令代替 ** npm install**。

将 YMPlayer 作为模块引入到你的项目中

复制 src/components 和 src/styles 到你的项目目录下，然后将已在 ymplayer.js 中导出的类导入：

import YMPlayer from './src/components/ymplayer.js';

由于 ymplayer.scss 是在 ymplayer.js 当中通过 Webpack 的 sass-loader 引入的，您可能需要对此进行配置。

Clone this wiki locally