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

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.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 的歌曲