更换播放器

在文件未包含图片的情况下，寻找cover.jpg
读取元数据失败时，用文件名作为标题

src/main/java/com/yutou/tools/ToolsApplication.java

@@ -11,6 +11,7 @@ public class ToolsApplication {
     public static void main(String[] args) {
         SpringApplication.run(ToolsApplication.class, args);
         RedisTools.initRedisPoolSub();
+        MusicTools.getInstance().setMusicPath("Z:\\音乐\\Aimer - ARIA STRINGS");
         MusicTools.getInstance().scanMusic();
     }
 

src/main/java/com/yutou/tools/home/nas/Data/MusicData.java

@@ -9,8 +9,9 @@ import org.jaudiotagger.audio.exceptions.ReadOnlyFileException;
 import org.jaudiotagger.tag.Tag;
 import org.jaudiotagger.tag.TagException;
 
-import java.io.File;
-import java.io.IOException;
+import java.io.*;
+import java.nio.file.Files;
+import java.nio.file.Paths;
 
 @Data
 public class MusicData {
@@ -25,16 +26,30 @@ public class MusicData {
     private String artist_sort;//分类
     private File file;//音乐文件
 
-    public byte[] readImage() {
+    public byte[] readImage() throws Exception {
         AudioFile audioFile = null;
-        try {
-            audioFile = AudioFileIO.read(file);
-            Tag tag = audioFile.getTag();
-            return tag.getFirstArtwork().getBinaryData();
-        } catch (Exception e) {
-            e.printStackTrace();
+        audioFile = AudioFileIO.read(file);
+        Tag tag = audioFile.getTag();
+        if (tag.getFirstArtwork() == null) {
+            return readImageFile();
         }
-        return null;
+        return tag.getFirstArtwork().getBinaryData();
+    }
+
+    private byte[] readImageFile() throws Exception {
+        String path = file.getAbsolutePath().replace(file.getName(), "");
+        File img = new File(path, "cover.jpg");
+        if (!img.exists()) {
+            img = new File(path, "Cover.jpg");
+            if (!img.exists()) {
+                img = new File(path, "COVER.jpg");
+                if(!img.exists()){
+                    return null;
+                }
+            }
+        }
+
+        return Files.readAllBytes(Paths.get(img.getAbsolutePath()));
     }
 
 }

src/main/java/com/yutou/tools/home/nas/MusicController.java

@@ -13,6 +13,8 @@ import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.ResponseBody;
 
 import java.io.File;
+import java.io.UnsupportedEncodingException;
+import java.net.URLEncoder;
 import java.util.Base64;
 import java.util.List;
 
@@ -28,12 +30,11 @@ public class MusicController {
     public String getAllMusicList() {
         JSONObject json = new JSONObject();
         JSONObject data = new JSONObject();
-        json.put("code", 1);
+        json.put("code", 0);
         MusicTools tools = MusicTools.getInstance();
-        data.put("scan", tools.isScan());
-        data.put("size", tools.getLength());
-        data.put("list", JSONArray.toJSON(tools.getMusicList()));
-        json.put("data", data);
+        json.put("scan", tools.isScan());
+        json.put("size", tools.getLength());
+        json.put("data",  JSONArray.toJSON(tools.getMusicList()));
         return json.toJSONString();
     }
     @RequestMapping("list.do")
@@ -55,6 +56,19 @@ public class MusicController {
         return json.toJSONString();
 
     }
+    @RequestMapping("find/file.do")
+    @ResponseBody
+    public String findFile(String path){
+        JSONObject json=new JSONObject();
+        if(StringUtils.isEmpty(path)){
+            json.put("code",0);
+            json.put("msg","地址为空");
+            return json.toJSONString();
+        }
+        json.put("code",1);
+        json.put("data",MusicTools.getInstance().getMetadata(new File(base64ToString(path))));
+        return json.toJSONString();
+    }
 
     @RequestMapping("image.do")
     @ResponseBody
@@ -67,32 +81,58 @@ public class MusicController {
             json.put("data", "");
             return json.toJSONString();
         }
-        File file = new File(new String(Base64.getDecoder().decode(fileName.getBytes())));
-        if (file.exists()) {
-            json.put("msg", "ok");
-            json.put("code", 1);
-            json.put("data", MusicTools.getInstance().getMetadata(file).readImage());
-        } else {
-            json.put("msg", "文件不存在");
+        File file = new File(base64ToString(fileName));
+        try {
+            if (file.exists()) {
+                json.put("msg", "ok");
+                json.put("code", 1);
+                json.put("data", MusicTools.getInstance().getMetadata(file).readImage());
+            } else {
+                json.put("msg", "文件不存在");
+                json.put("code", 0);
+                json.put("data", "");
+            }
+        }catch (Exception e){
+            json.put("msg", "图片读取失败");
             json.put("code", 0);
             json.put("data", "");
+            e.printStackTrace();
+        }
+
+        return json.toJSONString();
+    }
+    @RequestMapping("random.do")
+    @ResponseBody
+    public String random(){
+        List<MusicData> list=MusicTools.getInstance().getMusicList();
+        MusicData data=list.get(Tools.randomCommon(0,list.size()-1,1)[0]);
+        JSONObject json=new JSONObject();
+        json.put("code",1);
+        try {
+            json.put("data", URLEncoder.encode(getBase64(data.getFile().getAbsolutePath()),"UTF-8"));
+        } catch (UnsupportedEncodingException e) {
+            e.printStackTrace();
         }
         return json.toJSONString();
     }
-
+    private String getBase64(String str){
+        return new String(Base64.getEncoder().encode(str.getBytes()));
+    }
+    private String base64ToString(String base){
+        base=base.replace(" ","+");
+        return new String(Base64.getDecoder().decode(base.replace("\r\n","").getBytes()));
+    }
     @RequestMapping("play.do")
     public ResponseEntity<FileSystemResource> play(String filePath,boolean random) {
         if(!StringUtils.isEmpty(filePath)){
-            filePath=new String(Base64.getDecoder().decode(filePath.getBytes()));
+            filePath=base64ToString(filePath);
         }
         if(random){
             List<MusicData> list=MusicTools.getInstance().getMusicList();
+            System.out.println("size = "+list.size());
             MusicData data=list.get(Tools.randomCommon(0,list.size()-1,1)[0]);
-            if(data==null){
-                System.out.println("随机歌曲:"+data.getTitle());
-                return play(filePath, true);
-            }
             filePath=data.getFile().getAbsolutePath();
+            System.out.println("随机歌曲:"+data.getTitle());
         }
         File file = new File(filePath);
         if (file.exists()) {
@@ -101,4 +141,5 @@ public class MusicController {
             return null;
         }
     }
+
 }

src/main/java/com/yutou/tools/utils/MusicTools.java

@@ -3,11 +3,14 @@ package com.yutou.tools.utils;
 import com.yutou.tools.home.nas.Data.MusicData;
 import org.jaudiotagger.audio.AudioFile;
 import org.jaudiotagger.audio.AudioFileIO;
+import org.jaudiotagger.audio.exceptions.CannotReadException;
 import org.jaudiotagger.tag.FieldKey;
 import org.jaudiotagger.tag.Tag;
+import org.springframework.util.StringUtils;
 
 import java.io.*;
 import java.util.ArrayList;
+import java.util.Base64;
 import java.util.List;
 import java.util.Objects;
 
@@ -27,15 +30,14 @@ public class MusicTools {
         return tools;
     }
 
-    public MusicTools() {
-        scanMusic();
-    }
-
-    public void scanMusic() {
+    public synchronized void scanMusic() {
+        System.out.println("执行扫描");
+        musicList.clear();
         new Thread(() -> {
             isScan = true;
             scan(new File(musicPath));
             isScan = false;
+            System.out.println("扫描完成");
         }).start();
     }
 
@@ -78,22 +80,62 @@ public class MusicTools {
 
     public MusicData getMetadata(File file) {
         try {
+            if (file.getName().endsWith(".lrc") || file.getName().endsWith(".jpg")) {
+                return null;
+            }
             AudioFile audioFile = AudioFileIO.read(file);
             Tag tag = audioFile.getTag();
             MusicData data = new MusicData();
-            data.setAlbum(tag.getFirst(FieldKey.ALBUM));
-            data.setArtist(tag.getFirst(FieldKey.ARTIST));
-            data.setArtist_sort(tag.getFirst(FieldKey.ARTIST_SORT));
-            data.setComment(tag.getFirst(FieldKey.COMMENT));
-            data.setComposer(tag.getFirst(FieldKey.COMPOSER));
-            data.setDisc_no(tag.getFirst(FieldKey.DISC_NO));
-            data.setTitle(tag.getFirst(FieldKey.TITLE));
-            data.setTrack(tag.getFirst(FieldKey.TRACK));
-            data.setYear(tag.getFirst(FieldKey.YEAR));
+            try {
+                data.setAlbum(tag.getFirst(FieldKey.ALBUM));
+            } catch (Exception e) {
+            }
+            try {
+                data.setArtist(tag.getFirst(FieldKey.ARTIST));
+            } catch (Exception e) {
+            }
+            try {
+                data.setArtist_sort(tag.getFirst(FieldKey.ARTIST_SORT));
+            } catch (Exception e) {
+            }
+            try {
+                data.setComment(tag.getFirst(FieldKey.COMMENT));
+            } catch (Exception e) {
+            }
+            try {
+                data.setComposer(tag.getFirst(FieldKey.COMPOSER));
+            } catch (Exception e) {
+            }
+            try {
+                data.setDisc_no(tag.getFirst(FieldKey.DISC_NO));
+            } catch (Exception e) {
+            }
+            try {
+                if (StringUtils.isEmpty(tag.getFirst(FieldKey.TITLE))) {
+                    data.setTitle(file.getName());
+                } else {
+                    data.setTitle(tag.getFirst(FieldKey.TITLE));
+                }
+            } catch (Exception e) {
+                data.setTitle(file.getName());
+            }
+            try {
+                data.setTrack(tag.getFirst(FieldKey.TRACK));
+            } catch (Exception e) {
+            }
+            try {
+                data.setYear(tag.getFirst(FieldKey.YEAR));
+            } catch (Exception e) {
+            }
+            data.setFile(file);
+            return data;
+        } catch (CannotReadException e) {
+            MusicData data = new MusicData();
+            data.setTitle(file.getName());
             data.setFile(file);
             return data;
         } catch (Exception e) {
-            //e.printStackTrace();
+            e.printStackTrace();
         }
         return null;
     }
@@ -129,6 +171,7 @@ public class MusicTools {
         return list;
     }
 
+
     public String getMusicPath() {
         return musicPath;
     }
@@ -155,7 +198,9 @@ public class MusicTools {
     }
 
     public static void main(String[] args) {
-
+        String base = "Wjpc6Z-z5LmQXOOAkOmbqOWuruWkqeOAkU1PUkEg5YWo5aWXMTHlvKBIaXJlc-S4k-i-kVxbMjAyMDA5MDJdIOmbqOWuruWkqSAzcmTjgqLjg6vjg5Djg6DjgIxQYWludCBpdCwgQkxVReOAjVs5NmtIejI0Yml0XVtGTEFDXVwwMDMtRGVmaWFuY2UuZmxhYw==";
+        System.out.println(new String(Base64.getDecoder().decode(base)));
     }
 
+
 }

web/css/AudioPlayer.css

@@ -0,0 +1,245 @@
+@charset "utf-8";
+
+#componentWrapper,
+#componentWrapper *{
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: none;
+}
+#componentWrapper {
+    position: relative;
+    height: 40px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 15px;
+    display: -webkit-flex;
+    display: flex;
+}
+
+#componentWrapper .controls_toggle {
+    position: relative;
+    width: 40px;
+    height: 40px;
+    background: #333;
+    border-right: 1px solid #555;
+    border-right-color: rgba( 255, 255, 255, .1);
+    background-image: url(./image/player_bg2.png);
+    background-repeat: repeat-x;
+    -webkit-box-shadow: 1px 1px 6px #333;
+    box-shadow: 1px 1px 6px #333;
+    behavior: url(PIE.htc);
+    cursor: pointer;
+}
+
+#componentWrapper .controls_toggle img {
+    display: block;
+    position: absolute;
+    width: 12px;
+    height: 15px;
+    left: 50%;
+    top: 50%;
+    margin-left: -6px;
+    margin-top: -8px;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+#componentWrapper .player_mediaTime_current {
+    position: relative;
+    width: 60px;
+    height: 40px;
+    color: white;
+    text-align: center;
+    line-height: 40px;
+    border-left: 1px solid #111;
+    border-left: 1px solid rgba( 0, 0, 0, .25);
+    background-image: url(./image/player_bg2.png);
+    background-repeat: repeat-x;
+    -webkit-box-shadow: 1px 1px 6px #333;
+    box-shadow: 1px 1px 6px #333;
+    behavior: url(PIE.htc);
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+#componentWrapper .player_progress {
+    position: relative;
+    height: 40px;
+    background-image: url(./image/player_bg2.png);
+    background-repeat: repeat-x;
+    -webkit-box-shadow: 1px 1px 6px #333;
+    box-shadow: 1px 1px 6px #333;
+    behavior: url(PIE.htc);
+    cursor: pointer;
+    flex: 1;
+}
+
+#componentWrapper .progress_bg {
+    position: absolute;
+    height: 10px;
+    background: #222;
+    top: 15px;
+    left: 10px;
+    right: 10px;
+    -webkit-box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5), 1px 1px 0 rgba( 255, 255, 255, .1);
+    box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5), 1px 1px 0 rgba( 255, 255, 255, .1);
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+}
+
+#componentWrapper .load_progress {
+    position: absolute;
+    height: 10px;
+    background: #444;
+    top: 15px;
+    left: 10px;
+    right: 10px;
+    width: 0px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+}
+
+#componentWrapper .play_progress {
+    position: absolute;
+    height: 10px;
+    background: #fff;
+    top: 15px;
+    left: 10px;
+    right: 10px;
+    width: 0px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+}
+
+#componentWrapper .player_progress_tooltip {
+    position: relative;
+    top: -10px;
+    width: 72px;
+    background: #333;
+    height: 16px;
+    display: none;
+    text-align: center;
+    -webkit-box-shadow: 1px 1px 3px #222;
+    box-shadow: 1px 1px 3px #222;
+    behavior: url(PIE.htc);
+}
+
+#componentWrapper .player_progress_tooltip p {
+    color: white;
+    font-size: 10px;
+    margin: 0;
+    line-height: 16px;
+}
+
+#componentWrapper .player_mediaTime_total {
+    position: relative;
+    width: 60px;
+    height: 40px;
+    color: white;
+    text-align: center;
+    line-height: 40px;
+    border-right: 1px solid #555;
+    border-right: 1px solid rgba( 255, 255, 255, .1);
+    background-image: url(./image/player_bg2.png);
+    background-repeat: repeat-x;
+    -webkit-box-shadow: 1px 1px 6px #333;
+    box-shadow: 1px 1px 6px #333;
+    behavior: url(PIE.htc);
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+#componentWrapper .player_volume_wrapper {
+    position: relative;
+    height: 40px;
+    display: -webkit-flex;
+    display: flex;
+}
+
+#componentWrapper .player_volume {
+    position: relative;
+    width: 40px;
+    height: 40px;
+    border-left: 1px solid #111;
+    border-left-color: rgba( 0, 0, 0, .25);
+    background-image: url(./image/player_bg2.png);
+    background-repeat: repeat-x;
+    -webkit-box-shadow: 1px 1px 6px #333;
+    box-shadow: 1px 1px 6px #333;
+    behavior: url(PIE.htc);
+    cursor: pointer;
+}
+
+#componentWrapper .player_volume img {
+    display: block;
+    position: absolute;
+    width: 18px;
+    height: 16px;
+    left: 50%;
+    top: 50%;
+    margin-left: -9px;
+    margin-top: -8px;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+#componentWrapper .volume_seekbar {
+    position: relative;
+    width: 80px;
+    height: 40px;
+    background-image: url(./image/player_bg2_vol.png);
+    background-repeat: repeat-x;
+    -webkit-box-shadow: 1px 1px 6px #333;
+    box-shadow: 1px 1px 6px #333;
+    behavior: url(PIE.htc);
+    /*display: none;*/
+    cursor: pointer;
+}
+
+#componentWrapper .volume_bg {
+    position: absolute;
+    width: 60px;
+    height: 10px;
+    background: #222;
+    bottom: 15px;
+    left: 10px;
+    -webkit-box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5), 1px 1px 0 rgba( 255, 255, 255, .1);
+    box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5), 1px 1px 0 rgba( 255, 255, 255, .1);
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+}
+
+#componentWrapper .volume_level {
+    position: absolute;
+    width: 30px;
+    height: 10px;
+    background: #fff;
+    bottom: 15px;
+    left: 10px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+}
+
+#componentWrapper .player_volume_tooltip {
+    position: relative;
+    left: -15px;
+    top: -4px;
+    width: 35px;
+    height: 16px;
+    background: #333;
+    display: none;
+    text-align: center;
+    -webkit-box-shadow: 1px 1px 3px #222;
+    box-shadow: 1px 1px 3px #222;
+    behavior: url(PIE.htc);
+}
+
+#componentWrapper .player_volume_tooltip p {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 10px;
+    color: #ffffff;
+    margin: 0;
+    line-height: 18px;
+}

