{"id":13755953,"url":"https://github.com/MoePlayer/cPlayer","last_synced_at":"2025-05-10T03:30:37.171Z","repository":{"id":40336407,"uuid":"48879400","full_name":"MoePlayer/cPlayer","owner":"MoePlayer","description":"A beautiful and clean WEB Music Player by HTML5.","archived":false,"fork":false,"pushed_at":"2021-05-19T12:05:41.000Z","size":77959,"stargazers_count":670,"open_issues_count":14,"forks_count":113,"subscribers_count":24,"default_branch":"next","last_synced_at":"2024-11-09T13:09:04.906Z","etag":null,"topics":["cplayer","lyrics","music"],"latest_commit_sha":null,"homepage":"http://cplayer.js.org/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MoePlayer.png","metadata":{"files":{"readme":"readme-zh-CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-01T13:58:37.000Z","updated_at":"2024-09-22T22:08:14.000Z","dependencies_parsed_at":"2022-08-18T03:15:24.217Z","dependency_job_id":null,"html_url":"https://github.com/MoePlayer/cPlayer","commit_stats":null,"previous_names":["copay/cplayer"],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoePlayer%2FcPlayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoePlayer%2FcPlayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoePlayer%2FcPlayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoePlayer%2FcPlayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MoePlayer","download_url":"https://codeload.github.com/MoePlayer/cPlayer/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224911418,"owners_count":17390840,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cplayer","lyrics","music"],"created_at":"2024-08-03T11:00:33.308Z","updated_at":"2024-11-16T11:30:34.167Z","avatar_url":"https://github.com/MoePlayer.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# cPlayer\n\n[![](https://badge.fury.io/js/cplayer.svg)](https://www.npmjs.com/package/cplayer) [![GitHub stars](https://img.shields.io/github/stars/MoePlayer/cPlayer.svg?style=social\u0026label=Star\u0026style=plastic)](https://github.com/MoePlayer/cPlayer) ![](http://img.badgesize.io/https://raw.githubusercontent.com/MoePlayer/cPlayer/master/dist/cplayer.js?compression=gzip)\n\n![](./previews.png)\n\nA beautiful and clean WEB Music Player by HTML5. [demo here](http://cplayer.js.org/).\n\n# Feature\n\n* 歌词显示\n* 多歌曲播放列表\n* 三种播放模式 单曲循环 列表循环 随机播放\n* 专为触控优化的界面\n* 模块化 定制性\n* [Media Session 支持](https://developers.google.com/web/updates/2017/02/media-session)\n\n# Quick Start\n\n``` html\n\u003cdiv id=\"app\"\u003e\u003c/div\u003e\n\u003c!-- 加载 cplayer 脚本 --\u003e\n\u003cscript src=\".../cplayer.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  let player = new cplayer({\n    element: document.getElementById('app'),\n    playlist: [\n      {\n        src: '歌曲资源链接...',\n        poster: '封面链接...',\n        name: '歌曲名称...',\n        artist: '歌手名称...',\n        lyric: '歌词...',\n        sublyric: '副歌词，一般为翻译...',\n        album: '专辑，唱片...'\n      },\n      {\n        ...\n      },\n      ......\n    ]\n  })\n\u003c/script\u003e\n```\n\n## webpack\n\n```\nnpm install cplayer --save\n```\n\n```\nimport cplayer from 'cplayer';\n\nnew cplayer({\n  ...\n})\n```\n\n# 相关项目\n\n[hexo-tag-cplayer](https://github.com/EYHN/hexo-tag-cplayer)\n\n# Option\n\n|OPTION|default content|description|\n|:-----|:-------------:|:----------|\n|element|`document.body`|注入播放器的目标元素。|\n|playlist|`[]`|播放列表。|\n|zoomOutKana|`false`|日语优化，缩小显示歌词中的假名。|\n|playmode|`listloop`|默认播放模式。|\n|volume|`1`|默认音量|\n|point|`0`|开始播放的歌曲索引。|\n|showPlaylist|`false`|显示播放列表，而不是当前歌曲信息。|\n|autoplay|`false`|自动播放（移动端不可用）。|\n|width|`''`|播放器宽度。|\n|size|`12px`|播放器尺寸。|\n|style|`''`|附加的css样式。|\n|shadowDom|`'true'`|启用 [shadow DOM](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM)。|\n|showPlaylistButton|`'true'`|显示播放列表按钮|\n|dropDownMenuMode|`'bottom'`|菜单（播放列表和歌曲信息）的显示模式， ‘bottom’ 底部、 'top' 顶部、 'none' 不显示|\n\n# Apis\n\n- `cplayer.mode` 播放模式 目前支持3种播放模式。\n  - `listloop` 列表循环\n  - `singlecycle` 单曲循环\n  - `listrandom` 列表随机播放\n  ```\n  cplayer.mode //获取当前播放模式\n\n  cplayer.mode = 'listloop' //设置当前播放模式为列表循环\n  ```\n- `cplayer.volume` 音量 0.0 ~ 1.0。\n- `cplayer.playlist` 只读 获取当前播放列表。\n- `cplayer.nowplay` 只读 获取当前正在播放的歌曲。\n- `cplayer.nowplaypoint` 只读 获取当前正在播放的歌曲在播放列表中的索引。\n- `cplayer.played` 只读 是否正在播放。\n- `cplayer.paused` 只读 是否已经暂停。\n- `cplayer.toggleMode()` 切换播放模式 按 listloop \u003e singlecycle \u003e listrandom 的顺序\n- `cplayer.setMode(playmode: string)` 设置播放模式与修改 `cplayer.mode` 等效。\n- `cplayer.getMode()` 获取播放模式与获取 `cplayer.mode` 等效。\n- `cplayer.play()` 开始播放\n- `cplayer.pause()` 暂停播放\n- `cplayer.to(id: number)` 跳转到指定曲目 id:歌曲的索引\n- `cplayer.next()` 下一首\n- `cplayer.prev()` 上一首\n- `cplayer.togglePlayState()` 切换播放状态，暂停 \u003e 播放，播放 \u003e 暂停。\n- `cplayer.add(item: IAudioItem)` 添加歌曲。\n- `cplayer.remove(item: IAudioItem)` 删除歌曲。\n- `cplayer.setVolume()` 设置音量与修改 `cplayer.volume` 等效。\n- `cplayer.destroy()` 销毁播放器。\n- `cplayer.view.getRootElement()` 获取 `\u003cc-player /\u003e` 元素。\n- `cplayer.view.showInfo()` 关闭播放列表，显示当前歌曲信息。\n- `cplayer.view.showPlaylist()` 显示播放列表。\n- `cplayer.view.toggleDropDownMenu()` 切换播放列表，关闭 \u003e 打开，打开 \u003e 关闭。\n\n### Event\n\n- `started`: 每首歌开始时触发，此时已经开始播放。\n- `ended`: 歌曲播放到末尾时触发\n- `play`: 开始播放时触发\n- `pause`: 暂停播放时触发\n\n\u003e `play 事件` 和 `pause 事件` 必定交替触发。\n\u003e 需要注意的是上一首歌结束自动\b切换到下一首时不会触发 \u001c`play 事件`, \b但会触发 `started 事件` 和 `openaudio 事件`。\n\n- `playmodechange`: `play 事件` 和 `pause 事件` 的结合体\n- `openaudio`: 打开音频时触发，但此时还不一定有音频数据。\n- `volumechange`: 音量被改变时触发\n- `timeupdate`: 更新播放时间\n\n## 常见问题\n\n\u003cdetails\u003e\u003csummary\u003e如何播放网易云上的音乐？\u003c/summary\u003e\u003cbr\u003e\n\n\n### 在 `cplayer.js` 之后执行以下脚本\n\n``` javascript\ncplayer.prototype.add163 = function add163(id) {\n  if (!id) throw new Error(\"Unable Property.\");\n  return fetch(\"https://music.huaji8.top/?id=\" + id).then(function(res){return res.json()}).then(function(data){\n    let obj = {\n      name: data.info.songs[0].name,\n      artist: data.info.songs[0].ar.map(function(ar){ return ar.name }).join(','),\n      poster: data.pic.url,\n      lyric: data.lyric.lyric,\n      sublyric: data.lyric.tlyric,\n      src: data.url.url,\n      album: data.info.songs[0].al.name\n    }\n    this.add(obj);\n    return obj;\n  }.bind(this))\n}\n```\n\n### 使用:\n\n``` javascript\nplayer.add163(12345678) //加入网易云id为 12345678 的歌曲\n```\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\u003csummary\u003e我只需要一个封装好的 audio api，不想要 UI ？\u003c/summary\u003e\u003cbr\u003e\n\n`dist` 文件夹中有 `cplayer-noview.js` 是去 UI 版的 cplayer。\n\n\u003c/details\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMoePlayer%2FcPlayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMoePlayer%2FcPlayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMoePlayer%2FcPlayer/lists"}