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,灵活配置播放器启动时是否自动播放

dume2007 / smusic