A beautiful and clean WEB Music Player by HTML5.
Clone or download
Latest commit bcfd1a1 Feb 8, 2018

readme.md

cPlayer

GitHub stars

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({
  ...
})

相关项目

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样式。
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。