CocoRoboDesktop/js/Controls/Basic/Music.js

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);
    }
};