极简模式JavaScript音乐播放器组件

特点

极简（无花俏布局和样式）
小巧（117行js代码，包括注释和空行）
无依赖（无CSS、图片等依赖）
可定制（自定义设置）

它能做什么？

控制音乐状态（播放、暂停）
灵活的音乐资源配置（单个、多个）
自动音乐列表（无选择列表、有列表）
可指定播放器所在容器（元素、页面）
可指定播放器所在容器位置（顶、左、右、下）
可自动加载音乐资源并播放（浏览器、微信网页等）
可自定义播放器皮肤（按钮、列表）
极简小巧（无图片资源、无CSS样式文件加载）
更友好的用户体验（手机、PC）

场景

适合手机页面，H5活动页，微信页面等的音乐播放支持

示例

见index.html文件

使用

构造器：SMmuiscPlay(options)

示例演示页面：index.html

options选项

el [必须]

指定播放器所在容器（元素、页面）,不指定则默认挂载在body上

SMmuiscPlay({
    el: "app",
    audioUrl: "muisc/xxxx.mp3",
    animaClass: "muiscIconRotate"
});

animaClass [必须]

定义音乐图标旋转动画

定义动画：

@keyframes muiscIconRotate{
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}

设置animaClass

SMmuiscPlay({
    el: "app",
    audioUrl: "muisc/xxxx.mp3",
    animaClass: "muiscIconRotate"
});

position

播放器位置，CSS定位

SMmuiscPlay({
    el: "app",
    position: "top:10px;left:10px",//左上角
    audioUrl: "muisc/xxxx.mp3"
});

buttonImgSrc

音乐播放按钮图片,强烈建议使用SVG图片

SMmuiscPlay({
    el: "app",
    buttonImgSrc: "icon.png",
    position: "top:10px;left:10px",//左上角
    audioUrl: "muisc/xxxx.mp3"
});

htmls

自定义

SMmuiscPlay({
    el: "app",
    buttonImgSrc: "icon.png",
    position: "top:10px;left:10px",//左上角
    htmls: "<div>....<div>"
    audioUrl: "muisc/xxxx.mp3"
});

更新

2017.10.15 0.0.2 => 0.0.3 去掉了audioList特性

2017.08.30 升级 0.0.1 => 0.0.2

音乐播放图标

默认使用SVG格式
需要自己设置图标的旋转动画

样例，可直接拷贝到页面：

@keyframes muiscIconRotate{
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}

然后添加animaClass属性：

SMmuiscPlay({
    el: "app",
    audioUrl: "muisc/xxxx.mp3",
    animaClass: "muiscIconRotate"
});

Gaba / SMmuiscPlay

极简模式JavaScript音乐播放器组件

特点

它能做什么？

场景

示例

使用

options选项

更新

简介

发行版

贡献者

近期动态

Gaba / SMmuiscPlay .gitee-modal { width: 500px !important; }

极简模式JavaScript音乐播放器组件

特点

它能做什么？

场景

示例

使用

options选项

更新

简介

发行版

贡献者

近期动态

搜索帮助

Gaba / SMmuiscPlay