CocoRoboDesktop/js/Controls/Mobile/Music.js

Namespace.register("U.MT.UI.music");

/**
* [Control description]     音乐控件总函数
* @param {[type]} musicList [数组json 格式请看文档]
* @param {[type]} index     [需要播放第几首歌(索引)]
* @param {[type]} autoplay  [是否自动播放]
*/
U.MT.UI.Music = function (musicList, index, autoplay) {
    var _music = U.MT.UI.Music;                          //简写命名空间
    U.selectEl("body").addClass("U_MT_UI_Music_bodyClass");
    if (_musicBox = U.selectEl("#U_MT_UI_Music_musicBox")[0]) {               //如若html代码存在  因此可以返回 防止重复添加
        U.selectEl(_musicBox).removeClass('U_MT_UI_Music_hidden');
        var _attr = _music.Attr;              //简写全局属性json名
        var _audio = U.selectEl("#U_MT_UI_Music_audio"); //audio标签
        _attr.musicList = musicList;  //全局赋值a
        _attr.musicIndex = index;    //全局赋值
        _audio[0].src = musicList[index].src;  //添加音乐路径
        var _Name = U.selectEl("#U_MT_UI_Music_Name");  //音乐名字节点
        _Name[0].innerText = musicList[index].title;    //音乐名字赋值
        //$(_musicBox).removeClass('U_MT_UI_Music_hidden');
        return;
    }


    _music.create();                                     //创建音乐控件
    _music.Attr = {                                      //全局属性
        musicIndex: index,                               //当前数据索引
        musicList: musicList,                            //所有数据
        autoplay: autoplay,                              //第一首是否自动播放
        currentTime: null,                               //音乐当前时间未赋值
        endTime: null                                    //音乐结束时间未赋值
    };
    _music.init(); //初始化函数
};
U.MT.UI.Music.Attr = null;       //存放元素与变量的json全局变量 未赋值

U.MT.UI.Music.htmlTemplte = '<div class="U_MT_UI_Music_soundBox" id="U_MT_UI_Music_soundBox">              <!-- 声音盒子 -->\n' +
            '            <div class="U_MT_UI_Music_closeBtn" id="U_MT_UI_Music_closeBtn"></div> <!-- 声音关闭图标 -->\n' +
            '            <div class="U_MT_UI_Music_soundSwitch" id="U_MT_UI_Music_soundSwitch"></div> <!-- 声音开关图标 -->\n' +
            '            <div class="U_MT_UI_Music_soundBar" id="U_MT_UI_Music_soundBar"></div>    <!-- 声音条 -->\n' +
            '            <div class="U_MT_UI_Music_soundBall" id="U_MT_UI_Music_soundBall"></div>  <!-- 声音球 -->\n' +
            '        </div>\n' +
            '        <p class="U_MT_UI_Music_Name" id="U_MT_UI_Music_Name">Welocme</p>      <!-- 音乐歌曲名 -->\n' +
            '        <div class="U_MT_UI_Music_CoverBox">\n' +
            '            <img src="/img/Controls/Audio/moblie/Music.png" alt="" id="U_MT_UI_Music_Cover">\n' +
            '        </div>              <!-- 图片封面 -->\n' +
            '        <div class="U_MT_UI_Music_buttonBox">\n' +
            '            <div class="U_MT_UI_Music_leftBtn" id="U_MT_UI_Music_leftBtn"></div>      <!-- 上一首按钮 -->\n' +
            '            <div class="U_MT_UI_Music_playBtnBox">\n' +
            '                <div class="U_MT_UI_Music_pauseBtn U_MT_UI_Music_playBtn" id="U_MT_UI_Music_playBtn"></div>     <!-- 开始/暂停按钮 -->\n' +
            '            </div>\n' +
            '            <div class="U_MT_UI_Music_rightBtn" id="U_MT_UI_Music_rightBtn"></div>    <!-- 下一首按钮 -->\n' +
            '            <div class="U_MT_UI_Music_listBtn" id="U_MT_UI_Music_listBtn"></div>                    <!-- 清单按钮 -->\n' +
            '        </div>\n' +
            '        <div class="U_MT_UI_Music_progressBox" id="U_MT_UI_Music_progressBox">\n' +
            '            <div class="U_MT_UI_Music_currentTime" id="U_MT_UI_Music_currentTime">00:00</div>            <!-- 开始时间 -->\n' +
            '            <div class="U_MT_UI_Music_progressBar" id="U_MT_UI_Music_progressBar"></div>    <!-- 时间条 -->\n' +
            '            <div class="U_MT_UI_Music_progressBall" id="U_MT_UI_Music_progressBall"></div>  <!-- 时间球 -->\n' +
            '            <div class="U_MT_UI_Music_endTime" id="U_MT_UI_Music_endTime">00:00</div>                <!-- 结束时间 -->\n' +
            '        </div>\n' +
            '        <audio src="" id="U_MT_UI_Music_audio" autoplay ></audio>';

