# 音乐播放器

西瓜播放器现在也支持音乐播放了，快来感受下吧！

在线代码运行示例

# 安装与配置

音乐播放功能以插件的方式安装和使用，如下所示：

import 'xgplayer';
import Music from 'xgplayer-music';

let player = new Music({
  id: 'vs',
  url: [
    {
      src: './song01.m4a',
      name: 'song01',
      vid: '000001',
      poster: 'poster01.jpg'
    },
    {
      src: './song02.m4a',
      name: 'song02',
      vid: '000002',
      poster: 'poster02.jpg'
    },
    {
      src: './song03.m4a',
      name: 'song03',
      vid: '000003',
      poster: 'poster03.jpg'
    }
  ],
  volume: 0.8,
  width: 900,
  height: 50,
  preloadNext: true,
  switchKeepProgress: false,
  abCycle: {
    start: 3,
    end: 9,
    loop: true
  }
})

# 属性

可通过音乐播放器对象的属性获取相关参数：

# mode

• 属性名： mode
• 含义： 当前播放模式，'order' | 'random' | 'loop'
• 备注： 'order'为顺序播放, 'random'为随机播放, 'loop'为循环播放

# timeScale

• 属性名： timeScale
• 含义： 歌曲快进或后退的时间间隔，单位为秒，默认15秒
• 备注： 无

# 方法

可通过音乐播放器对象的方法对其进行相应操作：

# mode

• 说明： 设置播放模式
• 参数： 数字类型，0 表示顺序播放，1 表示随机播放，2 表示循环播放
• 返回： 无
• 举例：

player.mode = 0; //顺序播放

# timeScale

• 说明： 设置播放模式
• 参数： 设置歌曲快进或后退的时间间隔，单位为秒，默认15秒
• 返回： 无
• 举例：

player.timeScale = 10;

# add

• 说明： 向播放列表中加入歌曲
• 参数： 对象类型，其属性src的值表示歌曲资源地址，属性name的值表示歌曲名
• 返回： 无
• 举例：

player.add({src:'url', name:'name'});

# remove

• 说明： 从播放列表中移除歌曲
• 参数： 字符串类型，表示所要移除歌曲的资源地址
• 返回： 无
• 举例：

player.remove('url');

# random

• 说明： 随机获取播放列表中某一首歌曲
• 参数： 无
• 返回： 歌曲对象，其属性src的值表示歌曲资源地址，属性name的值表示歌曲名
• 举例：

{src, name} = player.random();

# next

• 说明： 播放下一首歌曲
• 参数： 无
• 返回： 无
• 举例：

player.next();

# prev

• 说明： 播放上一首歌曲
• 参数： 无
• 返回： 无
• 举例：

player.prev();

# setIndex

• 说明： 选择第n首歌曲
• 参数： 数字类型，表示歌曲在列表中的序号
• 返回： 无
• 举例：

player.setIndex(index);

# forward

• 说明： 歌曲快进timeScale秒
• 参数： 无
• 返回： 无
• 举例：

player.forward();

# backward

• 说明： 歌曲后退timeScale秒
• 参数： 无
• 返回： 无
• 举例：

player.backward();

# setAbCycle

• 说明： 设置AB循环
• 参数： AB循环片段的起始和结束时间，单位为秒
• 返回： 无
• 举例：

player.setAbCycle(start, end);

# removeAbCycle

• 说明： 删除AB循环
• 参数： 无
• 返回： 无
• 举例：

player.removeAbCycle();

# 事件

可监听音乐播放器事件进行响应：

# change

• 事件名： change
• 含义： 发生切换歌曲事件
• 参数： 新歌曲对象，src歌曲资源地址，name歌曲名，vid歌曲唯一编号，poster歌曲专辑封面图

# 可视化频谱