web/html/body/nas/music.html

@@ -13,30 +13,22 @@
     <div id="header"></div>
     <div class="layui-body" style="left: 200px;">
         <div id="side"></div>
-        <div style="margin-left: 5%; margin-top: 5%;">
+
+        <div style="margin-left: 2%; margin-top: 2%;">
             <div>
-                <img src="/assets/defaultPlayImg.jpg" id="img" style="height: 400px; width: 400px"/>
+                <img src="/assets/defaultPlayImg.jpg" id="img" style="height: 200px; width: 200px"/>
+
                 <div style="display:inline-block;">
-                    <div>title</div>
-                    <div>by</div>
-                    <div>(0/0)</div>
-                    <video id="my-video" loop='true' class="video-js" controls preload="auto" width="500" height="400"
-                           poster="/assets/defaultPlayImg.jpg" data-setup="{}" autoplay="autoplay">
-                        <source src="/nas/music/play.do?random=true" type="video/ogg">
-                        <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a
-                            web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports
-                                HTML5 video</a></p>
-                    </video>
-                </div>
-            </div>
-            <div style="margin-top: 20px;">
-                <div class="layui-col-md6 layui-col-md6">
-                    <button type="button" class="layui-icon layui-icon-play"
-                            style="width: 70px;height: 60px; font-size: 50px;"></button>
-                    <button type="button" class="layui-icon layui-icon-triangle-r"
-                            style="width: 70px;height: 60px; font-size: 50px;"></button>
+                    <div id="title">title</div>
+                    <div id="artist">by</div>
+                    <div id="album">album</div>
+                    <div id="composer">composer</div>
                 </div>
