huanghaifen / SMmuiscPlay

:musical_score:极简模式JavaScript音乐播放器

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

特点

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

它能做什么？

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

场景

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

示例

见index.html文件

使用

构造器：SMmuiscPlay(options)

options选项

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

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

audioList 音乐列表（无选择列表、有列表）,单个歌曲会隐藏音乐列表

• title: 音乐名称
• source: 音乐地址

SMmuiscPlay({
    el: "app",
    audioUrl: [
        {
            title: "aaaaaa",
            source: "muisc/aaaaaa.mp3"
        },
        {
            title: "bbbbbb",
            source: "muisc/bbbbbb.mp3"
        }
    ]
});

position 播放器位置，CSS定位

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

buttonImgSrc 播放按钮图片,背景图片，大小为24X20

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"
});