Namespace.register("U.MD.UI.music");
/**
* [Control description] 音乐控件总函数
* @param {[type]} musicList [数组json 格式请看文档]
* @param {[type]} index [需要播放第几首歌(索引)]
* @param {[type]} autoplay [是否自动播放] 可填可不填 默认 false
* @param {[type]} parentEl 所需要添加到的父元素 可填可不填 默认document.body
*/
U.MD.UI.music = function (musicList, index, autoplay, parentEl) {
var _music = U.MD.UI.music; //简写命名空间
var _musicBox;
if (_musicBox = U.selectEl("#U_MD_UI_music_musicBox")[0]) {
// U.selectEl(_musicBox).removeClass('U_MD_UI_music_hidden');
// var _attr = _music.Attr; //简写全局属性json名
// var _audio = U.selectEl("#U_MD_UI_music_audio"); //audio标签
// _attr.musicList = musicList; //全局赋值
// _attr.musicIndex = index; //全局赋值
// _audio[0].src = musicList[index].src; //添加音乐路径
// var _Name = U.selectEl("#U_MD_UI_music_Name"); //音乐名字节点
// _Name[0].innerText = musicList[index].title; //音乐名字赋值
_musicBox.remove();
}
_music.create(parentEl); //创建音乐控件
_music.Attr = { //存放全局属性
'musicList': musicList, //所有数据
'musicIndex': index, //当前数据索引
'autoplay': autoplay, //第一首是否自动播放
'currentTime': null, //音乐当前时间未赋值
'endTime': null //音乐结束时间未赋值
};
_music.init(); //初始化函数
};
U.MD.UI.music.Attr = null; //存放元素与变量的json全局变量 未赋值
U.MD.UI.music.htmlTemplate = ' <div class="U_MD_UI_music_leftCont">\n' +
' <div class="U_MD_UI_music_CoverBox">\n' +
' <img src="/img/Controls/Audio/pc/电脑图标.png" alt="" id="U_MD_UI_music_Cover">\n' +
' </div> <!-- 音乐封面图片 -->\n' +
' </div>\n' +
' <div class="U_MD_UI_music_rightCont">\n' +
' <div class="U_MD_UI_music_Name" id="U_MD_UI_music_Name"></div> <!-- 音乐名字 -->\n' +
' <div class="U_MD_UI_music_leftBtn" id="U_MD_UI_music_leftBtn"></div> <!-- 左按钮 -->\n' +
' <div class="U_MD_UI_music_pauseBtn U_MD_UI_music_playBtn" id="U_MD_UI_music_playBtn"></div> <!-- 播放/暂停 按钮 -->\n' +
' <div class="U_MD_UI_music_rightBtn" id="U_MD_UI_music_rightBtn"></div> <!-- 右按钮 -->\n' +
' <div class="U_MD_UI_music_soundOpen" id="U_MD_UI_music_soundSwitch"></div> <!-- 声音开关按钮 -->\n' +
' <div class="U_MD_UI_music_soundBox" id="U_MD_UI_music_soundBox"> <!-- 声音条盒子节点 -->\n' +
' <div class="U_MD_UI_music_soundBar" id="U_MD_UI_music_soundBar" style="width: 31px;"></div> <!-- 声音条 -->\n' +
' <div class="U_MD_UI_music_soundBall" id="U_MD_UI_music_soundBall" style="left: 31px;"></div> <!-- 声音球 -->\n' +
' </div>\n' +
' <div class="U_MD_UI_music_listBtn"></div> <!-- 右上角的列表按钮 -->\n' +
' <div class="U_MD_UI_music_shrinkBtn" id="U_MD_UI_music_shrinkBtn"></div> <!-- 右上角的缩小按钮 -->\n' +
' <div class="U_MD_UI_music_closeBtn" id="U_MD_UI_music_closeBtn"></div> <!-- 右上角的关闭按钮 -->\n' +
' </div>\n' +
' <div class="U_MD_UI_music_progressBox" id="U_MD_UI_music_progressBox"> <!-- 时间条盒子节点 -->\n' +
' <div class="U_MD_UI_music_progressBar" id="U_MD_UI_music_progressBar" style="width: 0.64px;"></div> <!-- 时间条 -->\n' +
' <div class="U_MD_UI_music_progressBall" id="U_MD_UI_music_progressBall" style="left: 0.64px;"></div> <!-- 时间球 -->\n' +
' </div>\n' +
' <audio id="U_MD_UI_music_audio" autoplay="" src=""></audio>';
/**
* 添加音乐控件html代码 并且判断是否存在html 防止多次添加
*/
U.MD.UI.music.create = function (parentEl) {
var _parentEl = parentEl || document.body;
var _formclass = { "style": { "border": "none" }, "id": "U_MD_UI_music_musicBox", "className": "U_MD_UI_music_musicBox" };
var _formattr = { isclose: false, isstretching: false, isenlarge: false, isnarrow: false };
var _headclass = { "style": { "height": "13px", "background-color": "#cc5b5b"} };
U.MD.UI.music.player = new U.UF.UI.form(false, U.MD.UI.music.htmlTemplate, _formclass, _formattr, _headclass);
U.selectEl("#U_MD_UI_music_musicBox")[0].style.overflow = "";
// U.UF.F.windowMinimize(_formel);
};
/**
* 音乐控件初始化
*/
U.MD.UI.music.init = function () {
var _music = U.MD.UI.music; //简写命名空间
var _attr = _music.Attr; //简写全局属性json名
var _audio = U.selectEl("#U_MD_UI_music_audio"); //audio标签
var _musicList = _attr.musicList; //音乐列表数组
var _musicIndex = _attr.musicIndex; //需要播放的音乐(数组中的第index个)
_audio[0].src = _musicList[_musicIndex].src; //添加音乐路径
var _playBtn = U.selectEl("#U_MD_UI_music_playBtn"); //暂停播放按钮节点
var _Name = U.selectEl("#U_MD_UI_music_Name"); //音乐名字节点
var _corver = U.selectEl("#U_MD_UI_music_Cover"); //封面图片节点
if (!_attr.autoplay) { //若autoplay属性 = false 则第一首音乐暂停
_audio[0].pause();
}
_music.openBtnEvent(); //按钮点击开关 音乐控件隐藏
_music.shrinkBtnEvent(); //缩小事件绑定
_music.soundControl(); //声音控制器
_music.playEvent(); //音乐播放与暂停控制器
_music.switchMusic(); //切换音乐按钮
_music.progressControl(); //音乐进度条控制器*/
_audio.bind('durationchange', function () { //当音乐时长已改变时 给节点赋值
_attr.endTime = this.duration; //总时长赋值
_musicIndex = _attr.musicIndex; //音乐索引位置重赋值
_Name[0].innerText = _musicList[_musicIndex].title; //音乐名字赋值
});
_audio.bind("ended", function () { //音乐结束后切换下一首
_musicIndex = _attr.musicIndex; //由于_attr.musicIndex是一个变量 因此 需要重新赋值
var _listLength = _musicList.length - 1; //获取数组中音乐的长度
if (_musicIndex === _listLength) { //当音乐在数组中为最后一首时 下一首则为第一首 也就是索引 0
_attr.musicIndex = 0;
_musicIndex = _attr.musicIndex;
_audio[0].src = _musicList[_musicIndex].src;
} else { //否则则索引+1
_attr.musicIndex++;
_musicIndex = _attr.musicIndex;
_audio[0].src = _musicList[_musicIndex].src;
}
});
};
/**
* 关闭按钮点击事件
*/
U.MD.UI.music.openBtnEvent = function () {
var _music = U.MD.UI.music; //简写命名空间
// var _attr = _music.Attr; //简写全局属性json名
// var _musicBox = U.selectEl("#U_MD_UI_music_musicBox"); //获取音乐控件盒子
// var _closeBtn = U.selectEl("#U_MD_UI_music_closeBtn"); //获取关闭按钮 在控件里 右上角的 叉叉
U.selectEl("#U_MD_UI_music_closeBtn").bind('click', function () {
var _audio = U.selectEl("#U_MD_UI_music_audio"); //audio标签
if (!_audio[0].paused) {
U.selectEl("#U_MD_UI_music_playBtn").addClass('U_MD_UI_music_playBtn'); //暂停音乐并修改图标
_audio[0].pause();
}
U.UF.F.closeWindow(_music.player.form); //调用窗体关闭函数
U.selectEl('#U_MD_D_T_taskbar_music').remove();
// _musicBox.addClass("U_MD_UI_music_hidden"); //点击关闭按钮后 隐藏音乐控件
// _musicBox.addClass("U_MD_UI_music_hidden"); //点击关闭按钮后 隐藏音乐控件
});
};
/**
* 缩小按钮事件绑定
*/
U.MD.UI.music.shrinkBtnEvent = function () {
U.selectEl('#U_MD_UI_music_shrinkBtn').bind('click', function () {
U.UF.F.windowMinimize(U.MD.UI.music.player.form); //窗体最小化处理
});
};
/**
* 播放/暂停 的点击事件
*/
U.MD.UI.music.playEvent = function () {
var _music = U.MD.UI.music; //简写命名空间
var _attr = _music.Attr; //简写全局属性json名
var _playbtn = U.selectEl("#U_MD_UI_music_playBtn"); //暂停/播放 按钮
var _audio = U.selectEl("#U_MD_UI_music_audio"); //audio标签
_playbtn.bind('click', function () {
if (!_audio[0].paused) { //如在 无暂停状态(播放状态)
_playbtn.addClass('U_MD_UI_music_playBtn'); //暂停音乐并修改图标
_audio[0].pause();
} else { //否则则时 暂停状态时
_playbtn.removeClass('U_MD_UI_music_playBtn');
_audio[0].play(); //播放音乐并修改图标
}
});
};
/**
* 音乐按钮切换(上一首 下一首)
*/
U.MD.UI.music.switchMusic = function () {
var _music = U.MD.UI.music; //简写命名空间
var _attr = _music.Attr; //简写全局属性json名
var _audio = U.selectEl("#U_MD_UI_music_audio"); //audio标签
var _rightBtn = U.selectEl("#U_MD_UI_music_rightBtn"); //获取下一首的按钮
var _leftBtn = U.selectEl("#U_MD_UI_music_leftBtn"); //获取上一首的按钮
var _musicList = _attr.musicList; //获取音乐数组数据
var _musicIndex = _attr.musicIndex; //获取当前需要播放音乐 的数组索引
var _listLength = _musicList.length - 1; //获取音乐的数量
_rightBtn.bind('click', function () { //当点击右边(下一首)的按钮时
_musicIndex = _attr.musicIndex; //由于_attr.musicIndex是一个变量 因此 需要重新赋值
if (_musicIndex === _listLength) { //如果当前的歌曲是最后一首时
_attr.musicIndex = 0; //则条转到第一首歌
_musicIndex = _attr.musicIndex; //给全局属性赋值
_audio[0].src = _musicList[_musicIndex].src; //并修改音乐路径
} else { //否则跳转到下一首歌
_attr.musicIndex++; //数组索引加1
_musicIndex = _attr.musicIndex; //给全局属性赋值
_audio[0].src = _musicList[_musicIndex].src; //并修改音乐路径
}
});
_leftBtn.bind('click', function () { //同上 此处是左按钮(上一首)
_musicIndex = _attr.musicIndex; //由于_attr.musicIndex是一个变量 因此 需要重新赋值
if (_musicIndex === 0) {
_attr.musicIndex = _listLength;
_musicIndex = _attr.musicIndex;
_audio[0].src = _musicList[_musicIndex].src;
} else {
_attr.musicIndex--;
_musicIndex = _attr.musicIndex;
_audio[0].src = _musicList[_musicIndex].src;
}
});
};
/**
* 声音事件控制 总函数
*/
U.MD.UI.music.soundControl = function () {
var _music = U.MD.UI.music; //简写命名空间
var _audio = U.selectEl("#U_MD_UI_music_audio"); //audio标签
var _soundBox = U.selectEl("#U_MD_UI_music_soundBox"); //声音盒子节点
var _soundBall = U.selectEl("#U_MD_UI_music_soundBall"); //音量球
var _soundBar = U.selectEl("#U_MD_UI_music_soundBar"); //声音条
var _boxWidth = _soundBox[0].clientWidth; //获取盒子宽度 = 声音球位置的最大值
var _volume = 0.5; //声音初始大小
var _soundSwitch = U.selectEl("#U_MD_UI_music_soundSwitch"); //声音开关图标
_audio[0].volume = _volume; //给audio标签添加声音
_soundBall[0].style.left = (_boxWidth * _volume) + "px"; //调整音量球位置 = 总宽度*百分比
_soundBar[0].style.width = (_boxWidth * _volume) + "px"; //调整声音条宽度 = 总宽度*百分比
_soundSwitch.bind('click', function () { //声音开关控制函数
_music.toggleClass(this, 'U_MD_UI_music_soundClose'); //每点击一次 切换样式
if ($(this).hasClass('U_MD_UI_music_soundClose')) { //判断如果样式为关闭时(静音状态)
this._volume = _audio[0].volume; //记录原有的声音值
this._soundBallX = parseFloat(_soundBall.css("left")); //获取音量球的 left值
this._soundBarW = parseFloat(_soundBar.css("width")); //获取音量条的 宽
_soundBall[0].style.left = 0; //音量球的left为0
_soundBar[0].style.width = 0; //音量条的宽为 0
_audio[0].volume = 0; //audio声音也为0
} else { //播放状态
if (!this._volume) { //如果this._volume不存在 则声音赋值时会报错
return;
}
_audio[0].volume = this._volume; //在点一遍开关后 复原到之前记录的值
_soundBall[0].style.left = this._soundBallX + "px"; //给音量球的left赋值
_soundBar[0].style.width = this._soundBarW + "px"; //给音量条的宽赋值
}
});
_soundBox.bind('mousedown', function (e) { //点击进度条后 音量球跳转到鼠标点击位置 并且声音跟随增大或减小
var _boxLeft = _music.getOffsetLeft(this); //body距离盒子左端的left值 = 声音球left的最小值
var _boxRight = _boxLeft + _boxWidth; //body距离盒子右端的left值 = 声音球left的最大值
var _mouseX = e.pageX; //获取鼠标按下时的X坐标
_mouseX = Math.max(_mouseX, _boxLeft); //mouseX 与 boxLeft距离不能小于0 因此 获取两数最大值 原因:声音不能小于0
_mouseX = Math.min(_mouseX, _boxRight); //mouseX 与 boxRight因此 获取两数最大值 原因:声音不能大于1
var _dis = _mouseX - _boxLeft; //鼠标划过的距离
_volume = Math.round(parseFloat(_dis / _boxWidth) * 100) / 100; //距离相对于盒子宽度的值 = 声音百分比大小(此处为保留两位小数点）
_soundBall[0].style.left = (_boxWidth * _volume) + "px"; //音量球left值 改变成 = 总宽*百分比
_soundBar[0].style.width = (_boxWidth * _volume) + "px"; //音量条width 改变成 = 总宽*百分比
_audio[0].volume = _volume; //改变audio标签值
if (_audio[0].volume <= 0) { //如果声音小于=0 时 则改变成 静音状态时的样式 否则则是非静音状态样式
_soundSwitch.addClass('U_MD_UI_music_soundClose');
} else {
_soundSwitch.removeClass('U_MD_UI_music_soundClose');
}
});
_soundBall.bind('mousedown', function (e) { //音量球拖拽效果
U.UF.EV.stopBubble(e); //阻止冒泡
var _oMouseX = e.pageX; //获取鼠标按下时的X坐标
var _soundDrapMove = function (e) { //拖拽时移动用的函数
U.UF.EV.stopDefault(e); //取消默认拖拽
var _mouseX = e.pageX; //鼠标移动时的x坐标
var _dis = _mouseX - _oMouseX + _oX; //移动的距离
_dis = Math.max(0, _dis); //限制音量球left不得小于0
_dis = Math.min(_boxWidth, _dis); //限制音量球left不得大于盒子宽度
_soundBall[0].style.left = _dis + "px"; //音量球位置
_soundBar[0].style.width = _dis + "px"; //音量条宽度
_volume = Math.round(parseFloat(_dis / _boxWidth) * 100) / 100; //声音球距离盒子宽度的left值 = 声音百分比大小(此处为保留两位小数点）
_audio[0].volume = _volume; //音乐的声音赋值
if (_audio[0].volume <= 0) { //判断声音小于0则改成静音图标
_soundSwitch.addClass('U_MD_UI_music_soundClose');
} else { //否则该成非静音图标
_soundSwitch.removeClass('U_MD_UI_music_soundClose');
}
};
var _soundDragUp = function () { //拖拽时松开用的函数
U.selectEl(document).unbind('mousemove', _soundDrapMove);
U.selectEl(document).unbind('mouseup', _soundDragUp);
};
var _oX = parseFloat(_soundBall.css("left")); //获取鼠标按下时音量球的坐标
U.selectEl(document).bind('mousemove', _soundDrapMove);
U.selectEl(document).bind('mouseup', _soundDragUp)
});
};
/**
* 进度条控制 事件总函数
*/
U.MD.UI.music.progressControl = function () {
var _music = U.MD.UI.music; //简写命名空间
var _attr = _music.Attr; //简写全局属性json名
var _audio = U.selectEl("#U_MD_UI_music_audio"); //audio标签
var _progressBox = U.selectEl("#U_MD_UI_music_progressBox"); //时间盒子节点
var _progressBall = U.selectEl("#U_MD_UI_music_progressBall"); //时间球
var _progressBar = U.selectEl("#U_MD_UI_music_progressBar"); //时间条
var _playbtn = U.selectEl("#U_MD_UI_music_playBtn"); //播放/暂停 按钮
var _boxWidth = _progressBox[0].clientWidth; //时间盒子宽度 = 时间球位置的最大值
var _barFlag = true, _currentTime; //声明两个全局变量 为更新时间条所用
_audio.bind('timeupdate', function () {
if (!this.paused) { //如在 无暂停状态(播放状态)
_playbtn.removeClass('U_MD_UI_music_playBtn'); //修改成 播放时用的图标
} else { //否则 为暂停状态
_playbtn.addClass('U_MD_UI_music_playBtn'); //修改成暂停用的图标
}
if (_barFlag) { //barFlag = true 为 时间球不在拖拽状态时
_currentTime = this.currentTime; //获取音乐当前播放时间
var _speed = Math.round(parseFloat(_currentTime / _attr.endTime) * 10000) / 10000; //_speed = 当前时间相对于总时长的 百分比
_progressBall[0].style.left = (_boxWidth * _speed) + "px"; //时间球的left = _speed(百分比)*总宽度
_progressBar[0].style.width = (_boxWidth * _speed) + "px"; //时间条的width = _speed(百分比)*总宽度
}
});
_progressBox.bind('mousedown', function (e) { //点击进度条后 时间球跳转到鼠标点击位置 时间跟随改变
var _boxLeft = _music.getOffsetLeft(this); //body距离盒子左端的left值 = 时间球left的最小值
var _boxRight = _boxLeft + _boxWidth; //body距离盒子右端的left值 = 时间球left的最大值
var _mouseX = e.pageX; //获取鼠标按下时的X坐标
_mouseX = Math.max(_mouseX, _boxLeft); //mouseX 与 boxLeft距离不能小于0 因此 获取两数最大值 原因:声音不能小于0
_mouseX = Math.min(_mouseX, _boxRight); //mouseX 与 boxRight因此 获取两数最大值 原因:声音不能大于1
var _dis = _mouseX - _boxLeft; //鼠标划过的距离
_speed = Math.round(parseFloat(_dis / _boxWidth) * 10000) / 10000; //时间球距离盒子宽度的left值 = 时间当前值/总时长(此处为保留4位小数点）
_progressBall[0].style.left = (_boxWidth * _speed) + "px";
_progressBar[0].style.width = (_boxWidth * _speed) + "px";
_audio[0].currentTime = _attr.endTime * _speed;
});
_progressBall.bind('mousedown', function (e) { //时间球拖拽效果
_barFlag = false; //拖拽时 时间球跟随声音播放向前移动状态暂时屏蔽 详细见 timeupdate监听
U.UF.EV.stopBubble(e); //阻止冒泡
var _oMouseX = e.pageX; //获取鼠标按下时的X坐标
var _progressDrapMove = function (e) { //拖拽移动时的函数
U.UF.EV.stopDefault(e); //取消默认拖拽
var _mouseX = e.pageX; //鼠标移动时的x坐标
var _dis = _mouseX - _oMouseX + _oX; //移动的距离
_dis = Math.max(0, _dis); //限制音量球left不得小于0
_dis = Math.min(_boxWidth, _dis); //限制音量球left不得大于盒子宽度
_progressBall[0].style.left = _dis + "px"; //音量球位置
_progressBar[0].style.width = _dis + "px"; //音量条宽度
_speed = Math.round(parseFloat(_dis / _boxWidth) * 10000) / 10000; //时间球距离盒子宽度的left值 = 时间当前值/总时长(此处为保留4位小数点）
_progressBall[0].style.left = (_boxWidth * _speed) + "px"; //时间球的left = 总宽*百分比
_progressBar[0].style.width = (_boxWidth * _speed) + "px"; //时间条的width = 总宽*百分比
_currentTime = _attr.endTime * _speed; //当前时间 = 音乐总时长*百分比
};
var _progressDragUp = function () { //拖拽松开后的函数
_barFlag = true; //拖拽后松开时 时间球跟随声音播放向前移动
_audio[0].currentTime = _currentTime; //当前重新赋值
U.selectEl(document).unbind('mousemove', _progressDrapMove); //删除 mousemove的监听事件
U.selectEl(document).unbind('mouseup', _progressDragUp); //删除mouseup的监听事件
};
var _oX = parseFloat(_progressBall.css("left")); //获取鼠标按下时音量球的坐标
U.selectEl(document).bind('mousemove', _progressDrapMove);
U.selectEl(document).bind('mouseup', _progressDragUp)
});
};
U.MD.UI.music.getOffsetLeft = function (obj) {
var tmp = obj.offsetLeft;
var val = obj.offsetParent;
while (val != null) {
tmp += val.offsetLeft;
val = val.offsetParent;
}
return tmp;
};
U.MD.UI.music.secondToDate = function (result) {
var m = Math.floor((result / 60 % 60));
var s = Math.floor((result % 60));
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
return result = m + ":" + s;
};
U.MD.UI.music.toggleClass = function (ele, cls) { //如果存在(不存在)，就删除(添加)一个样式
if ($(ele).hasClass(cls)) {
U.selectEl(ele).removeClass(cls);
} else {
U.selectEl(ele).addClass(cls);
}
};