S-mohan / Smusic
html5音乐列表播放器
Stars: ✭ 106
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Smusic
Lms
Lightweight Music Server. Access your self-hosted music using a web interface.
Stars: ✭ 315 (+197.17%)
Mutual labels: audio, music, music-player
Audio Visualizer Android
🎵 [Android Library] A light-weight and easy-to-use Audio Visualizer for Android.
Stars: ✭ 581 (+448.11%)
Mutual labels: audio, music, music-player
Canaree Music Player
Complete music player published in the Play Store. Heavily relies on Dagger, kotlin coroutines and Clean architecture.
Stars: ✭ 371 (+250%)
Mutual labels: audio, music, music-player
Tonejs Instruments
A small instrument sample library with quick-loader for tone.js
Stars: ✭ 172 (+62.26%)
Mutual labels: audio, music, music-player
Pandoraplayer
🅿️ PandoraPlayer is a lightweight music player for iOS, based on AudioKit and completely written in Swift.
Stars: ✭ 1,037 (+878.3%)
Mutual labels: audio, music, music-player
Swift Radio Pro
Professional Radio Station App for iOS!
Stars: ✭ 2,644 (+2394.34%)
Mutual labels: audio, music, music-player
Tauonmusicbox
The Linux desktop music player from the future! 🌆
Stars: ✭ 494 (+366.04%)
Mutual labels: audio, music, music-player
Skplayer
🎵 A simple & beautiful HTML5 music player
Stars: ✭ 437 (+312.26%)
Mutual labels: audio, music, music-player
Lofi Player
🎧 A Lofi Player built with HTML, CSS and Javascript using Parcel as Module Bundler https://lakscastro.github.io/lofi-player
Stars: ✭ 38 (-64.15%)
Mutual labels: music, music-player, css3
Strawberry
🍓 Strawberry Music Player
Stars: ✭ 972 (+816.98%)
Mutual labels: audio, music, music-player
Musicplayer
A minimal music player built on electron.
Stars: ✭ 145 (+36.79%)
Mutual labels: audio, music, music-player
Audio player flutter
🎧 Apple Music / Tidal Audio Player for Flutter
Stars: ✭ 52 (-50.94%)
Mutual labels: audio, music, music-player
Soundspice Mobile
A light-weight and minimalist music player for Android
Stars: ✭ 289 (+172.64%)
Mutual labels: audio, music, music-player
Webaudiofont
Use full GM set of musical instruments to play MIDI and single sounds or effects. Support for reverberation and equaliser. No plugins, no Flash. Pure HTML5 implementation compatible with desktop and mobile browser. See live examples.
Stars: ✭ 600 (+466.04%)
Mutual labels: audio, music, music-player
Vyplayindicator
PlayIndicator inspired by Apple's Music Player.
Stars: ✭ 47 (-55.66%)
Mutual labels: audio, music, music-player
React Cassette Player
Simple ReactJS HTML5 audio player component built with SVG icons from The Noun Project.
Stars: ✭ 93 (-12.26%)
Mutual labels: audio, music, music-player
Beet.js
Polyrhythmic Sequencer library for Web Audio API.
Stars: ✭ 87 (-17.92%)
Mutual labels: audio, music
Guayadeque
Guayadeque is a music management program designed for all music enthusiasts. It is Full Featured Linux media player that can easily manage large collections and uses the Gstreamer media framework.
Stars: ✭ 87 (-17.92%)
Mutual labels: music, music-player
Smusic
一款基于HTML5、Css3的列表式音乐播放器，包含列表，音量，进度，时间，歌词展示以及播放模式等功能，不依赖任何库
html5音乐列表播放器
Author:Smohan
Version:2.0.1
url: https://smohan.net/lab/smusic
项目地址
DEMO
使用方式
(c)npm install
gulp compile
gulp build
使用
在<head>中加入
<link rel="stylesheet" href="../build/smusic.min.css">
在 <body>中 创建DOM(SMUSIC容器)
<body>
...
<div id="my-music"></div>
...
</body>
创建musicList文件或者数组,歌曲列表格式如下
var songList = [
{
title : '成都',
singer : '赵雷',
audio : 'http://m2.music.126.net/4gwWNLUdEZuPCKGUWWu_rw==/18720284975304502.mp3',
thumbnail : 'http://p1.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg',
lyric : './data/chengdu.lrc'
}
]
在</body>前加入JS
<script src="./songList.js"></script>
<script src="../build/smusic.min.js"></script>
<script>
var smusic = SMusic(songList, {
container : document.getElementById('my-music')
});
smusic.init()
</script>
歌词需要服务器环境支持, 可以启动http-server创建一个简单的服务器环境
Options
{
//放置Smusic的DOM容器
container: doc.body,
//初始化播放索引
playIndex: 0,
//初始化播放模式 (1 : 列表循环 2 : 随机播放 3 : 单曲循环)
playMode: 1,
//初始化音量 (0 - 1之间)
volume: .5,
//自动播放
autoPlay: true,
//默认显示面板
panel: 'list' //['list' 列表面板, 'lyric' 歌词面板]
}
API
//初始化播放器
init()
/**
* 获取当前播放的歌曲信息
* @returns {*}
*/
getCurrentInfo()
/**
* 设置播放模式
* @param mode (1, 2, 3)
*/
setMode(mode = 1)
/**
* 设置音量
* @param volume ( 0 <= volume <= 1)
*/
setVolume(volume = .5)
/**
* 向列表中追加音乐
* @param music
* @param callback
*/
addSong(music = {}, callback = noop)
//刷新播放列表
refreshList()
/**
* 下一首
* @param callback
*/
next(callback)
/**
* 上一首
* @param callback
*/
prev(callback)
/**
* 播放
* @param callback
*/
play(callback)
/**
* 暂停
* @param callback
*/
pause(callback)
更新记录
版本：2.0.1
代码重构(es6,scss,gulp等)，新增向列表追加歌曲(addSong)、上一曲(next)、下一曲(prev)等对外接口，优化拖拽、歌词等功能，优化界面
版本：2.0.0
增加歌词展示功能
版本：1.0.3
增加拖动进度条，调整播放进度功能
版本：1.0.2
新增defaultMode属性，控制初始化播放模式，新增callback回调方法，用于获取当前播放媒体文件信息
版本：1.0.1
增加了是否自动播放的配置项开关 autoPlay,灵活配置播放器启动时是否自动播放
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].