/**
*  添加音乐控件html代码 并且判断是否存在html 防止多次添加
*/
U.MT.UI.Music.create = function () {
    var _musicBox = $$("div", { id: 'U_MT_UI_Music_musicBox', className: 'U_MT_UI_Music_musicBox' }, document.body);
    _musicBox.innerHTML += U.MT.UI.Music.htmlTemplte;
};

/**
*  音乐控件初始化
*/
U.MT.UI.Music.init = function () {
    var _music = U.MT.UI.Music;          //简写命名空间
    var _attr = _music.Attr;             //简写全局属性
    var _audio = U.selectEl("#U_MT_UI_Music_audio"); //audio标签
    var _playBtn = U.selectEl("#U_MT_UI_Music_playBtn"); //暂停播放按钮
    var _Name = U.selectEl("#U_MT_UI_Music_Name"); //音乐名字
    var _musicList = _attr.musicList;    //音乐列表数组
    var _musicIndex = _attr.musicIndex;  //需要播放的音乐(数组中的第index个)
    _audio[0].src = _musicList[_musicIndex].src; //添加音乐路径
    var _corver = U.selectEl("#U_MT_UI_Music_Cover"); //封面图片节点
    var _endTimeBox = U.selectEl("#U_MT_UI_Music_endTime"); //结束时间 盒子节点
    if (!_attr.autoplay) {               //若autoplay属性 = false 则第一首音乐暂停
        _audio[0].pause();
    }
    _music.soundControl();           //声音控制器
    _music.playEvent();              //音乐播放与暂停控制器
    _music.switchMusic();            //切换音乐按钮
    _music.progressControl();        //音乐进度条控制器
    _audio.bind("durationchange", function () {  //当音乐时长已改变时  给节点赋值
        _attr.endTime = this.duration;                 //总时长赋值
        _endTimeBox[0].innerText = _music.secondToDate(_attr.endTime); //结束时间节点 内容转为 分:秒
        _musicIndex = _attr.musicIndex;                //音乐索引位置重赋值
        _Name[0].innerText = _musicList[_musicIndex].title; //音乐名字赋值
        //_corver.src = _musicList[_musicIndex].cover;    //音乐封面图片赋值
    });

    _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.MT.UI.Music.playEvent = function () {                    // 播放/暂停 的点击事件
    var _music = U.MT.UI.Music;                 //简写命名空间
    var _attr = _music.Attr;             //简写全局属性
    var _playBtn = U.selectEl("#U_MT_UI_Music_playBtn"); //暂停/播放 按钮
    var _audio = U.selectEl("#U_MT_UI_Music_audio"); //audio标签
    var _closeBtn = U.selectEl("#U_MT_UI_Music_closeBtn");
    _playBtn.bind('click', function () {
        if (!_audio[0].paused) {                  //如在 无暂停状态(播放状态)
            _playBtn.addClass('U_MT_UI_Music_playBtn');   //暂停音乐并修改图标
            _audio[0].pause();
        } else {                              //否则则时 暂停状态时
            _playBtn.removeClass('U_MT_UI_Music_playBten');
            _audio[0].play();                   //播放音乐并修改图标
        }
    });
    _closeBtn.bind('click', function (e) {
        U.selectEl("#U_MT_UI_Music_musicBox").addClass("U_MT_UI_Music_hidden");   //点击关闭按钮后 隐藏音乐控件
        U.selectEl("body").removeClass("U_MT_UI_Music_bodyClass");
    });
    _closeBtn.bind('touchstart', function (e) {
        U.UF.EV.stopBubble(e);                       //阻止冒泡 音量球的点击效果
    });
};

/**
* 声音事件控制 总函数
*/
U.MT.UI.Music.soundControl = function () {
    var _music = U.MT.UI.Music;          //简写命名空间
    var _attr = _music.Attr;      //简写全局属性
    var _audio = U.selectEl("#U_MT_UI_Music_audio"); //audio标签
    var _soundBox = U.selectEl("#U_MT_UI_Music_soundBox"); //声音盒子节点
    var _soundBall = U.selectEl("#U_MT_UI_Music_soundBall"); //音量球
    var _soundBar = U.selectEl("#U_MT_UI_Music_soundBar");  //声音条
    var _boxWidth = _soundBox[0].clientWidth;      //获取盒子宽度 = 声音球位置的最大值
    var _volume = 0.5;                             //声音初始大小
    _audio[0].volume = _volume;                    //给audio标签添加声音
    _soundBall[0].style.left = (_boxWidth * _volume) + "px"; //调整音量球位置 = 总宽度*百分比
    _soundBar[0].style.width = (_boxWidth * _volume) + "px"; //调整声音条宽度 = 总宽度*百分比

    _soundBox.bind('touchstart', function (e) {   //点击进度条后 音量球跳转到鼠标点击位置 并且声音跟随增大或减小
        var _boxLeft = _music.getOffsetLeft(this); //body距离盒子左端的left值 =  声音球left的最小值
        var _boxRight = _boxLeft + _boxWidth;           //body距离盒子右端的left值 = 声音球left的最大值
        var _mouseX = e.targetTouches[0].clientX;         //获取鼠标按下时的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标签值
    });

    _soundBall.bind('touchstart', function (e) {      //音量球拖拽效果
        U.UF.EV.stopBubble(e);                                      //阻止冒泡 防止被document事件覆盖
        var _oMouseX = e.targetTouches[0].clientX;                    //获取鼠标按下时的X坐标
        var _soundDrapMove = function (e) {                       //拖拽时移动用的函数
            U.UF.EV.stopBubble(e);                                      //阻止冒泡 防止被document事件覆盖
            U.UF.EV.stopDefault(e);                                     //取消默认拖拽
            var _mouseX = e.targetTouches[0].clientX;                //鼠标移动时的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;                               //音乐的声音赋值
        };
        var _soundDragUp = function () {                    //拖拽时松开用的函数
            _soundBall.unbind('touchmove', _soundDrapMove);    //删除move监听事件
            _soundBall.unbind('touchend', _soundDragUp);       //删除end监听事件
        };

        var _oX = parseFloat(_soundBall.css("left")); //获取鼠标按下时音量球的坐标
        _soundBall.bind('touchmove', _soundDrapMove);
        _soundBall.bind('touchend', _soundDragUp);
    });
};


/**
* 进度条控制 事件总函数
*/
U.MT.UI.Music.progressControl = function () {
    var _music = U.MT.UI.Music;          //简写命名空间
    var _attr = _music.Attr;             //简写全局属性
    var _audio = U.selectEl("#U_MT_UI_Music_audio"); //audio标签
    var _progressBox = U.selectEl("#U_MT_UI_Music_progressBox"); //时间盒子节点
    var _progressBall = U.selectEl("#U_MT_UI_Music_progressBall"); //时间球
    var _progressBar = U.selectEl("#U_MT_UI_Music_progressBar"); //时间条
    var _playBtn = U.selectEl("#U_MT_UI_Music_playBtn"); //播放/暂停 按钮
    var _boxWidth = _progressBox[0].clientWidth;           //时间盒子宽度 =  时间球位置的最大值
    var _barFlag = true, _currentTime;                   //声明两个全局变量 为更新时间条所用
    var _currentTimeBox = U.selectEl("#U_MT_UI_Music_currentTime"); //开始时间 盒子节点
    var _endTimeBox = U.selectEl("#U_MT_UI_Music_endTime"); //结束时间 盒子节点
    _audio.bind('timeupdate', function () {
        if (!this.paused) {                                      //如在 无暂停状态(播放状态)
            _playBtn.removeClass('U_MT_UI_Music_playBtn');        //修改成 播放时用的图标
        } else {                                                 //否则 为暂停状态
            _playBtn.addClass('U_MT_UI_Music_playBtn');          //修改成暂停用的图标
        }
        if (_barFlag) {                                      //barFlag = true 为 时间球不在拖拽状态时
            _currentTime = this.currentTime;                 //获取音乐当前播放时间
            _currentTimeBox[0].innerText = _music.secondToDate(_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('touchstart', function (e) {  //点击进度条后 时间球跳转到鼠标点击位置 时间跟随改变
        var _boxLeft = _music.getOffsetLeft(this); //body距离盒子左端的left值 =  时间球left的最小值
        var _boxRight = _boxLeft + _boxWidth;                 //body距离盒子右端的left值 = 时间球left的最大值
        var _mouseX = e.targetTouches[0].clientX;               //获取鼠标按下时的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位小数点）
        _audio[0].currentTime = _attr.endTime * _speed;      //更新音乐当前时间 下一步执行 timeupdate里的函数
    });
    _progressBall.bind('touchstart', function (e) {   //时间球拖拽效果
        U.UF.EV.stopBubble(e);                                      //阻止冒泡
        _barFlag = false;                                          //拖拽时 时间球跟随声音播放向前移动状态暂时屏蔽 详细见 timeupdate监听
        var _oMouseX = e.targetTouches[0].clientX;                   //获取鼠标按下时的X坐标
        var _progressDrapMove = function (e) {
            U.UF.EV.stopBubble(e);                               //阻止冒泡
            U.UF.EV.stopDefault(e);                              //取消默认拖拽
            var _mouseX = e.targetTouches[0].clientX;              //鼠标移动时的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;                         //当前时间 = 音乐总时长*百分比
            _currentTimeBox[0].innerText = _music.secondToDate(_currentTime); //当前时间节点内容 =  分:秒
        };

        var _progressDragUp = function (e) {
            _audio[0].currentTime = _currentTime;                    //当前时间重新赋值
            _barFlag = true;                                      //拖拽后松开时 时间球跟随声音播放向前移动
            _progressBall.unbind('touchmove', _progressDrapMove); //删除 touchmove的监听事件
            _progressBall.unbind('touchend', _progressDragUp);    //删除touchend的监听事件
        };

        var _oX = parseFloat(_progressBall.css("left")); //获取鼠标按下时音量球的坐标
        _progressBall.bind('touchmove', _progressDrapMove);
        _progressBall.bind('touchend', _progressDragUp)
    });
};

/**
* 音乐按钮切换(上一首 下一首)
*/
U.MT.UI.Music.switchMusic = function () {              //声音按钮切换
    var _music = U.MT.UI.Music;          //简写命名空间
    var _attr = _music.Attr;      //简写全局属性
    var _audio = U.selectEl("#U_MT_UI_Music_audio"); //audio标签
    var _rightBtn = U.selectEl("#U_MT_UI_Music_rightBtn"); //获取下一首的按钮
    var _leftBtn = U.selectEl("#U_MT_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.MT.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.MT.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;
};