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"> </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>