+
+                <div id="audioWrap"></div>
+
             </div>
+            <table id="playlist" lay-filter="music" ></table>
         </div>
 
         <div id="footer"></div>
@@ -45,28 +37,105 @@
 <script src="/layui/layui.js"></script>
 <script src="/js/jquery-3.2.1.js"></script>
 <script src="/js/video.min.js"></script>
+<script src="/js/myjs.js"></script>
+<link rel="stylesheet" href="/css/AudioPlayer.css">
+<script src="/js/AudioPlayer.js"></script>
 <script>
+    //let localhost="http://192.168.31.88:8000";
+    let localhost="";
+    layui.use('table', function () {
+        let table = layui.table;
+        table.render({
+            elem: '#playlist'
+            , height: 312
+            , url: localhost+'/nas/music/all.do' //数据接口
+            , page: true //开启分页
+            , cols: [[
+                {field: 'title', title: '标题', width: 400}
+                , {field: 'artist', title: '艺术家', width: 200}
+                , {field: 'album', title: '专辑', width: 200}
+                , {field: 'composer', title: '作曲', width: 200}
+                , {field: 'track', title: '音轨号', width: 100}
+            ]]
+        })
+        table.on('rowDouble(music)', function(obj){
+            //obj 同上
+            console.log(obj.data.file) //得到当前行元素对象
+            play(obj.data.file)
+        });
+    });
     $.get("/login/check.do", function (data) {
         let json = JSON.parse(data);
         if (json.code !== 0) {
             window.location.href = "/"
         }
     })
