西瓜播放器 HTML5 video video.js 播放器 HTML5播放器 mp4 hls hls.js flv flv.js dash dash.js 无缝切换

音乐播放器

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

在线代码运行示例

安装与配置

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

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
  }
})
配置项含义
id播放器容器id
url歌曲对象数组:src歌曲资源地址,name歌曲名,vid歌曲唯一编号,poster歌曲专辑封面图
volume音量大小
width音乐播放器宽度
height音乐播放器高度
volumeShowtrue开启音量控制,false关闭音量控制。默认false
preloadNext开启预加载下一曲功能,当前歌曲播放到一半或列表循环顺序发生改变时会提前请求下一曲并存储在IndexedDB中
switchKeepProgresstrue切换歌曲时保持上一曲的播放进度,false切换歌曲时从0开始播放。默认false
abCycleAB循环配置对象,start表示AB循环段起始时间,end表示AB循环段结束时间,loop表示AB段循环播放。如果不设置start和end,loop设置为false,可以禁止播放器自动循环播放

属性

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

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'为波形显示
size用于配置确定频域的FFT的大小详见
status频谱指示器功能是否开启'on'为开启状态,'off'为关闭状态

频谱指示器方法

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

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
})
配置项含义
offline开启离线存储,完整请求到歌曲资源后以blob存储在IndexedDB
reqTimeLength控制分段请求的频率

cut方法

  • 说明: mp4a歌曲任意片段截取
  • 参数: start截取片段开始时间点,end截取片段结束时间点,单位为秒
  • 返回: Promise对象,携带Blob形式的歌曲片段资源
  • 举例:
player.cut(30, 50).then(blob => {
  if (blob) {
    let segmentURL = URL.createObjectURL(blob)
  }
}, () => {
  console.log('error')
})