html5+css3+js 编写的高性能及UI的音乐播放器

/**

     * 音乐播放器

     *

     * @Author Charles.Wu

     * @DateTime 2020-07-30

     * @Email wuliqiang_aa@163.com

     * @return void

     */

CSS： 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/noUiSlider/14.6.0/nouislider.css" />
<style>
    .music-global-paly {
        width: 100%;
        height: 91px;
        position: fixed;
        bottom: 0;
        background: rgba(25, 25, 25, 0.5);
        z-index: 9;
        left: 0;
        color: #fff;
        display: none;
    }
    .music-global-paly img {
        width: 100%;
    }
    .music-global-paly-1 {
        width: 100%;
        height: 100%;
        display: -webkit-inline-box;
    }
    .music-global-paly-1>div {
        height: 50%;
    }
    .music-global-paly-1-1 {
        width: 13%;
        display: -webkit-inline-box;
        line-height: 91px;
        margin-left: 19px;
    }
    .music-global-paly-1-1>span {
        display: block;
        width: 35px;
        margin-left: 12px;
        font-size: 16px;
        cursor: pointer;
    }
    .music-global-paly-1-1>span:nth-child(2) {
        font-size: 29px;
    }
    .music-global-paly-1-2 {
        width: 16%;
        line-height: 20px !important;
        margin-top: 20px;
        margin-left: 19px;
        padding-right: 19px;
        overflow: hidden;
    }
    .music-global-paly-1-2>div:nth-child(1) {
        font-size: 15px;
    }
    .music-global-paly-1-3 {
        width: 40%;
        margin-top: 28px;
    }
    .music-global-paly .progress {
        height: 34px;
        overflow: visible;
    }
    .music-global-paly-1-4 {
        width: 8%;
        margin-top: 22px;
        text-align: right;
        font-size: 12px;
        line-height: 25px;
    }
    .music-global-paly-1-5 {
        width: 21%;
        text-align: center;
        padding-left: 46px;
    }
    .music-global-paly-1-5-1 {
        display: -webkit-box;
        font-size: 22px;
        margin: 0 auto;
        margin-top: 17px;
    }
    .music-global-paly-1-5-1>div {
        margin-left: 24px;
        cursor: pointer;
    }
    .music-global-paly-1-5-2 {
        display: -webkit-box;
        font-size: 12px;
        margin: 0 auto;
        margin-top: 2px;
        padding-left: 12px;
    }
    .music-global-paly-1-5-2>div {
        margin-right: 24px;
        background: #2196f3;
        border: 1px solid #2196f3;
        border-radius: 4px;
        padding: 7px 10px 4px 10px;
        cursor: pointer;
        position: relative;
    }
    .music-global-paly-1-5-2>div>i {
        margin-right: 2px;
    }
    .music-global-paly-1-5-2>div>span {
        font-size: 12px;
    }
    .music-play-list {
        position: absolute;
        bottom: 92px;
        right: 60px;
        background: #2196F3;
        color: #fff;
        font-size: 14px;
        width: 314px;
        height: 168px;
        padding-top: 11px;
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 11px;
        border-radius: 5px;
        margin-right: 19px;
        display: none;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .music-play-list div {
        width: 100%;
        height: 19px;
        /* border-bottom: 1px solid #ffcfcf; */
        margin-bottom: 11px;
    }
    .music-play-list div span {
        height: 100%;
        display: -webkit-inline-box;
        cursor: pointer;
    }
    .music-play-list div span:nth-child(1) {
        float: left;
    }
    .music-play-list div span:nth-child(2) {
        width: 60%;
        height: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }
    .music-play-list div span:nth-child(3) {
        border-right: 1px solid #efefef;
        padding-right: 9px;
    }
    .music-play-list div span:nth-child(4) {
        float: right;
    }
    .music-play-list div span:nth-child(4)>i:nth-child(1) {
        margin-right: 9px;
    }
    .music-global-paly-1-5-1>div:nth-child(1):hover {
        display: block;
    }
    /*滚动条样式*/
    .music-play-list::-webkit-scrollbar {
        width: 6px;
    }
    .music-play-list::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
    }
    .music-play-list::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
    }
    .music-play-progress {
        position: relative;
    }
    .music-play-progress>p {
        float: right;
        position: absolute;
        right: -15px;
        bottom: -31px;
    }
    .open-music-detail-view>a {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .music-play-slider {
        margin-top: 15px;
        margin-left: 5px;
        border-bottom: 10px solid #e8e8e8;
    }
    .music-play-slider.noUi-horizontal {
        border-bottom: 0px solid #ccc;
    }
    .music-global-paly-1-3 .noUi-target {
        background: #ccc;
        border-radius: 0px;
        border: 0px solid #D3D3D3;
        box-shadow: none;
    }
    .music-global-paly-1-3 .noUi-horizontal {
        height: 3px;
    }
    .music-global-paly-1-3 .noUi-connect {
        background: #355FE9;
        border-radius: 0px;
        box-shadow: none;
        -webkit-transition: background 450ms;
        transition: background 450ms;
    }
    .music-global-paly-1-3 .noUi-handle {
        border: 0px solid #D9D9D9;
        border-radius: 0px;
        background: #355FE9;
        cursor: default;
        box-shadow: none;
    }
    .music-global-paly-1-3 .noUi-handle:after,
    .music-global-paly-1-3 .noUi-handle:before {
        display: none;
    }
    .music-global-paly-1-3 .noUi-horizontal .noUi-handle {
        width: 6px;
        height: 30px;
        border-radius: 3px;
        left: -3px;
        top: -10px;
        outline: none;
    }
    .music-global-paly-1-3 .noUi-horizontal .noUi-handle {
        background: url(/static/images/music-progress.png);
        background-size: 26px;
        background-repeat: no-repeat;
        background-position: center;
        width: 34px;
        height: 38px;
        margin-top: -9px;
    }
</style>

HTML:

<div class="music-global-paly">
    <div class="music-global-paly-1">
        <div class="music-global-paly-1-1">
            <span class="music-prev"><i class="glyphicon  glyphicon-step-backward"></i></span>
            <span class="music-play"><i class="glyphicon glyphicon-play"></i></span>
            <span class="music-next"><i class="glyphicon  glyphicon-step-forward"></i></span>
        </div>
        <div class="music-global-paly-1-2">
            <div>empty</div>
        </div>
        <div class="music-global-paly-1-3">
            <{* <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-success music-play-progress" role="progressbar" aria-valuenow="60"
                    aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                    <p>00:00</p>
                </div>
            </div> *}>
            <div class="music-play-slider"></div>
        </div>
        <div class="music-global-paly-1-4">
            <div><span class="music-play-progress-time">00:00</span> / <span>00:00</span></div>
            <div><span>0</span><span>BPM</span></div>
        </div>
        <div class="music-global-paly-1-5">
            <div class="music-global-paly-1-5-1">
                <div title="播放列表" ali="播放列表">
                    <i class="glyphicon glyphicon-list"></i>
                </div>
                <div title="收藏音乐" ali="收藏音乐" class="add-music-to-favorites">
                    <i class="glyphicon glyphicon-heart"></i>
                </div>
                <div title="下载音乐" ali="下载音乐" class="dow-music-to-local" dow-type="1">
                    <i class="glyphicon glyphicon-cloud-download"></i>
                </div>
                <div title="复制链接" ali="复制链接" class="share-music-to-view">
                    <i class="glyphicon glyphicon-share"></i>
                </div>
            </div>
            <div class="music-global-paly-1-5-2">
                <div title="置顶播放" ali="置顶播放" class="now-music-top-play">
                    <i class="glyphicon glyphicon-pushpin"></i><span>置顶播放</span>
                </div>
                <div title="查看详情" ali="查看详情" class="open-music-detail-view">
                    <a href="javascript:;" target="_blank"></a>
                    <i class="glyphicon glyphicon-piggy-bank"></i><span>查看详情</span>
                </div>
            </div>
        </div>
    </div>
    <div class="music-play-list"><span>没有播放列表</span></div>
</div>
<textarea id="share-music-to-view-copy" style="display:none">
    <div class="page-header">链接分享</div>
    <div style="text-align: center">
        <p id="share-music-to-view-copy-url">&nbsp;</p>
    </div>
    <div style="margin-top: 20px;text-align:center">
        <button class="btn btn-primary btn-sm" id="d_clip_button" data-clipboard-action="copy" data-clipboard-target="#fe_text" style="width: 80px;">复制</button>
    </div>
</textarea>

JS：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/noUiSlider/14.6.0/nouislider.js"></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script>
<script>
    //音乐播放器JS
    var mPlay = {
        sliding: false,
        initInfo: {},
        audio: '',
        db: {},
        request: {},
        databaseName: 'mPlay',
        version: 6,
        audio_address: 'https://pc.zt.localhost.com/audio/',
        //启动
        init: function (initInfo = {}) {
            if (initInfo == '{}') {
                return this.console(1, 'music error: 初始化失败');
            }
            // 创建数据库
            this.request('mPlay');
            //设置初始化
            initInfo.auto = initInfo.auto || true; // 自动播放
            initInfo.playInfo = initInfo.playInfo; // 要播放的音乐信息 id title url bpm time
            initInfo.topPlay = initInfo.topPlay || false;
            this.initInfo = initInfo;
            mPlayCookie = this.getCookie('mPlay');
            console.log(this.initInfo.auto);
            mPlayCookie = this.getCookie('mPlay');            if (mPlayCookie && this.initInfo.auto) {                //设置默认播放                this.initInfo.playInfo = this.setStringToArray(mPlayCookie, 2);            }            // 是否置顶            if (this.getCookie('topPlay') == 1) {                $('.now-music-top-play').find('i').css({                    "transform": "rotate(-44deg)",                    "transition": "transform 0.3s linear 0s",                });                $('.music-global-paly').slideDown();                //启动音乐                this.setMusic().play();            }            //检测是否显示播放器            if ($('.music-global-paly').css('display') == 'block') {                this.setPlayList();            }            //检测是否播放            if (this.audio){                //启动音乐                $('.music-global-paly').slideDown();            }
            return this;
        },
        // 设置播放列表
        setPlayList: function () {
            this.db_get('mPlay').then(res => {
                let html = '';
                $('.music-play-list').empty();
                let now_k = 1;
                $.each(res, function (k, v) {
                    if (v) {
                        html += '<div class="music-switch-play-parent" audio-elm="' + v.id +
                            '|' + v.title +
                            '|' + v.url + '|' + v.bpm + '|' + v
                            .time + '">';
                        html += '    <span>' + now_k + '.</span>';
                        html += '    <span class="music-switch-play">' + v.title + '</span>';
                        html += '    <span>' + v.time + '</span>';
                        html += '    <span>';
                        html +=
                            '        <i class="glyphicon glyphicon-save dow-music-to-local" dow-type="2"></i>';
                        html +=
                            '        <i class="glyphicon glyphicon-remove music-remove-list"></i>';
                        html += '    </span>';
                        html += '</div>';
                        now_k++;
                    }
                });
                $('.music-play-list').append(html);
                //如果播放列表为空或者只有一个，则立即播放
                if (res.length <= 1) {
                    this.initInfo.playInfo = res[0];
                    this.setMusic().play();
                }
            });
            /* var musicInfo = this.getCookie('mPlay');
            if (!musicInfo || musicInfo == null || musicInfo == undefined) {
                return this;
            }
            var musicInfoArr = this.setStringToArray(musicInfo);
            if (!musicInfoArr || musicInfoArr == null || musicInfoArr == undefined) {
                return this;
            }
            let html = '';
            $('.music-play-list').empty();
            let now_k = 1;
            $.each(musicInfoArr, function (k, v) {
                if (v) {
                    html += '<div class="music-switch-play-parent" audio-elm="' + v.id + '|' + v.title +
                        '|' + v.url + '|' + v.bpm + '|' + v
                        .time + '">';
                    html += '    <span>' + now_k + '.</span>';
                    html += '    <span class="music-switch-play">' + v.title + '</span>';
                    html += '    <span>' + v.time + '</span>';
                    html += '    <span>';
                    html += '        <i class="glyphicon glyphicon-remove dow-music-to-local" dow-type="2"></i>';
                    html += '        <i class="glyphicon glyphicon-save"></i>';
                    html += '    </span>';
                    html += '</div>';
                    now_k++;
                }
            });
            $('.music-play-list').append(html); */
        },
        // 设置播放器显示
        setMusic: function () {
            if ($.isEmptyObject(this.initInfo.playInfo)) {
                return this;
            }
            $('.music-global-paly-1-2').text(this.initInfo.playInfo.title);
            $('.music-global-paly-1-4>div:eq(0)>span:eq(0)').text('00:16');
            $('.music-global-paly-1-4>div:eq(0)>span:eq(1)').text(this.initInfo.playInfo.time);
            $('.music-global-paly-1-4>div:eq(1)>span:eq(0)').text(this.initInfo.playInfo.bpm);
            $('.music-global-paly-1-5-2>div:eq(1)>a').attr('href', this.audio_address + this.initInfo.playInfo
                .id + '.html');
            if (this.audio) {
                this.stop();
                this.audio = '';
            }
            return this;
        },
        // 获取播放状态
        getPlayInfo: function () {
            return {
                "playStage": this.audio.paused,
                "playTime": 123.154
            };
        },
        //设置 播放
        setPlay: function () {
            p_this = this;
            //创建 播放器
            this.audio = document.createElement('audio');
            //设置播放链接
            this.audio.src = this.initInfo.playInfo.url;
            this.audio.load();
            var duration = p_this.audio.duration;
            //动态创建进度条
            $('.music-global-paly-1-3').empty().append('<div class="music-play-slider"></div>');
            this.audio.oncanplay = function () {
                //设置播放进度
                /* $('.music-play-progress').css('width', '0%');
                //设置播放进度时间
                $('.music-play-progress-time').text('00:00'); */
                let playSlider = document.getElementsByClassName('music-play-slider')[0];
                p_this.audio.addEventListener("canplay", function () {
                    duration = p_this.audio.duration;
                }, false);
                p_this.audio.addEventListener("timeupdate", function () {
                    if (p_this.sliding) {
                        duration = p_this.audio.duration;
                        let now_progress = (p_this.audio.currentTime / p_this.audio.duration) * 100;
                        //$('.music-play-progress').css('width', now_progress + '%');
                        playSlider.noUiSlider.set(now_progress);
                        $('.music-play-progress-time').text(p_this.formatTime(Math.round(p_this
                            .audio.currentTime)));
                        $('.music-play-progress>p').text(p_this.formatTime(Math.round(p_this.audio
                            .currentTime)));
                    }
                }, false);
                noUiSlider.create(playSlider, {
                    animate: false,
                    start: 0,
                    behaviour: 'tap',
                    connect: [true, false],
                    range: {
                        'min': 0,
                        'max': 100
                    }
                });
                playSlider.noUiSlider.on('change', function () {
                    let v = playSlider.noUiSlider.get();
                    if (duration) {
                        p_this.audio.currentTime = duration * v * 0.01;
                    }
                });
            }
            // 自动播放下一首
            this.audio.addEventListener('ended', function () {
                p_this.next();
            }, false);
            return this.audio;
        },
        // 转换歌曲时间
        formatTime: function (time) {
            var hour = parseInt(time / 3600);
            time = time % 3600;
            var minute = parseInt(time / 60);
            time = time % 60;
            var second = time;
            var tt = [minute, second];
            if (hour > 0) {
                tt = [hour, minute, second];
            }
            return (tt).map(function (n) {
                n = n.toString();
                return n[1] ? n : '0' + n;
            }).join(':');
        },
        // 播放歌曲
        play: function () {
            this.sliding = true;
            //播放
            if (this.audio) {
                this.audio.play();
            } else {
                this.setPlay().play();
            }
            //记录当前播放 Cookie
            this.setCookie('mPlay', this.initInfo.playInfo.id + '=' + this.initInfo.playInfo.title + '=' + this
                .initInfo.playInfo.url + '=' + this.initInfo.playInfo.bpm + '=' + this.initInfo.playInfo
                .time);
            $('.music-play>i').addClass('glyphicon-pause').removeClass('glyphicon-play');
            return this;
        },
        // 停止播放
        stop: function () {
            this.sliding = false;
            this.audio.pause();
            $('.music-play>i').addClass('glyphicon-play').removeClass('glyphicon-pause');
            return this;
        },
        // 上一首歌
        prev: function () {
            p_this = this;
            var info = this.initInfo.playInfo;
            //所有歌曲
            this.db_get('mPlay').then(res => {
                //获取上一首
                var index = res.map(item => item.id).indexOf(info.id);
                if (index <= -1 || index <= 0) {
                    console.log('已是第一首了');
                } else {
                    this.initInfo.playInfo = res[index - 1];
                    this.setMusic().play();
                }
            });
            return this;
        },
        // 下一首歌
        next: function () {
            p_this = this;
            var info = this.initInfo.playInfo;
            //所有歌曲
            this.db_get('mPlay').then(res => {
                //获取上一首
                var index = res.map(item => item.id).indexOf(info.id);
                if (index >= (res.length - 1)) {
                    //从新播放第一首
                    this.initInfo.playInfo = res[0];
                } else {
                    this.initInfo.playInfo = res[index + 1];
                }
                this.setMusic().play();
            });
            return this;
        },
        // 切换当前播放的歌曲
        movePlay: function (info = {}) {
            this.initInfo.playInfo = info;
            this.setMusic()
            this.setPlay()
            this.play();
        },
        // 添加音乐到播放列表
        addMusicList: function (info = {}) {
            /* var musicInfo = this.getCookie('mPlay');
            if (musicInfo) {
                var musicInfoArr = this.setStringToArray(musicInfo);
                if (musicInfoArr && musicInfoArr[info.id]) {
                    return this;
                }
            }
            var palyContent = info.id + '=' + info.title + '=' + info.url + '=' + info.bpm + '=' + info.time;
            if (musicInfo) {
                this.setCookie('mPlay', musicInfo + ',' + palyContent);
            } else {
                this.setCookie('mPlay', palyContent);
            } */
            this.db_get('mPlay', info.id).then(res => {
                if (!res || res == undefined) {
                    this.db_add('mPlay', info);
                } else {
                    console.log(info.title + '：已经在播放列表了');
                }
                this.movePlay(info);
                this.setPlayList();
            });
            return this;
        },
        // 打印数据
        console: function (stage = 1, info = '') {
            console.error(info);
            return info;
        },
        //设置cookie
        setCookie: function (name, value, time = 7) {
            if (this.getCookieSize('mPlay') >= 2000) {
                return this;
            }
            var exp = new Date();
            var expires = "";
            exp.setTime(exp.getTime() + (time * 24 * 3600 * 1000)); //过期时间 30天
            expires = "; expires=" + exp.toGMTString();
            document.cookie = name + "=" + escape(value) + expires;
            return this;
        },
        //读取cookie
        getCookie: function (name) {
            var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
            if (arr = document.cookie.match(reg)) {
                return unescape(arr[2]);
            } else {
                return null;
            }
        },
        //转换数组
        setStringToArray: function (info, type = 1) {
            let list = info.split('|-|');
            if (!list || list == null || list == undefined) {
                return [];
            }
            var res = {};
            list.forEach(function (v, k) {
                if (v && type == 1) {
                    var t_v = v.split('=');
                    res[t_v[0]] = {
                        "id": t_v[0],
                        "title": t_v[1],
                        "url": t_v[2],
                        "bpm": t_v[3],
                        "time": t_v[4]
                    };
                } else {
                    var t_v = v.split('=');
                    res = {
                        "id": t_v[0],
                        "title": t_v[1],
                        "url": t_v[2],
                        "bpm": t_v[3],
                        "time": t_v[4]
                    };
                }
            });
            return res;
        },
        //获取 cookie 大小
        getCookieSize: function (name) {
            var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
            if (arr = document.cookie.match(reg)) {
                return unescape(arr[2]).length;
            } else {
                return null;
            }
        },
        //删除cookie
        delCookie: function (name) {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval = getCookie(name);
            if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
            return this;
        },
        //创建数据库
        request: async function () {
            var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window
                .msIndexedDB;
            if (!indexedDB) {
                console.log('你的浏览器不支持IndexedDB');
                return false;
            }
            var p_this = this;
            this.request = window.indexedDB.open(this.databaseName, this.version);
            this.request.onerror = function (e) {
                console.error(p_this.databaseName + ': 数据库打开失败');
            }
            this.request.onsuccess = function (e) {
                console.log(p_this.databaseName + ': 数据库打开成功');
            };
            this.request.onupgradeneeded = function (e) {
                var db = e.target.result;
                var objectStore;
                if (!db.objectStoreNames.contains('mPlay')) {
                    objectStore = db.createObjectStore('mPlay', {
                        keyPath: 'id',
                        autoIncrement: true
                    });
                    objectStore.createIndex("id", "id", {
                        unique: true
                    });
                }
                console.log('重新创建版本号成功');
            }
            return this;
        },
        // 打开数据库
        db_open: function () {
            var p_this = this;
            return new Promise((resolve, reject) => {
                let request = window.indexedDB.open(p_this.databaseName, p_this.version);
                request.onerror = function (event) {
                    //console.error(p_this.databaseName + ': 数据库打开失败');
                    reject("IndexedDB数据库打开错误，" + event);
                };
                request.onsuccess = function (event) {
                    //console.log(p_this.databaseName + ': 数据库打开成功');
                    resolve(event.target.result);
                };
            });
        },
        //添加表数据
        db_add: async function (tableName, data) {
            n_db = await this.db_open();
            if (!n_db || $.isEmptyObject(n_db)) {
                console.log('DB: 资源不存在！');
                return this;
            }
            var request = n_db.transaction(tableName, 'readwrite').objectStore(tableName).add(data);
            request.onerror = function () {
                console.error('table: ' + tableName + ' | id: ' + data.id + "-> 添加数据出错");
            };
            request.onsuccess = function () {
                console.log('table: ' + tableName + ' | id: ' + data.id + '-> 添加数据成功');
            };
        },
        // 获取表数据
        db_get: async function (tableName, data) {
            n_db = await this.db_open();
            if (!n_db || $.isEmptyObject(n_db)) {
                console.log('DB: 资源不存在！');
                return this;
            }
            if (data) {
                var request = n_db.transaction(tableName, 'readwrite').objectStore(tableName).get(data);
            } else {
                var request = n_db.transaction(tableName, 'readwrite').objectStore(tableName).getAll();
            }
            return new Promise(resolve => {
                request.onerror = function () {
                    resolve("事务失败");
                };
                request.onsuccess = function (event) {
                    resolve(event.target.result);
                };
            });
        },
        //修改表数据
        db_update: async function (tableName, data) {
            n_db = await this.db_open();
            if (!n_db || $.isEmptyObject(n_db)) {
                console.log('DB: 资源不存在！');
                return this;
            }
            var request = n_db.transaction(tableName, 'readwrite')
                .objectStore(tableName)
                .put(data);
            request.onerror = function () {
                console.error('table: ' + tableName + ' | id: ' + data.id + "-> 添加数据出错");
            };
            request.onsuccess = function () {
                console.log('table: ' + tableName + ' | id: ' + data.id + '-> 添加数据成功');
            };
        },
        //删除表数据
        db_delete: async function (tableName, data) {
            n_db = await this.db_open();
            if (!n_db || $.isEmptyObject(n_db)) {
                console.log('DB: 资源不存在！');
                return this;
            }
            var request = n_db.transaction(tableName, 'readwrite').objectStore(tableName).delete(data);
            return new Promise(resolve => {
                request.onerror = function () {
                    console.error('table: ' + tableName + ' | id: ' + data.id + "-> 删除失败");
                    resolve("删除失败");
                };
                request.onsuccess = function (event) {
                    console.log('table: ' + tableName + ' | id: ' + data.id + '-> 删除成功');
                    resolve('删除成功');
                };
            });
        },
        //下载文件
        download_file: function (info) {
            fetch(info.url).then(res => res.blob()).then(blob => {
                const dow_a = document.createElement('a');
                document.body.appendChild(dow_a);
                dow_a.style.display = 'none';
                const url = window.URL.createObjectURL(blob);
                dow_a.href = url;
                dow_a.download = info.id + '.' + info.url.substr(info.url.lastIndexOf(".") + 1);
                dow_a.click();
                document.body.removeChild(dow_a)
                window.URL.revokeObjectURL(url);
            });
        }
    };
    $('.music-global-paly-1-5-1>div:eq(0)').click(function () {
        $('.music-play-list').slideDown();
    })
    $('.music-play-list').hover(function (e) {
        $(this).show();
    }, function () {
        $(this).slideUp();
    });
    var music_play = mPlay.init({
        "auto": false, //自动播放
    });
    $('.music-play').click(function () {
        if (music_play.getPlayInfo().playStage) {
            music_play.play();
        } else {
            music_play.stop();
        }
    });
    $('.music-prev').click(function () {
        music_play.prev();
    });
    $('.music-next').click(function () {
        music_play.next();
    });
    // 切换当前播放的音乐
    $(document).on('click', '.music-switch-play', function () {
        let audio_list = $(this).parents('.music-switch-play-parent').attr('audio-elm').split('|');
        music_play.movePlay({
            "id": audio_list[0],
            "title": audio_list[1],
            "url": audio_list[2],
            "bpm": audio_list[3],
            "time": audio_list[4]
        });
    });
    //添加音乐到播放列表
    $(document).on('click', '.music-add-list', function () {
        $('.music-global-paly').slideDown();
        let audio_list = $(this).parents('.audio-add-play-list').attr('audio-elm').split('|');
        music_play.addMusicList({
            "id": audio_list[0],
            "title": audio_list[1],
            "url": audio_list[2],
            "bpm": audio_list[3],
            "time": audio_list[4]
        });
    });
    //收藏歌曲
    $('.add-music-to-favorites').click(function () {
        var info = music_play.initInfo.playInfo;
        favorite(info.id, info.url, 3);
        return false;
    });
    //下载歌曲
    $(document).on('click', '.dow-music-to-local', function () {
        var dow_type = $(this).attr('dow-type');
        if (dow_type == 1) {
            var info = music_play.initInfo.playInfo;
        } else {
            let audio_elm = $(this).parents('.music-switch-play-parent').attr('audio-elm').split('|');
            var info = {
                id: audio_elm[0],
                title: audio_elm[1],
                url: audio_elm[2],
                bpm: audio_elm[3],
                time: audio_elm[4],
            };
        }
        layer.msg('正在请求下载中，稍等片刻！', {
            time: 0,
            shade: [0.8],
            btnAlign: 'c',
            btn: ['确定'],
            yes: function () {
                layer.closeAll();
            }
        });
        music_play.download_file(info);
    });
    //分享链接
    $('.share-music-to-view').click(function () {
        let url = music_play.audio_address + music_play.initInfo.playInfo.id + '.html';
        show_modal('#share-music-to-view-copy', 500);
        $('#share-music-to-view-copy-url').html(url);
        $('#d_clip_button').click(function () {
            //创建隐藏 input
            $('body').append(
                '<div id="music-copy-id-value"><input type="text" style="opacity: 0;width: 150px;height: 50px;" value="' +
                url + '" /></div>');
            //执行复制功能
            $('#music-copy-id-value').find('input')[0].select();
            document.execCommand("Copy");
            $('#music-copy-id-value').remove();
        });
        return false;
    });
    //置顶播放
    var music_top_play = 0;
    $('.now-music-top-play').click(function (e) {
        if (music_play.getCookie('topPlay') != 1) {
            var topPlay = 1;
            //切换
            music_top_play = '-' + (music_top_play + 44) % 360;
        } else {
            var topPlay = 0;
            //切换
            music_top_play = 0;
        }
        //开启所有页面显示播放器及列表
        music_play.setCookie('topPlay', topPlay);
        music_play.initInfo.topPlay = topPlay;
        if ($(this).is('.now-music-top-play')) {
            p_this = $(this)
        } else {
            p_this = $(this).parent();
        }
        p_this.find('i').css({
            "transform": "rotate(" + music_top_play + "deg)",
            "transition": "transform 0.3s linear 0s",
        });
    });
    // 删除播放列表数据
    $(document).on('click', '.music-remove-list', function () {
        let audio_elm = $(this).parents('.music-switch-play-parent').attr('audio-elm').split('|');
        music_play.db_delete('mPlay', audio_elm[0]);
        music_play.setPlayList();
    });
</script>