add

dunizb · May 23, 2017 · 4755545 · 4755545
1 parent 8f65e35
commit 4755545
Show file tree

Hide file tree

Showing 6 changed files with 209 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,81 @@
 # SMmuiscPlay
 :musical_score:极简模式JavaScript音乐播放器
+
+## 它能做什么？
+- [X] 控制音乐状态（播放、暂停）
+- [X] 灵活的音乐资源配置（当个、多个）
+- [X] 自动音乐列表（无选择列表、有列表）
+- [X] 可指定播放器所在容器（元素、页面）
+- [X] 可指定播放器所在容器位置（顶、左、右、下）
+- [X] 可自动加载音乐资源并播放（浏览器、微信网页等）
+- [ ] 可自定义播放器皮肤（按钮、列表）
+- [X] 极简小巧（无图片资源、无CSS样式文件加载）
+- [ ] 更友好的用户体验（手机、PC）
+
+## 使用
+
+构造器：`SMmuiscPlay(options)`
+
+## options选项
+
+**el** 
+指定播放器所在容器（元素、页面）,不指定则默认挂载在`body`上
+```js
+SMmuiscPlay({
+    el: "#app",
+    audioUrl: "muisc/xxxx.mp3"
+});
+```
+
+**audioList**
+音乐列表（无选择列表、有列表）,单个歌曲会隐藏音乐列表
+- title: 音乐名称
+- source: 音乐地址
+```js
+SMmuiscPlay({
+    el: "#app",
+    audioUrl: [
+        {
+            title: "aaaaaa",
+            source: "muisc/aaaaaa.mp3"
+        },
+        {
+            title: "bbbbbb",
+            source: "muisc/bbbbbb.mp3"
+        }
+    ]
+});
+```
+
+**position**
+播放器位置，CSS定位  
+```js
+SMmuiscPlay({
+    el: "#app",
+    position: "top:10px;left:10px",//左上角
+    audioUrl: "muisc/xxxx.mp3"
+});
+```
+
+**buttonImgSrc**
+播放按钮图片
+```js
+SMmuiscPlay({
+    el: "#app",
+    buttonImgSrc: "icon.png",
+    position: "top:10px;left:10px",//左上角
+    audioUrl: "muisc/xxxx.mp3"
+});
+```
+
+**htmls**
+自定义
+```js
+SMmuiscPlay({
+    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
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>极简模式JavaScript音乐播放器</title>
+</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"
+   }); 
+
+// {
+//     title: "独角戏",
+//     source: "./music/独角戏.mp3"
+// },
+// {
+//     title: "大王叫我来巡山",
+//     source: "./music/大王叫我来巡山.mp3"
+// }
+</script>
+</html>
diff --git a/js/muisc_play.js b/js/muisc_play.js
@@ -0,0 +1,100 @@
+;(function(global){
+    var __INFO__ = {
+        plugins: "SMmuiscPlay",
+        version: "0.0.1",
+        author: "Dunizb",
+        website: "http://dunizb.com"
+    };
+    var defualts = {
+        audioList: "",
+        el: "",
+        position: "",
+        buttonImgSrc: "",
+        htmls: `<audio autoplay loop style="width:0px;">
+                    <source src="" type="audio/mpeg" />
+                </audio>
+                <a style="width:24px;height:24px;">►</a>
+                <select>
+                </select>`
+    };
+    var PlayCode = function(options) {
+        var settings = Object.assign({}, defualts, options);//缺省值合并
+        var audioDom = settings.el ? document.querySelector(settings.el) : document.body;//获得用户传入的节点
+        if(!audioDom) audioDom = document.body;
+
+        var audioBox = document.createElement("div");
+        audioBox.id = "musicControl";
+        audioBox.style = "opacity:0.5;overflow:hidden;position:absolute;z-index:999;" + settings.position;
+        audioBox.innerHTML = settings.htmls;
+        //插入节点
+        audioDom.appendChild(audioBox);
+
+        var audioButton = audioBox.querySelectorAll("a")[0];
+        var audioList = audioBox.querySelectorAll("select")[0];
+        var audioTag = audioBox.querySelectorAll("audio")[0];
+
+        //跟换播放按钮图片
+        if(settings.buttonImgSrc) audioButton.style.backgroundImage = 'url('+settings.buttonImgSrc+')';
+
+        audioButton.state = true;
+
+        var _urlType = toString.apply(settings.audioList);
+        if(_urlType === '[object Object]'){
+            var _temp = [];
+            _temp.push(settings.audioList);
+            settings.audioList = _temp;
+        }
+
+        if(!settings.audioList.length){
+            console.error(__INFO__.plugins + '无音乐资源启动失败，请添加音乐资源 audioList');
+            return;
+        }
+
+        if(typeof settings.audioList === 'object'){
+            audioTag.src = settings.audioList[0].source;
+            for(var i=0; i<settings.audioList.length; i++){
+                var _option = new Option(settings.audioList[i].title, settings.audioList[i].source);
+                audioList.add(_option);
+            }
+        }else{
+            audioTag.src = settings.audioList;
+            audioList.style.display = 'none';
+        }
+
+        var audioFn = {
+            play: function(url) {
+                if(url) audioTag.src = url;
+                audioButton.innerHTML = "►";
+                audioTag.play();
+            },
+            stop: function() {
+                audioButton.innerHTML = "░";
+                audioTag.pause();
+            }
+        };
+
+        var _device = (/Android|iPhone|iPad|iPod|BlackBerry|webOS|Windows Phone|SymbianOS|IEMobile|Opera Mini/i.test(navigator.userAgent));
+        var clickEvtName = _device ? "touchstart" : "mousedown";
+
+        //给按钮绑定事件
+        audioButton.addEventListener(clickEvtName, function(e){
+            //判断播放状态
+            if(this.state) {
+                this.state = false;
+                audioFn.stop();
+            }else{
+                this.state = true;
+                audioFn.play();
+            }
+        });
+
+        //从下拉列表选择歌曲播放
+        audioList.addEventListener("change", function(e){
+            var muiscName = this.options[this.selectedIndex].value;
+            audioFn.play(muiscName);
+            audioButton.state = true;
+        });
+    };
+
+    global[__INFO__.plugins] = PlayCode;
+})(typeof window !== 'undefined' ? window : this);
diff --git a/js/muisc_play.min.js b/js/muisc_play.min.js
diff --git a/music/大王叫我来巡山.mp3 b/music/大王叫我来巡山.mp3
diff --git a/music/独角戏.mp3 b/music/独角戏.mp3