cplayer

cPlayer

A beautiful and clean WEB Music Player by HTML5. demo here.

Feature

• Lyrics display
• Playlists
• Three play modes, Single cycle, list loop, random play
• Designed for touch devices
• Modular Customizable
• Media Session Support

Quick Start

<div id="app"></div>
<!-- 加载 cplayer 脚本 -->
<script src=".../cplayer.js"></script>
<script>
  let player = new cplayer({
    element: document.getElementById('app'),
    playlist: [
      {
        src: '歌曲资源链接...',
        poster: '封面链接...',
        name: '歌曲名称...',
        artist: '歌手名称...',
        lyric: '歌词...',
        sublyric: '副歌词，一般为翻译...',
        album: '专辑，唱片...'
      },
      {
        ...
      },
      ......
    ]
  })
</script>

webpack

npm install cplayer --save

import cplayer from 'cplayer';

new cplayer({
  ...
})

相关项目

• hexo-tag-cplayer
• vue-player
• react-cplayer

Option

OPTION	default content	description
element	document.body	注入播放器的目标元素。
playlist	[]	播放列表。
zoomOutKana	false	日语优化，缩小显示歌词中的假名。
playmode	listloop	默认播放模式。
volume	1	默认音量
point	0	开始播放的歌曲索引。
showPlaylist	false	显示播放列表，而不是当前歌曲信息。
autoplay	false	自动播放（移动端不可用）。
width	''	播放器宽度。
size	12px	播放器尺寸。
style	''	附加的css样式。
shadowDom	'true'	启用 shadow DOM。
showPlaylistButton	'true'	显示播放列表按钮
dropDownMenuMode	'bottom'	菜单（播放列表和歌曲信息）的显示模式， ‘bottom’ 底部、 'top' 顶部、 'none' 不显示

Apis

• cplayer.mode 播放模式 目前支持3种播放模式。
  • listloop 列表循环
  • singlecycle 单曲循环
  • listrandom 列表随机播放

  cplayer.mode //获取当前播放模式
  
  cplayer.mode = 'listloop' //设置当前播放模式为列表循环
  

• cplayer.volume 音量 0.0 ~ 1.0。
• cplayer.playlist 只读 获取当前播放列表。
• cplayer.nowplay 只读 获取当前正在播放的歌曲。
• cplayer.nowplaypoint 只读 获取当前正在播放的歌曲在播放列表中的索引。
• cplayer.played 只读 是否正在播放。
• cplayer.paused 只读 是否已经暂停。
• cplayer.toggleMode() 切换播放模式 按 listloop > singlecycle > listrandom 的顺序
• cplayer.setMode(playmode: string) 设置播放模式与修改 cplayer.mode 等效。
• cplayer.getMode() 获取播放模式与获取 cplayer.mode 等效。
• cplayer.play() 开始播放
• cplayer.pause() 暂停播放
• cplayer.to(id: number) 跳转到指定曲目 id:歌曲的索引
• cplayer.next() 下一首
• cplayer.prev() 上一首
• cplayer.togglePlayState() 切换播放状态，暂停 > 播放，播放 > 暂停。
• cplayer.add(item: IAudioItem) 添加歌曲。
• cplayer.remove(item: IAudioItem) 删除歌曲。
• cplayer.setVolume() 设置音量与修改 cplayer.volume 等效。
• cplayer.destroy() 销毁播放器。
• cplayer.view.getRootElement() 获取 <c-player /> 元素。
• cplayer.view.showInfo() 关闭播放列表，显示当前歌曲信息。
• cplayer.view.showPlaylist() 显示播放列表。
• cplayer.view.toggleDropDownMenu() 切换播放列表，关闭 > 打开，打开 > 关闭。

Event

• started: 每首歌开始时触发，此时已经开始播放。
• ended: 歌曲播放到末尾时触发
• play: 开始播放时触发
• pause: 暂停播放时触发

play 事件 和 pause 事件 必定交替触发。 需要注意的是上一首歌结束自动切换到下一首时不会触发 play 事件, 但会触发 started 事件 和 openaudio 事件。

• playmodechange: play 事件 和 pause 事件 的结合体
• openaudio: 打开音频时触发，但此时还不一定有音频数据。
• volumechange: 音量被改变时触发
• timeupdate: 更新播放时间

常见问题

如何播放网易云上的音乐？

在 cplayer.js 之后执行以下脚本

cplayer.prototype.add163 = function add163(id) {
  if (!id) throw new Error("Unable Property.");
  return fetch("https://music.huaji8.top/?id=" + id).then(function(res){return res.json()}).then(function(data){
    let obj = {
      name: data.info.songs[0].name,
      artist: data.info.songs[0].ar.map(function(ar){ return ar.name }).join(','),
      poster: data.pic.url,
      lyric: data.lyric.lyric,
      sublyric: data.lyric.tlyric,
      src: data.url.url,
      album: data.info.songs[0].al.name
    }
    this.add(obj);
    return obj;
  }.bind(this))
}

使用:

player.add163(12345678) //加入网易云id为 12345678 的歌曲

我只需要一个封装好的 audio api，不想要 UI ？

dist 文件夹中有 cplayer-noview.js 是去 UI 版的 cplayer。