极简模式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"
});