西瓜播放器通过页面上的Canvas标签和Html5 AudioContext对象为开发者提供了柱状和波形两种可视化频谱指示器(也可以阅读播放器源码开发其它模式的频谱指示器)。 在实例化音乐播放器对象后就可以通过player.analyze(canvasDom)方法获取频谱指示器对象：

let an = player.analyze(document.querySelector('canvas')); //参数为页面上的canvas元素

# 频谱指示器属性

可通过频谱指示器的属性获取其具体参数：

# 频谱指示器方法

可通过频谱指示器的方法对其具体参数进行设置：

# mode

• 说明： 设置频谱指示器模式
• 参数： 字符串，'bars'为柱状频谱指示器(默认)，'wave'为波形频谱指示器
• 返回： 无
• 举例：

an.mode = 'wave';

# size

• 说明： 用于配置确定频域的FFT的大小详见
• 参数： 数字，必须是从32到32768范围内的2的非零幂
• 返回： 无
• 举例：

an.size = 256;

# 歌词

西瓜播放器提供了歌词滚动显示功能，需要提供页面上已存在的DOM元素作为歌词的容器。 在实例化音乐播放器对象后就可以通过 player.lyric(lyricTxt, Dom) 方法设置歌词文本和显示歌词的容器，并调用 player.lyric.show( ) 方法显示歌词：

let lyricText = `[00:00.00] 作曲 : 林家谦\n[00:00.00] 作词 : 徐世珍/吴辉福\n[00:00.000]编曲：林家谦\n[00:00.000]时钟不要走\n[00:04.220]让我脆弱一分钟\n[00:07.440]要多久才能习惯被放手\n[00:15.800]马克杯空了 暖暖的温热\n[00:22.660]却还在我手中停留\n[00:27.960]\n[00:29.790]勇气不要走\n[00:32.200]给我理由再冲动\n[00:35.690]去相信爱情 就算还在痛\n[00:43.960]如果我不说不会有人懂\n[00:50.720]失去你我有多寂寞\n[00:55.610]还是愿意\n[00:57.580]付出一切仅仅为了一个好梦\n[01:03.980]梦里有人真心爱我 陪我快乐也陪我沉默\n[01:11.260]没有无缘无故的痛承受越多越成熟\n[01:18.630]能让你拥抱更好的我\n[01:25.030] 谁也不要走\n[01:28.270]应该是一种奢求\n[01:31.900]可是我只想 握紧你的手\n[01:39.780]我宁愿等候 也不愿错过\n[01:46.630]你对我微笑的时候\n[01:56.780]\n[02:18.910]还是愿意\n[02:21.320]用尽全力仅仅为了一个以后\n[02:27.870]哪怕生命并不温柔哪怕被幸福一再反驳\n[02:34.870]也要相信伤痕累累 其实只是在琢磨\n[02:42.070]能让你为之一亮 的我\n[02:53.910]\n[02:56.350]制作人：林宥嘉\n[02:57.750]制作助理：张婕汝\n[02:59.010]录音师：陈文骏、叶育轩\n[03:00.410]录音室：白金录音室\n[03:01.740]混音师：SimonLi @ nOiz\n[03:03.000]OP: Terence Lam Production & Co. (Warner/Chappell Music, HK Ltd.)\n[03:04.050]SP: Warner/Chappell Music Taiwan Ltd.\n[03:04.910]OP：Universal Ms Publ Ltd Taiwan\n`;
player.lyric (lyricText, document.querySelector('#gc')); //该方法输入参数为歌词文本和页面上用于显示歌词的DOM元素
player.__lyric__.show();

# 歌词属性

可通过歌词对象的属性获取相关参数：

# interval

• 属性名： interval
• 含义： 每行歌词之间的跳转时间点控制参数
• 备注： 默认值为0

# offset

• 属性名： offset
• 含义： 手动同步歌词的总偏差，单位为秒
• 备注： 默认值为0

# offsetScale

