Skip to content

MUSE 5: Getting Start

Jump to bottom
吟夢ちゃん edited this page Oct 15, 2017 · 5 revisions

Getting Start (Chinese Simplified)

MUSE 5 采用 Webpack 构建。针对不同的应用场景，你可能需要采用不同的方案来初始化 MUSE Player，所以这篇 Wiki 包括：

  • 仅用于你的单页中，而不依赖任何 loader
  • 在你的 React.js 项目或其它 webpack 打包的项目中使用 MUSE
  • 使用 RequireJS 或其它 AMD module loader 加载
  • 从 YMPlayer 迁移

仅用于你的单页中，而不依赖任何 loader

这是最简单的方法，也是大多数场景下的选择。在你的页面中引入 MUSE Player 的 JavaScript 文件，然后通过简单的代码将 MUSE Player 渲染到页面的某个指定的 DOM 节点上。

首先我们需要 MUSE Player 已打包的 JS 文件，它位于 dist/assets/muse-player.js 下。请将它提取出来，然后在你的目标页面中引入它。建议您在页面的末尾（<body> 标签结束之前）引入它：

<script type="text/javascript" src="muse-player.js"></script>

我们建议使用另一种方式：从 unpkg.com 直接引入 MUSE 的 JS 文件。由于 MUSE 的频繁更新，这样做可以使当前页面的 MUSE Player 版本与上游保持同步：

<script src="https://unpkg.com/muse-player/dist/assets/muse-player.js" type="text/javascript"></script>

接下来我们要初始化 MUSE Player。MUSE 5 不再支持使用自定义的 HTML 标签来初始化播放器，取而代之的应该使用 render() 方法：

// 这是你的播放列表，请自行填写信息到相应的字段
var playList = [{
  title: '',    // 歌曲名
  artist: '',    // 歌手
  cover: '',    // 专辑封面
  src: '',    // 歌曲文件地址
  lyric: '',    // 歌词，支持一轴一词和多轴一词，如果不需要请删除这个字段
  translation: '',    // 翻译，同样如果不需要可以删除这个字段
}， {
  // 多首歌按照上面的格式以此类推
}];

// 这是你想要渲染播放器的位置
var node = document.getElementById('app');

MUSE.render(playList, node);  // 用 MUSE.render() 来渲染

（提示：MUSE.render() 方法应该出现在muse-player.js引用之后。）

PS：生成歌曲信息 JSON 的技巧

如果你觉得自己把每首歌的信息都整理成 JSON 太麻烦的话，可以考虑使用 muse-json-generator: https://github.com/moefront/muse-json-generator . 以下是使用的姿势：

$ npm install -g muse-json-generator
$ muse 12345678

其中的 12345678 为你想要添加歌曲在网易云音乐的歌曲 ID. 此方式只适用于网易云音乐已收录的、非版权保护的歌。为了防止链接失效，我们建议你自己下载歌曲文件，生成外链，替换该工具生成的 JSON 的 src 字段。

在你的 React.js 项目或其它 webpack 打包的项目中使用 MUSE

如你所见，MUSE 采用 React + Redux(5.2.7 及以前的版本) / React + Mobx(5.3.0 - ?) 构建，因此你可以很容易地在你自己的 React.js 项目中（或是其它使用 webpack 及 CommonJS 加载规范的项目中）使用 MUSE。

请确保你已经安装了 muse-player 模块。你可以通过 yarn 或者 npm 来安装：

# using yarn
$ yarn add muse-player

# using npm
$ npm install muse-player --save-dev

下面是一段示例代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { MuseDOM as MUSE } from 'muse-player';

const playList = [{
  // ...
}];

// MUSE.render() 的第二个参数是组件的挂载位置，由于我们这里不需要立刻渲染，所以是 undefined
// 这将会返回一个 Object，其中会包含 React Component 和播放器的 ID。
// player { component: ReactComponent, ref: undefined, id }
const player = MUSE.render(playList, undefined);

ReactDOM.render(<player.component />, document.getElementById('app'));

以下写法也是支持的，不过需要注意的是相比上面这个方法你需要提供额外的参数 id 和 layout：

import { PlayerContainer } from 'muse-player';
// ...
ReactDOM.render((
  <PlayerContainer
    id={id}
    layout={layout}
    playList={playList}
  />
), document.getElementById('app'));

使用 RequireJS 或其它 AMD module loader 加载

require(['muse-player'], function(MuseDOM) {
    MuseDOM.render(...);
});

从 YMPlayer 迁移

如果你现在是 YMPlayer 4 用户，请参考以下的迁移方案：

YMPlayer 3 或 YMPlayer 4 + 自定义标签构造

如果你是 YMPlayer 3 用户，或者你是 YMPlayer 4 用户，但你调用 YMPlayer 的方式可能像如下这样：

<ymplayer>
    <song title artist cover src>
        <lyric></lyric>
    </song>
</ymplayer>

那么你必须参照上文的方法改写调用方法以迁移到 MUSE 5。

YMPlayer 4 + YMPlayer.render()

如果你是 YMPlayer 4 用户并且采用 YMPlayer.render() 创建播放器，由于在 MUSE 5 中保留了 window.YMPlayer 对象，因此只需要将 YMPlayer 的 JS 文件替换为 MUSE 的 JS 文件，播放器就能正常工作。但是我们并不保证不会在之后的某个版本中取消将 MuseDOM 映射到 window.YMPlayer 的关联，因此建议你修改你的调用方式，其实很简单，只需要将 YMPlayer.render() 改成 MUSE.render() 就可以。

Clone this wiki locally