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>
