123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394 |
- Namespace.register("U.MD.UI.music");
- 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]) {
-
-
-
-
-
-
-
-
- _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;
- 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>';
- 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.MD.UI.music.init = function () {
- var _music = U.MD.UI.music;
- var _attr = _music.Attr;
- var _audio = U.selectEl("#U_MD_UI_music_audio");
- var _musicList = _attr.musicList;
- var _musicIndex = _attr.musicIndex;
- _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) {
- _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;
- var _listLength = _musicList.length - 1;
- if (_musicIndex === _listLength) {
- _attr.musicIndex = 0;
- _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.openBtnEvent = function () {
- var _music = U.MD.UI.music;
-
-
-
- U.selectEl("#U_MD_UI_music_closeBtn").bind('click', function () {
- var _audio = U.selectEl("#U_MD_UI_music_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();
-
-
- });
- };
- 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;
- var _playbtn = U.selectEl("#U_MD_UI_music_playBtn");
- var _audio = U.selectEl("#U_MD_UI_music_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;
- var _audio = U.selectEl("#U_MD_UI_music_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;
- if (_musicIndex === _listLength) {
- _attr.musicIndex = 0;
- _musicIndex = _attr.musicIndex;
- _audio[0].src = _musicList[_musicIndex].src;
- } else {
- _attr.musicIndex++;
- _musicIndex = _attr.musicIndex;
- _audio[0].src = _musicList[_musicIndex].src;
- }
- });
- _leftBtn.bind('click', function () {
- _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");
- 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;
- _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"));
- this._soundBarW = parseFloat(_soundBar.css("width"));
- _soundBall[0].style.left = 0;
- _soundBar[0].style.width = 0;
- _audio[0].volume = 0;
- } else {
- if (!this._volume) {
- return;
- }
- _audio[0].volume = this._volume;
- _soundBall[0].style.left = this._soundBallX + "px";
- _soundBar[0].style.width = this._soundBarW + "px";
- }
- });
- _soundBox.bind('mousedown', function (e) {
- var _boxLeft = _music.getOffsetLeft(this);
- var _boxRight = _boxLeft + _boxWidth;
- var _mouseX = e.pageX;
- _mouseX = Math.max(_mouseX, _boxLeft);
- _mouseX = Math.min(_mouseX, _boxRight);
- var _dis = _mouseX - _boxLeft;
- _volume = Math.round(parseFloat(_dis / _boxWidth) * 100) / 100;
- _soundBall[0].style.left = (_boxWidth * _volume) + "px";
- _soundBar[0].style.width = (_boxWidth * _volume) + "px";
- _audio[0].volume = _volume;
- if (_audio[0].volume <= 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;
- var _soundDrapMove = function (e) {
- U.UF.EV.stopDefault(e);
- var _mouseX = e.pageX;
- var _dis = _mouseX - _oMouseX + _oX;
- _dis = Math.max(0, _dis);
- _dis = Math.min(_boxWidth, _dis);
- _soundBall[0].style.left = _dis + "px";
- _soundBar[0].style.width = _dis + "px";
- _volume = Math.round(parseFloat(_dis / _boxWidth) * 100) / 100;
- _audio[0].volume = _volume;
- if (_audio[0].volume <= 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;
- var _audio = U.selectEl("#U_MD_UI_music_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) {
- _currentTime = this.currentTime;
- var _speed = Math.round(parseFloat(_currentTime / _attr.endTime) * 10000) / 10000;
- _progressBall[0].style.left = (_boxWidth * _speed) + "px";
- _progressBar[0].style.width = (_boxWidth * _speed) + "px";
- }
- });
- _progressBox.bind('mousedown', function (e) {
- var _boxLeft = _music.getOffsetLeft(this);
- var _boxRight = _boxLeft + _boxWidth;
- var _mouseX = e.pageX;
- _mouseX = Math.max(_mouseX, _boxLeft);
- _mouseX = Math.min(_mouseX, _boxRight);
- var _dis = _mouseX - _boxLeft;
- _speed = Math.round(parseFloat(_dis / _boxWidth) * 10000) / 10000;
- _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;
- U.UF.EV.stopBubble(e);
- var _oMouseX = e.pageX;
- var _progressDrapMove = function (e) {
- U.UF.EV.stopDefault(e);
- var _mouseX = e.pageX;
- var _dis = _mouseX - _oMouseX + _oX;
- _dis = Math.max(0, _dis);
- _dis = Math.min(_boxWidth, _dis);
- _progressBall[0].style.left = _dis + "px";
- _progressBar[0].style.width = _dis + "px";
- _speed = Math.round(parseFloat(_dis / _boxWidth) * 10000) / 10000;
- _progressBall[0].style.left = (_boxWidth * _speed) + "px";
- _progressBar[0].style.width = (_boxWidth * _speed) + "px";
- _currentTime = _attr.endTime * _speed;
- };
- var _progressDragUp = function () {
- _barFlag = true;
- _audio[0].currentTime = _currentTime;
- U.selectEl(document).unbind('mousemove', _progressDrapMove);
- U.selectEl(document).unbind('mouseup', _progressDragUp);
- };
- 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);
- }
- };
|