• 属性名： offsetScale
• 含义： 手动同步歌词的调整步长，单位为秒
• 备注： 默认值为0.5秒

# 歌词方法

可使用歌词对象的方法进行相应操作：

# interval

• 说明： 用于设置每行歌词之间跳转时间点的控制参数
• 参数： 数字，单位为秒
• 返回： 无
• 举例：

player.__lyric__.interval = 0.1;

# offset

• 说明： 用于手动同步歌词
• 参数： 数字，单位为秒
• 返回： 无
• 举例：

player.__lyric__.offset -= player.__lyric__.offsetScale

# offsetScale

• 说明： 用于设置手动同步歌词的调整步长，单位为秒
• 参数： 数字，单位为秒
• 返回： 无
• 举例：

player.__lyric__.offsetScale = 0.2;

# adjust

• 说明： 调整每句歌词的显示时间，使之按照时间匀速显示
• 参数： 无
• 返回： 无
• 举例：

player.__lyric__.adjust();

# find

• 说明： 获取播放时间所对应的相关歌词
• 参数： 数字，表示歌曲播放时间，单位为秒
• 返回： 字符串数组，歌曲播放时间所对应的歌词
• 举例：

player.__lyric__.find(curTime);

# bind

• 说明： 如果歌词文本格式支持动态显示(即歌词文本中每句歌词有对应的歌曲播放时间点)，那么将音乐播放器与歌词绑定，即支持动态显示歌词：播放器每次触发timeupdate事件时也会触发lyricUpdate事件，lyricUpdate事件会返回当前播放时间对应的歌词。在 player.lyric(lyricTxt, Dom) 方法内部会默认调用bind方法。
• 参数： 对象，音乐播放器对象
• 返回： 布尔值，true为音乐播放器动态歌词绑定成功， false为歌词文本格式不支持动态显示
• 举例：

player.__lyric__.bind(player);

# unbind

• 说明： 将音乐播放器与歌词解绑，即删除lyricUpdate事件。
• 参数： 对象，音乐播放器对象
• 返回： 无
• 举例：

player.__lyric__.unbind(player);

# show

• 说明： 在player.lyric方法提供的DOM元素中创建歌词相关元素，若歌词文本支持则滚动显示歌词。
• 参数： 无
• 返回： 无
• 举例：

player.__lyric__.show();

# hide

• 说明： 歌词停止滚动。
• 参数： 无
• 返回： 无
• 举例：

player.__lyric__.hide();

# xgplayer-m4a插件

针对mp4a音乐文件，西瓜播放器提供了xgplayer-m4a插件来实现类似xgplayer-mp4插件的格式解析和分段加载功能，并在此基础上实现mp4a文件的任意片段截取(player.cut)、预加载控制(reqTimeLength)、离线存储(offline)、精确seek加载和不同质量音乐资源之间的无缝切换，使用方法如下:

import 'xgplayer';
import Music from 'xgplayer-music';
import 'xgplayer-m4a';

let player = new Music({
  id: 'xg',
  url: [
    {
      src: './song01.m4a',
      name: 'song01',
      vid: '000001',
      poster: 'poster01.jpg'
    },
    {
      src: './song02.m4a',
      name: 'song02',
      vid: '000002',
      poster: 'poster02.jpg'
    },
    {
      src: './song03.m4a',
      name: 'song03',
      vid: '000003',
      poster: 'poster03.jpg'
    }
  ],
  width: 900,
  height: 50,
  volume: 0.6,
  offline: true,
  preloadNext: true,
  reqTimeLength: 15
})

# cut方法

• 说明： mp4a歌曲任意片段截取
• 参数： start截取片段开始时间点，end截取片段结束时间点，单位为秒
• 返回： Promise对象，携带Blob形式的歌曲片段资源
• 举例：

player.cut(30, 50).then(blob => {
  if (blob) {
    let segmentURL = URL.createObjectURL(blob)
  }
}, () => {
  console.log('error')
})