优化、兼容微信页面

dunizb · May 29, 2017 · 1cddb04 · 1cddb04
1 parent 7fce0c5
commit 1cddb04
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,4 @@
-# SMmuiscPlay
-:musical_score:极简模式JavaScript音乐播放器
+# 极简音乐播放器
 
 ## 它能做什么？
 - [X] 控制音乐状态（播放、暂停）
@@ -8,9 +7,9 @@
 - [X] 可指定播放器所在容器（元素、页面）
 - [X] 可指定播放器所在容器位置（顶、左、右、下）
 - [X] 可自动加载音乐资源并播放（浏览器、微信网页等）
-- [ ] 可自定义播放器皮肤（按钮、列表）
+- [X] 可自定义播放器皮肤（按钮、列表）
 - [X] 极简小巧（无图片资源、无CSS样式文件加载）
-- [ ] 更友好的用户体验（手机、PC）
+- [X] 更友好的用户体验（手机、PC）
 
 ## 场景
 
@@ -20,15 +19,13 @@
 
 构造器：`SMmuiscPlay(options)`
 
-引入文件：`js/music_play.js`或`js/muisc_play.min.js`
-
 ## options选项
 
 **el** 
 指定播放器所在容器（元素、页面）,不指定则默认挂载在`body`上
 ```js
 SMmuiscPlay({
-    el: "#app",
+    el: "app",
     audioUrl: "muisc/xxxx.mp3"
 });
 ```
@@ -39,7 +36,7 @@ SMmuiscPlay({
 - source: 音乐地址
 ```js
 SMmuiscPlay({
-    el: "#app",
+    el: "app",
     audioUrl: [
         {
             title: "aaaaaa",
@@ -57,17 +54,17 @@ SMmuiscPlay({
 播放器位置，CSS定位  
 ```js
 SMmuiscPlay({
-    el: "#app",
+    el: "app",
     position: "top:10px;left:10px",//左上角
     audioUrl: "muisc/xxxx.mp3"
 });
 ```
 
 **buttonImgSrc**
-播放按钮图片
+播放按钮图片,背景图片，大小为24X20
 ```js
 SMmuiscPlay({
-    el: "#app",
+    el: "app",
     buttonImgSrc: "icon.png",
     position: "top:10px;left:10px",//左上角
     audioUrl: "muisc/xxxx.mp3"
@@ -78,10 +75,10 @@ SMmuiscPlay({
 自定义
 ```js
 SMmuiscPlay({
-    el: "#app",
+    el: "app",
     buttonImgSrc: "icon.png",
     position: "top:10px;left:10px",//左上角
     htmls: "<div>....<div>"
     audioUrl: "muisc/xxxx.mp3"
 });
-```
+```
diff --git a/index.html b/index.html
@@ -5,16 +5,29 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>极简模式JavaScript音乐播放器</title>
+    <style>
+        body{
+            margin: 0;
+            padding: 0;
+        }
+        #app{
+            width: 320px;
+            height: 400px;
+            border: 1px solid #ccc;
+            display: list-item;
+            position: relative;
+        }
+    </style>
 </head>
 <body>
-    <h1>极简模式JavaScript音乐播放器</h1>
     <div id="app"></div>
 </body>
 <script src="./js/muisc_play.js"></script>
 <script>
    SMmuiscPlay({
-       position: "top:10px;left:10px",
-       audioList:"./music/独角戏.mp3"
+       el: "app",
+       audioList:"./music/独角戏.mp3",
+       position: "top:10px;right:10px",//右上角
    }); 
 
 // {

diff --git a/js/muisc_play.js b/js/muisc_play.js