+    let player = $.AudioPlayer;
+    player.init({
+        container: '#audioWrap'
+        , source: ''
+        , imagePath: '/assets/'
+        , debuggers: false
+        , allowSeek: true
+        , endedCallback: function () {
+            console.log('播放完成')
+            random()
+        },canplayCallback:function () {
+            console.log("点击播放")
+        }
+    });
     $.ajax({cache: false})
     $('#header').load("/html/header.html");
     $('#footer').load("/html/footer.html");
     $('#side').load("/html/body/nas/side.html");
-    $('#button').click(function () {
-        console.log("123")
-        $.get("/nas/music/image.do?fileName=QzpcXFVzZXJzXFxhZG1pblxcTXVzaWNcXDM0LeWlrui1t%2BOBruODiOODqeODs%2BODmuODg%2BODiC5mbGFj", function (data) {
+    $('#img').click(function () {
+        random()
+    });
+
+    function random() {
+        $.get(localhost+"/nas/music/random.do", function (data) {
             let json = JSON.parse(data)
             if (json.code === 1) {
-                $('#img').attr("src", "data:image/png;base64," + json.data)
+                player.updateSource({
+                    source: localhost+"/nas/music/play.do?random=false&filePath=" + json.data
+                });
+                update(json.data)
+                player.play()
+
             } else {
                 layer.msg(json.msg)
             }
         })
-    })
+    }
+    function play(file) {
+        let filePath=escape(new Base64().encode(file))
+        player.updateSource({
+            source:localhost+"/nas/music/play.do?random=false&filePath=" +filePath
+        });
+        update(filePath)
+        player.play()
+    }
+    function update(fileName) {
+        $.get(localhost+'/nas/music/find/file.do?path=' + fileName, function (data) {
+            let json = JSON.parse(data);
+            if (json.code === 0) {
+                layer.msg(json.msg);
+                return
+            }
+            $('#title').html("标题:" + json.data.title)
+            $('#artist').html("艺术家:" + json.data.artist)
+            $('#album').html("专辑:" + json.data.album)
+            $('#composer').html("作曲:" + json.data.composer)
+        })
+        $.get(localhost+"/nas/music/image.do?fileName=" + fileName, function (data) {
+            let json = JSON.parse(data);
+            if (json.code === 0) {
+                layer.msg(json.msg);
+                return
+            }
+            $('#img').attr("src", "data:image/png;base64," + json.data)
+        })
+    }
 
 </script>
 <style>

web/js/AudioPlayer.js

@@ -0,0 +1,472 @@
+/**
+ * jQuery.AudioPlayer.js
+ * @Author Keystion
+ * @Version 1.0.1
+ * Created by Keystion on 2016-12-19. Update on 2017-01-06
+ * https://github.com/Keystion/jQuery.AudioPlayer.js
+ */
+;(function(jQuery){
+    "use strict";
+    var AudioPlayer = {
+        options: {
+            // open console log / 打开控制台日志
+            debuggers: false
+            // The outer Dom ClassName/id, default 'body'
+            // 外部Dom ClassName / id，默认的“body”
+            ,container: 'body'
+            // audio source / 音频源
+            ,source: ''
+            // image resources / 图像资源
+            ,imagePath: './image'
+            // Determines whether or not the player is playing before dragging/判断拖拽之前是否正在播放
+            ,seekNum: 0
+            // Whether to support drag and drop, the default open: `true` / 是否支持拖拽，默认开启：`true`
+            ,allowSeek: true
+            // After can play TODO / 可以播放之后，做某些事情
+            ,canplayCallback: null
+            // After playback TODO / 播放之后，做某些事情
+            ,playCallback: null
+            // After the suspension TODO / 暂停之后，做某些事情
+            ,pauseCallback: null
+            // After the drag TODO / 拖动之后，做某些事情
+            ,timeupdateCallback: null
+            // After the drag, the callback function (`allowSeek: false`) / 拖动之后，回调函数（`allowSeek: false`）
+            ,seekedCallback: null
+            // End of the play TODO / 播放结束之后，做某些事情
+            ,endedCallback: null
+            // After the mute TODO / 静音之后，做某些事情
+            ,mutedCallback: null
+            // template dom / 模板节点
+            ,template: $('<div id="componentWrapper">' +
+                '<audio id="audio-element" style="display: none;">您的浏览器不支持 audio 标签。</audio>' +
+                '<div class="controls_toggle"><img src="" alt="controls_toggle" /></div>' +
+                '<div class="player_mediaTime_current">00:00</div>' +
+                '<div class="player_progress">' +
+                '<div class="progress_bg"></div>' +
+                '<div class="load_progress"></div>' +
+                '<div class="play_progress"></div>' +
+                '<div class="player_progress_tooltip">' +
+                '<p></p>' +
+                '</div>' +
+                '</div>' +
+                '<div class="player_mediaTime_total">00:00</div>' +
+                '<div class="player_volume_wrapper">' +
+                '<div class="player_volume"><img src="" alt="player_volume" /></div>' +
+                '<div class="volume_seekbar">' +
+                '<div class="volume_bg"></div>' +
+                '<div class="volume_level"></div>' +
+                '<div class="player_volume_tooltip">' +
+                '<p></p>' +
+                '</div>' +
+                '</div>' +
+                '</div>' +
+                '</div>')
+        }
+        // elements
+        ,elements: {}
+        // initialize
+        ,init: function(options) {
+            var _this = this;
+            if (!options || !options.container) {
+                return false;
+            }
+            this.options = $.extend(this.options, options);
+
+            // audio DOM
+            _this.elements.audioDom = _this.options.template.find('audio')[0];
+            _this.elements.componentWrapper = _this.options.template.find('#componentWrapper');
+            // Play button / 播放按钮
+            _this.elements.playButton = _this.options.template.find('.controls_toggle');
+            // The current time / 当前时间
+            _this.elements.currentTime = _this.options.template.find('.player_mediaTime_current');
+            // The total length / 总时长
+            _this.elements.totalTime = _this.options.template.find('.player_mediaTime_total');
+            // Loading progress bar / 加载进度条
+            _this.elements.loadProgress = _this.options.template.find('.load_progress');
+            // Playback progress bar / 播放进度条
+            _this.elements.playProgress = _this.options.template.find('.play_progress');
+            // Playback progress bar wrap / 播放进度条wrap
+            _this.elements.playProgressWrap = _this.options.template.find('.player_progress');
+            // The total length of playback progress bar / 播放进度条总长
+            _this.elements.totalPlayProgress = _this.options.template.find('.progress_bg');
+            // Mute button / 静音按钮
+            _this.elements.mutedButton = _this.options.template.find('.player_volume');
+            // The volume size wrap / 音量大小wrap
+            _this.elements.volumeWrap = _this.options.template.find('.volume_seekbar');
+            // The volume chief / 音量总长
+            _this.elements.totalVolume = _this.options.template.find('.volume_bg');
+            // The current volume / 当前音量
+            _this.elements.currentVolume = _this.options.template.find('.volume_level');
+            // The tooltips of the volume / 音量提示条
+            _this.elements.tipsVolume = _this.options.template.find('.player_volume_tooltip');
+            $(_this.options.container).append(_this.options.template);
+
+            _this.elements.playButton.find('img').attr('src', _this.options.imagePath + '/play.png');
+            _this.elements.mutedButton.find('img').attr('src', _this.options.imagePath + '/volume.png');
+
+            if(options.source){
+                _this.updateSource({source: options.source, callback: function(){ _this.log('The audio source has been updated') }});
+            }
+
+            _this.elements.currentVolume.width((60 / 100 * _this.elements.audioDom.volume * 100) + 'px');
+
+            // Initialize the event / 初始化事件
+            _this.events();
+        }
+        // Update the audio source foo. / 更新音频源
+        ,updateSource: function(o){
+            var _this = this;
+            // reset
+            _this.reset();
+
+            // Update the audio source / 更新音频源
+            _this.elements.audioDom.setAttribute('src', o.source);
+
+            // callback
+            if(typeof o.callback == 'function'){
+                o.callback();
+            }
+        }
+        // dom events
+        ,events: function() {
+            var _this = this;
+
+            // Monitor window changes to do some of the UI update / 监听窗口的变化做一些UI的更新
+            $(window).resize(function(event) {
+
+                // Update the width of the download progress bar / 更新下载进度条的宽度
+                _this.setLoadProgressWidth();
+                // Update the playback progress bar width / 更新播放进度条的宽度
+                _this.elements.playProgress.width((_this.elements.audioDom.currentTime / _this.elements.audioDom.duration) * $('.progress_bg').width());
+            });
+
+            // Adjust the size of sound / 调节声音大小
+            _this.elements.volumeWrap.on("mouseenter", function(event) {
+                event.preventDefault();
+            }).on("mouseleave", function(event) {
+                event.preventDefault();
+                _this.elements.tipsVolume.css('display', 'none');
+                _this.setvolume();
+            }).on('mousemove', function(event) {
+                event.preventDefault();
+                if ((event.pageX - _this.elements.totalVolume.offset().left) > 0 && (event.pageX - _this.elements.totalVolume.offset().left) < (_this.elements.totalVolume.width() + 1)) {
+                    _this.elements.tipsVolume.css({
+                        'display': 'block',
+                        "left": parseInt(event.pageX - _this.elements.totalVolume.offset().left + _this.elements.totalVolume.width() / 2 - 40, 10) + "px"
+                    });
+                    _this.elements.tipsVolume.find("p").html(_this.sumVolume(event) + " %");
+                    _this.elements.currentVolume.width(event.pageX - _this.elements.totalVolume.offset().left + "px");
+                }
+            }).on('mouseup', function(event) {
+                event.preventDefault();
+                _this.elements.currentVolume.width(event.pageX - _this.elements.totalVolume.offset().left + "px");
+
+                _this.setvolume({
+                    event: event
+                });
+            });
+
+            _this.elements.mutedButton.on('click', function(event) {
+                event.preventDefault();
+                /* Act on the event */
+                _this.muted();
+            });
+
+            // Playback progress bar drag and drop events / 播放进度条拖拽事件
+            // To determine whether to allow drag and drop / 判断是否允许拖拽
+            if(_this.options.allowSeek){
+                _this.elements.playProgressWrap.on('mousedown', function(event) {
+                    event.preventDefault();
+                    if (_this.elements.audioDom.paused) {
+                        _this.options.seekNum = 1;
+                    } else {
+                        _this.options.seekNum = 2;
+                        _this.pause();
+                    }
+                    // The mouse click will update the progress bar / 鼠标按下就更新进度条
+                    _this.setPlayProgressWidth(event);
+                }).on('mousemove', function(event) {
+                    event.preventDefault();
+                    // Determine whether have begun to move will set the progress bar / 判断是否已经开始移动 才会设置进度条
+                    _this.options.seekNum != 0 && _this.setPlayProgressWidth(event);
+                }).on('mouseup', function(event) {
+                    event.preventDefault();
+                    // TODO
+                    // Is it necessary to when the mouse button to lift again to update the playback progress bar width
+                    // 是否有必要在鼠标按键抬起的时候再次去更新播放进度条宽度
+                    // _this.setPlayProgressWidth(event);
+                    if (_this.options.seekNum == 1) {
+                        _this.pause();
+                    } else {
+                        _this.play();
+                    }
+                    _this.options.seekNum = 0;
+                    if(typeof _this.options.seekedCallback == 'function'){
+                        _this.options.seekedCallback({'status': _this.elements.audioDom.seeked});
+                    }
+                })
+            }else{
+                _this.elements.playProgressWrap.on('mousedown', function(event) {
+                    event.preventDefault();
+                    if(typeof _this.options.seekedCallback == 'function'){
+                        _this.options.seekedCallback();
+                    }else{
+                        alert('暂时不支持拖拽');
+                        return false;
+                    }
+                })
+            }
+
+            // Click event broadcast suspended / 播放暂停点击事件
+            _this.elements.playButton.on('click', function(event) {
+                event.preventDefault();
+                _this.toggleplay({
+                    playCallback: function(){ _this.log('toggleplay：play') },
+                    pauseCallback: function(){ _this.log('toggleplay：pause') }
+                });
+            })
+
+            // When audio load has abandoned / 当音频的加载已放弃时
+            _this.elements.audioDom.onabort = function() {
+                _this.log('onabort');
+
+                _this.reset();
+            }
+
+            // When the browser can play audio / 当浏览器可以播放音频时
+            _this.elements.audioDom.oncanplay = function() {
+                _this.log('oncanplay');
+                // Determine the audio to load / 判断音频加载完毕
+                if (_this.elements.audioDom.readyState == 4) {
+                    var duration = Math.round(_this.elements.audioDom.duration);
+                    var minutes = Math.floor(duration / 60);
+                    minutes = 10 <= minutes ? minutes : "0" + minutes;
+                    duration = Math.floor(duration % 60);
+
+                    _this.elements.totalTime.html(minutes + ":" + (10 <= duration ? duration : "0" + duration));
+
+                    if(typeof _this.options.canplayCallback == 'function'){
+                        _this.options.canplayCallback({'status': true});
+                    }
+                }
+            }
+
+            // When the browser is downloading audio / 当浏览器正在下载音频时
+            _this.elements.audioDom.onprogress = function() {
+                if (_this.elements.audioDom.readyState == 4) {
+                    _this.elements.loadProgress.width((_this.elements.audioDom.buffered.end(0) / _this.elements.audioDom.seekable.end(0)) * _this.elements.totalPlayProgress.width());
+                }
+            };
+
+            // When the browser begins searching for the audio / 当浏览器开始查找音频时
+            _this.elements.audioDom.onloadstart = function() {
+                _this.log('onloadstart');
+            }
+
+            // When the audio has begun or is no longer suspended / 当音频已开始或不再暂停时
+            _this.elements.audioDom.onplay = function() {
+                _this.log('onplay');
+                _this.elements.playButton.find('img').attr('src', _this.options.imagePath + '/pause.png');
+            }
+
+            // When the audio has been suspended / 当音频已暂停时
+            _this.elements.audioDom.onpause = function() {
+                _this.log('onpause');
+                _this.elements.playButton.find('img').attr('src', _this.options.imagePath + '/play.png');
+            }
+
+            // When the current playlist has ended / 当目前的播放列表已结束时
+            _this.elements.audioDom.onended = function() {
+                _this.log('onended');
+
+                if(typeof _this.options.endedCallback == 'function'){
+                    _this.options.endedCallback({'status': _this.elements.audioDom.ended});
+                }
+            }
+
+            // When the user starts moving/jump to the new location in the audio
+            // 当用户开始移动/跳跃到音频中的新位置时
+            _this.elements.audioDom.onseeking = function() {
+                _this.log('onseeking');
+            }
+
+            // When the user has mobile/jump to the new location in the audio
+            // 当用户已移动/跳跃到音频中的新位置时
+            _this.elements.audioDom.onseeked = function() {
+                _this.log('onseeked');
+            }
+
+            // When the current playback position has changed
+            // 当目前的播放位置已更改时
+            _this.elements.audioDom.ontimeupdate = function() {
+                _this.log('ontimeupdate');
+                _this.timeupdate();
+            }
+
+            // When the volume is changed
+            // 当音量已更改时
+            _this.elements.audioDom.onvolumechange = function() {
+                _this.log('onvolumechange');
+                _this.setvolume();
+            }
+        }
+        // Toggle play/pause 切换播放/暂停
+        ,toggleplay: function(o) {
+            var _this = this;
+            if (_this.elements.audioDom.paused) {
+                _this.play(o.playCallback);
+            } else {
+                _this.pause(o.pauseCallback);
+            }
+        }
+        // Set the playback / 设置播放
+        ,play: function(o) {
+            var _this = this;
+            _this.elements.audioDom.play();
+            if (typeof o == 'function') {
+                o({'status': _this.elements.audioDom.play});
+            }
+
+            if(typeof _this.options.playCallback == 'function'){
+                _this.options.playCallback({'status': _this.elements.audioDom.play});
+            }
+        }
+        // Set the suspend / 设置暂停
+        ,pause: function(o) {
+            var _this = this;
+            _this.elements.audioDom.pause();
+            if (typeof o == 'function') {
+                o({'status': _this.elements.audioDom.play});
+            }
+
+            if(typeof _this.options.pauseCallback == 'function'){
+                _this.options.pauseCallback({'status': _this.elements.audioDom.play});
+            }
+        }
+        // muted / 设置静音否
+        ,muted: function(o) {
+            var _this = this;
+            if (_this.elements.audioDom.muted) {
+                _this.elements.audioDom.muted = false;
+                _this.elements.mutedButton.find('img').attr('src', _this.options.imagePath + '/volume.png');
+            } else {
+                _this.elements.audioDom.muted = true;
+                _this.elements.mutedButton.find('img').attr('src', _this.options.imagePath + '/mute.png');
+            }
+
+            if(typeof _this.options.mutedCallback == 'function'){
+                _this.options.mutedCallback({'status': _this.elements.audioDom.muted});
+            }
+        }
+        // Set the sound size / 设置声音大小
+        ,setvolume: function(options) {
+            var _this = this;
+            if (!options) {
+                _this.elements.currentVolume.width((_this.elements.totalVolume.width() / 100 * _this.elements.audioDom.volume * 100) + 'px');
+            } else {
+                if (options.event) {
+                    return _this.elements.audioDom.volume = _this.sumVolume(options.event) / 100;
+                } else {
+                    // TODO _this.log
+                    // Need to optimize / 需要优化
+                    _this.options.debuggers && console.error('缺少参数：options.event');
+                    return false;
+                }
+            }
+        }
+        // Set the playback progress bar / 设置播放进度条
+        ,setPlayProgressWidth: function(argument) {
+            var _this = this;
+            if (!argument) {
+                return false;
+            }
+
+            // if ((argument.clientX - _this.elements.playProgressWrap.offset().left) > _this.elements.loadProgress.width()) {
+            //     _this.elements.playProgress.width(argument.clientX - _this.elements.playProgressWrap.offset().left);
+            // } else {
+            _this.elements.playProgress.width(argument.clientX - _this.elements.playProgressWrap.offset().left);
+            _this.elements.audioDom.currentTime = (argument.clientX - _this.elements.playProgressWrap.offset().left) / _this.elements.totalPlayProgress.width() * _this.elements.audioDom.duration;
+            // }
+        }
+        // Set the width of the download progress bar / 设置下载进度条的宽度
+        ,setLoadProgressWidth: function(){
+            var _this = this;
+
+            // The audio of the ready state / 音频的就绪状态
+            // More docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
+            // TODO Add other state
+            if (_this.elements.audioDom.readyState == 4) {
+                _this.elements.loadProgress.width((_this.elements.audioDom.buffered.end(0) / _this.elements.audioDom.seekable.end(0)) * _this.elements.totalPlayProgress.width());
+            }
+        }
+        // Playing time change foo. / 播放时间更改
+        ,timeupdate: function() {
+            var _this = this;
+
+            var currTime = Math.floor(_this.elements.audioDom.currentTime).toString();
+            var duration = Math.floor(_this.elements.audioDom.duration).toString();
+
+            _this.elements.currentTime.html(_this.formatTime(currTime));
+
+            if (isNaN(duration)) {
+                _this.elements.totalTime.html('00:00');
+            } else {
+                _this.elements.totalTime.html(_this.formatTime(duration));
+            }
+            _this.elements.playProgress.width((_this.elements.audioDom.currentTime / _this.elements.audioDom.duration) * $('.progress_bg').width());
+        }
+        // Formatting a timestamp / 格式化时间戳相关
+        ,formatTime: function(secs, format) {
+            var hr = Math.floor(secs / 3600);
+            var min = Math.floor((secs - (hr * 3600)) / 60);
+            var sec = Math.floor(secs - (hr * 3600) - (min * 60));
+
+            if (min < 10) {
+                min = "0" + min;
+            }
+            if (sec < 10) {
+                sec = "0" + sec;
+            }
+
+            return min + ':' + sec;
+        }
+        // To calculate the volume / 计算音量
+        ,sumVolume: function(event) {
+            var _this = this;
+            if (!event) {
+                return false;
+            }
+            var num = event.pageX - _this.elements.totalVolume.offset().left;
+            num = Math.max(0, Math.min(1, num / _this.elements.totalVolume.width()));
+            num = parseInt(100 * num, 10);
+            return num;
+        }
+        // reset / 重置函数
+        ,reset: function(){
+            var _this = this;
+
+            // The play button to return to the initial state / 播放按钮回到初始状态
+            _this.elements.playButton.find('img').attr('src', _this.options.imagePath + '/play.png');
+            // The current playback time back to the initial state / 当前播放时间回到初始状态
+            _this.elements.currentTime.html('00:00');
+            // Total time to return to the initialization state / 总时间回到初始化状态
+            _this.elements.totalTime.html('00:00');
+            // The volume back to initialize the state / 音量回到初始化状态
+            _this.elements.currentVolume.width(_this.elements.totalVolume);
+            // Playback progress bar to initialize state / 播放进度条回到初始化状态
+            _this.elements.playProgress.width(0);
+            // Audio download progress bar back to the initial state / 音频下载进度条回到初始状态
+            _this.elements.loadProgress.width(0);
+        }
+        // Custom log / 定制log
+        ,log: function(log){
+            var _this = this;
+
+            if(_this.options.debuggers){
+                return console.info(log);
+            }
+        }
+    }
+
+    jQuery.AudioPlayer = AudioPlayer;
+})(jQuery);

web/js/myjs.js

@@ -0,0 +1,103 @@
+function Base64() {
+
+    // private property
+    _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+
+    // public method for encoding
+    this.encode = function (input) {
+        var output = "";
+        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
+        var i = 0;
+        input = _utf8_encode(input);
+        while (i < input.length) {
+            chr1 = input.charCodeAt(i++);
+            chr2 = input.charCodeAt(i++);
+            chr3 = input.charCodeAt(i++);
+            enc1 = chr1 >> 2;
+            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+            enc4 = chr3 & 63;
+            if (isNaN(chr2)) {
+                enc3 = enc4 = 64;
+            } else if (isNaN(chr3)) {
+                enc4 = 64;
+            }
+            output = output +
+                _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
+                _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
+        }
+        return output;
+    }
+
+    // public method for decoding
+    this.decode = function (input) {
+        var output = "";
+        var chr1, chr2, chr3;
+        var enc1, enc2, enc3, enc4;
+        var i = 0;
+        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
+        while (i < input.length) {
+            enc1 = _keyStr.indexOf(input.charAt(i++));
+            enc2 = _keyStr.indexOf(input.charAt(i++));
+            enc3 = _keyStr.indexOf(input.charAt(i++));
+            enc4 = _keyStr.indexOf(input.charAt(i++));
+            chr1 = (enc1 << 2) | (enc2 >> 4);
+            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
+            chr3 = ((enc3 & 3) << 6) | enc4;
+            output = output + String.fromCharCode(chr1);
+            if (enc3 != 64) {
+                output = output + String.fromCharCode(chr2);
+            }
+            if (enc4 != 64) {
+                output = output + String.fromCharCode(chr3);
+            }
+        }
+        output = _utf8_decode(output);
+        return output;
+    }
+
+    // private method for UTF-8 encoding
+    _utf8_encode = function (string) {
+        string = string.replace(/\r\n/g,"\n");
+        var utftext = "";
+        for (var n = 0; n < string.length; n++) {
+            var c = string.charCodeAt(n);
+            if (c < 128) {
+                utftext += String.fromCharCode(c);
+            } else if((c > 127) && (c < 2048)) {
+                utftext += String.fromCharCode((c >> 6) | 192);
+                utftext += String.fromCharCode((c & 63) | 128);
+            } else {
+                utftext += String.fromCharCode((c >> 12) | 224);
+                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+                utftext += String.fromCharCode((c & 63) | 128);
+            }
+
+        }
+        return utftext;
+    }
+
+    // private method for UTF-8 decoding
+    _utf8_decode = function (utftext) {
+        var string = "";
+        var i = 0;
+        var c = c1 = c2 = 0;
+        while ( i < utftext.length ) {
+            c = utftext.charCodeAt(i);
+            if (c < 128) {
+                string += String.fromCharCode(c);
+                i++;
+            } else if((c > 191) && (c < 224)) {
+                c2 = utftext.charCodeAt(i+1);
+                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
+                i += 2;
+            } else {
+                c2 = utftext.charCodeAt(i+1);
+                c3 = utftext.charCodeAt(i+2);
+                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
+                i += 3;
+            }
+        }
+        return string;
+    }
+}