Skip to content
This repository has been archived by the owner on Dec 25, 2023. It is now read-only.
/ SMmuiscPlay Public archive

🎼极简模式JavaScript音乐播放器组件,极简、小巧、无依赖、可定制,适用于手机页面,H5活动页,微信页面等的音乐播放支持

License

Notifications You must be signed in to change notification settings

dunizb/SMmuiscPlay

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

🎼极简模式JavaScript音乐播放器组件,极简、小巧、无依赖、可定制,适用于手机页面,H5活动页,微信页面等的音乐播放支持

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published