MoePlayer / Cplayer
Licence: mit
A beautiful and clean WEB Music Player by HTML5.
Stars: ✭ 556
Projects that are alternatives of or similar to Cplayer
Lyrics Corpora
An unofficial Python API that allows users to create a corpus of lyrical text from their favorite artists and billboard charts
Stars: ✭ 13 (-97.66%)
Mutual labels: music, lyrics
Alignmentduration
Lyrics-to-audio-alignement system. Based on Machine Learning Algorithms: Hidden Markov Models with Viterbi forced alignment. The alignment is explicitly aware of durations of musical notes. The phonetic model are classified with MLP Deep Neural Network.
Stars: ✭ 36 (-93.53%)
Mutual labels: music, lyrics
Youtube Music Desktop
A desktop client for YouTube Music with MusixMatch lyrics.
Stars: ✭ 92 (-83.45%)
Mutual labels: music, lyrics
Lyrics.ovh
Source of lyrics.ovh and API to search for lyrics of a song
Stars: ✭ 112 (-79.86%)
Mutual labels: music, lyrics
Alltomp3 App
Download and Convert YouTube, SoundCloud & Spotify in MP3 with full tags (title, artist, genre, cover, lyrics 🔥)
Stars: ✭ 920 (+65.47%)
Mutual labels: music, lyrics
Vidify
Play music videos automatically for the songs playing on any device
Stars: ✭ 95 (-82.91%)
Mutual labels: music, lyrics
Musicrepair
Fixes music metadata and adds album art.
Stars: ✭ 566 (+1.8%)
Mutual labels: music, lyrics
Rabbit Lyrics
JavaScript audio and timed lyrics synchronizer.
Stars: ✭ 107 (-80.76%)
Mutual labels: music, lyrics
Carol Xamarin
A minimal and beautiful lyrics app for macOS built with Xamarin and C#
Stars: ✭ 97 (-82.55%)
Mutual labels: music, lyrics
Openbook
Open source lilypond real book for Jazz musicians
Stars: ✭ 159 (-71.4%)
Mutual labels: music, lyrics
React Music Player
🎵 Maybe the best beautiful HTML5 responsive player component for react :)
Stars: ✭ 321 (-42.27%)
Mutual labels: music, lyrics
Music recommender
Music recommender using deep learning with Keras and TensorFlow
Stars: ✭ 528 (-5.04%)
Mutual labels: music
Fredboat
A Discord music bot sharing 1 million servers with 20 million users
Stars: ✭ 471 (-15.29%)
Mutual labels: music
Musicapi
Centralized package to get data from qq, xiami, netease music
Stars: ✭ 463 (-16.73%)
Mutual labels: music
Diffuse
A music player that connects to your cloud/distributed storage.
Stars: ✭ 517 (-7.01%)
Mutual labels: music
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({
...
})
相关项目
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。
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].