smuic
smuic

这是一款基于HTML5以及CSS3的列表式音乐播放器，增加了列表播放，音量控制，播放进度，播放时间以及播放模式，上一曲，下一曲等功能，已增加歌词功能。采用原生JavaScript编写，不依赖任何库文件，兼容支持html5的浏览器。下载包中的代码已压缩，源码版已开源在Github（https://github.com/S-mohan/smusic）上。

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)

关于歌词

由于涉及AJAX请求，请在服务器环境下演示(可以启动http-server创建一个简单的服务器环境)。目前只支持UTF8编码歌词文件，歌词形式如下：

[offset:0]
[00:00.80]车站 (Live) - 李健
[00:02.21]词：李健
[00:02.96]曲：竹内玛利亚
[00:04.43]
[00:37.57]车窗外恋人相拥
[00:42.62]还在难舍难离
[00:46.08]
[00:47.67]汽笛声突然响起

由于歌词文件需要AJAX加载，目前，只能加载同域文件，如果需要跨域加载歌词，如远程歌词文件，则请自行修改源码或使用其他跨域请求，这里不会再做更新。

如何使用

自行构建，如已安装Node

如果需要修改样式（scss文件）或其他源码，推荐使用该方式

(c)npm install

gulp compile

gulp build

在head中加入css

<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>

-- EOF --

本文标题：HTML5列表音乐播放器SMusic

本文链接：https://smohan.net/blog/smusic

本站使用「 署名-非商业性使用 4.0 国际 (CC BY-NC 4.0) 」创作共享协议，转载或使用请署名并注明出处。 相关说明 »

更多文章

演示

评论 「 ... 」