专栏首页web编程技术分享《从案例中学习JavaScript》之酷炫音乐播放器(二)

《从案例中学习JavaScript》之酷炫音乐播放器(二)

上一节传送门:http://www.jianshu.com/p/14dd440a8bc3

本节实现了:

  • 歌曲切换
  • 图标转动
  • 显示歌曲信息

Paste_Image.png

下一节计划:

  • 添加音轨
  • 进度条

Paste_Image.png

小demo已经写好,不用担心跳票啥的。

继续上一节的内容,我们在绘制好播放器的雏形之后,就可以考虑将一些工具性质的方法封装起来了,比如,我们多次用到dom和_center方法,不如将它们归为一类,做为一个工具包来调用。

上代码:

var utils = {
    _center : function(dom){
        dom.style.position = 'absolute';
        dom.style.top = '50%';
        dom.style.left = '50%';
        dom.style['margin-top'] = - dom.offsetHeight / 2 + 'px';
        dom.style['margin-left'] = - dom.offsetWidth / 2 + 'px';
    },
    
    dom : function(id){
        if(id.toString().indexOf('#') != -1) {
            id = id.replace('#','');
        }
        return document.getElementById(id);
    },
}

然后我们就可以这样调用了:

var musicDom = utils.dom('#music'); 
var musicIcon = utils.dom('#music-icon');
utils._center(musicDom);    
utils._center(musicIcon);

util是工具的意思,这样是不是清晰多了呢?

然后进行js打包:

Paste_Image.png

引入:

<script type="text/javascript" src="js/util.js"></script>

用闭包的形式将util包裹起来,再挂在window对象下面,以防止命名重复。一个简单的工具包就这样做好啦!

;(function(win){
    var utils = {
        _center : function(dom){
            dom.style.position = 'absolute';
            dom.style.top = '50%';
            dom.style.left = '50%';
            dom.style['margin-top'] = - dom.offsetHeight / 2 + 'px';
            dom.style['margin-left'] = - dom.offsetWidth / 2 + 'px';
        },
        
        dom : function(id){
            if(id.toString().indexOf('#') != -1) {
                id = id.replace('#','');
            }
            return document.getElementById(id);
        },
    }
    
    win.utils = utils;
})(window);

同时,我们把css也单独整出去,不要放在页面里,那样会显得页面特别庞大,页面应该整洁和精简。当一个模子画出来之后,我一般都会将css整出去。

.music {
    width: 200px;
    height:300px;
    background:#333;
    border-radius: 5px;
    box-shadow: 3px -3px 1px #666;
    position: relative; /*center方法已经将position设置为absolute了,这一行不起作用*/
}
.music .screen {
    height:70%;
    width:96%;
    background: linear-gradient(#403d3d,65%,#5f5b5b);
    margin-left:2%;
    margin-top: 2%;
    position: relative;
    
}

.music .screen i {
    color:#fff;
    font-size: 88px;
}

.music .buttons i {
    color:#fff;
    font-size: 24px;
    margin-left: 28px;
    position: relative;
    top:25px;
}

.music .buttons i:hover {
    cursor: pointer;
}


.music .buttons {
    height:25%;
    width:96%;
    margin-left:2%;
    margin-top: 2%;
}

Paste_Image.png

<link rel="stylesheet" type="text/css" href="css/index.css"/>

这样一来,页面就简洁多了!

接下来,让我们愉快地开发功能吧!

1. 开始和暂停按钮之间的切换

/* 获取开始按钮 */
var playDom = utils.dom('#play');

然后,给它绑定一个点击事件

playDom.onclick = function(){
    alert('play');
}

Paste_Image.png

这说明绑定事件成功了。

将暂停按钮加上去,默认是隐藏的。

上一节中出现了图标编码格式冲突的问题,因此我把iconfont的引入改成了下面的方式:

<i id='pause' class="iconfont icon-zanting" style="display:none"></i>

按钮切换的逻辑代码:

/* 获取开始按钮 */
var playDom =  utils.dom('#play');
/* 获取暂停按钮 */
var pauseDom = utils.dom('#pause');

playDom.onclick = function(){
    this.style.display = 'none';
    pauseDom.style.display = 'inline';
}

pauseDom.onclick = function(){
    this.style.display = 'none';
    playDom.style.display = 'inline';
}

效果(截屏效果一般,渐变色没显示,大伙先将就着看吧):

222.gif

2. 音乐播放和暂停

还记得上一节封装的musicBox对象吗?

播放和暂停的核心方法是这样的:

play : function(index){
    this.musicDom.src = this.songs[index];
    this.musicDom.play();
},

//暂停音乐
stop : function(){
    this.musicDom.pause();
},

3. 代码重构和歌曲切换的实现

今天,我对musicBox进行了一次简单的重构,代码如下:

var musicBox= {
    
    musicDom : null, //播放器对象
    songs : [],      //歌曲目录,用数组来存储
    index : 0,       //当前播放的歌曲索引
    
    //初始化音乐盒
    init : function(themeIndex){
        this.musicDom = document.createElement('audio');
        document.body.appendChild(this.musicDom);
    },
    
    //添加一首音乐
    add : function(src){
        this.songs.push(src);
    },
    
    //根据数组下标决定播放哪一首歌
    play : function(){
        this.musicDom.src = this.songs[this.index];
        this.musicDom.play();
        
    },
    
    //暂停音乐
    stop : function(){
        this.musicDom.pause();
    },
    
    //下一首
    next : function(){
        var len = this.songs.length;
        //判断是否是有效的索引
        if((this.index + 1) >= 0 && this.index < len){
            this.index ++;
            //如果已经是最后一首,就跳到第一首
            if(this.index == len){ 
                this.index = 0;
            }
            this.play();
        }
    },
    
    //上一首
    prev : function(){
        var len = this.songs.length;
        //判断是否是有效的索引
        if((this.index + 1) >= 0 && this.index  < len){
            //如果已经是第一首,就跳到最后一首
            if(this.index == 0){
                this.index = len;
            }
            this.index --;
            this.play();
        }
    }
    
}

不同点如下: 1.添加音乐索引index,取消了play方法的参数。 2.实现了上一首和下一首的逻辑代码 3.默认音乐为第一首

顺便添加了几首音乐。

Paste_Image.png

现在我们就来调用看看吧,当点击播放按钮的时候,就播放指定的歌曲。点击暂停按钮就停止播放。

4. 测试

var musicDom = utils.dom('#music'); 
var musicIcon = utils.dom('#music-icon');
utils._center(musicDom);    
utils._center(musicIcon);


musicBox.init(); //初始化
musicBox.add('mp3/火影忍者主题曲.mp3');
musicBox.add('mp3/曲婉婷 - 我的歌声里.mp3');
musicBox.add('mp3/夜空中最亮的星.mp3');
musicBox.add('mp3/班得瑞 - 雪之梦.mp3');
musicBox.add('mp3/超级好听的龙猫轻音乐.mp3');
/* 获取开始按钮 */
var playDom =  utils.dom('#play');
/* 获取暂停按钮 */
var pauseDom = utils.dom('#pause');
/* 获取下一首按钮 */
var nextDom = utils.dom('#next');
/* 获取上一首按钮 */
var prevDom = utils.dom('#prev');

//播放按钮
playDom.onclick = function(){
    this.style.display = 'none';
    pauseDom.style.display = 'inline';
    //播放音乐
    musicBox.play();
}

//暂停按钮
pauseDom.onclick = function(){
    this.style.display = 'none';
    playDom.style.display = 'inline';
    musicBox.stop();
}

//下一首
nextDom.onclick = function(){
    musicBox.next();
    //当直接点击下一首的时候,同时改变播放按钮为暂停的样式
    playDom.style.display = 'none';
    pauseDom.style.display = 'inline';
}

//上一首
prevDom.onclick = function(){
    musicBox.prev();
    //当直接点击下一首的时候,同时改变播放按钮为暂停的样式
    playDom.style.display = 'none';
    pauseDom.style.display = 'inline';
}

成功运行起来了,虽然有声音,但是还看不出屏幕的变化,所以,接下来,我们做一点有趣的事情。

5. 随着歌曲的播放,让音乐图标转动起来

关于这个,就需要用到css3的一个知识点了,就是关键帧。因为不是专门开贴讲解css3,所以这边我就简单说明一下了。

像这样:

@keyframes move{
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}
.r {
    animation: move 1s linear infinite;
}

简单来说,就是我们定义了一个名字叫r的class,动画效果采用名字叫move的关键帧。transform是转换的意思,因为英文词根trans就有从一个状态变到另一个状态的涵义,这是比较好理解的,而deg是角度的意思。

@keyframes move{
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}

用以上这段代码,我们制作了一个关键帧动画,名字叫move,它将一个元素的位置从0度变化到360度,就是转了一圈。

.r {
    animation: move 1s linear infinite;
}
  • liner表示线性,这个属性会让拥有该class的dom元素连续地旋转。
  • infinite表示不停止、无限,不然的话转一圈就结束了。

现在,我们给音乐图标加上转动样式:

<i id='music-icon'  class="iconfont icon-yinle r"></i>

在这里我去掉了该元素的定位方法,而继续采用css的方式来居中。

.music .screen i {
    color:#fff;
    font-size: 88px;
    position: absolute;
    left: 50%;
    top : 50%;
    margin-left: -40px;
    margin-top: -48px;
}
截图原因,效果看起来不咋地,其实它的转动是非常平滑的,我也不清楚为啥截图后变成了这个样子。

rotate.gif

终于转起来了,核心的操作就是给图标添加一个css类而已。

现在,我们希望在点击开始按钮的时候,就转动图标。点击暂停就移除转动的css类。

先给util工具包扩展下面这几个方法:

/*判断dom元素是否拥有某个class类*/
hasClass : function(obj, cls) {
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
        },  
 
/*给dom元素增加某个class类*/
addClass : function(obj, cls) {  
     if (!this.hasClass(obj, cls)) obj.className += " " + cls;  
},  

/*移除dom元素中的某个class类*/
removeClass : function(obj, cls) {  
    if (this.hasClass(obj, cls)) {  
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
        obj.className = obj.className.replace(reg, ' ');  
    }  
},  

/*该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。*/
toggleClass : function(obj,cls){  
    if(hasClass(obj,cls)){  
        removeClass(obj, cls);  
    }else{  
        addClass(obj, cls);  
    }  
}

6. 重写后的按钮事件

//播放按钮
playDom.onclick = function(){
    this.style.display = 'none';
    pauseDom.style.display = 'inline';
    utils.addClass(musicIcon,'r');
    //播放音乐
    musicBox.play();
}

//暂停按钮
pauseDom.onclick = function(){
    this.style.display = 'none';
    playDom.style.display = 'inline';
    utils.removeClass(musicIcon,'r');
    musicBox.stop();
}

//下一首
nextDom.onclick = function(){
    musicBox.next();
    //当直接点击下一首的时候,同时改变播放按钮为暂停的样式
    playDom.style.display = 'none';
    pauseDom.style.display = 'inline';
    utils.addClass(musicIcon,'r');
}

//上一首
prevDom.onclick = function(){
    musicBox.prev();
    //当直接点击下一首的时候,同时改变播放按钮为暂停的样式
    playDom.style.display = 'none';
    pauseDom.style.display = 'inline';
    utils.addClass(musicIcon,'r');
}

效果:

audio.gif

7. 显示正在播放的音乐

.music .info {
    position: absolute;
    display: inline-block;
    width: 80%;
    height: 30px;
    left: 15px;
    top: 20px;
    text-align: center;
    color: #eee;
    font-family:黑体;
    font-size: 14px;
}
<div id='music' class='music'>
    <div class='screen'>
        <i id='music-icon'  class="iconfont icon-yinle"></i>
    </div>
    <div class='buttons'>
        <i id='prev' class="iconfont icon-icon"></i>
        <i id='play' class="iconfont icon-bofanganniu"></i>
        <i id='pause' class="iconfont icon-zanting" style="display:none"></i>
        <i id='next' class="iconfont icon-icon1"></i>
    </div>
    <span id='info' class='info'></span>
    
</div>

然后在musicBox对象中添加一个获取歌曲信息的方法:

/*获取当前歌曲的信息*/
getCurrentSong : function(){
    var info = this.songs[this.index];
    info = info.split('/')[1];
    info = info.split('.')[0];
    return '正在播放:' + info;
}

然后,在按钮的点击事件中,只需要加上下面的代码,即可获取实时的歌曲信息啦!

先获取信息栏:

/* 获取歌曲的信息栏 */
var infoDom = utils.dom('#info');

改写按钮点击的事件:

infoDom.innerHTML = ''; //先清空上一次的信息
infoDom.innerHTML = musicBox.getCurrentSong();//显示当前的歌曲信息

效果:

Paste_Image.png

这一节到此告一段落了,下一节,我们来做音轨。

悠闲的午后,品着刚泡好的茶

tea.jpeg

听着美妙的音乐,也是一种享受吧。

20120912165608_S5Z2S.jpg

享受编程的乐趣,怀着感恩的心去体会每一天生活中的细节。

本章结束 ...

剽悍一小兔,电气自动化毕业。 参加工作后对计算机感兴趣,深知初学编程之艰辛。 希望将自己所学记录下来,给初学者一点帮助。

免责声明: 博客中所有的图片素材均来自百度搜索,仅供学习交流,如有问题请联系我,侵立删,谢谢。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【H5 音乐播放实例】第一节 音乐详情页制作(1)

    剽悍一小兔
  • js常用方法和一些封装(2) -- 随机数生成

    剽悍一小兔
  • 用SpringBoot搭建简单电商项目 01

    剽悍一小兔
  • 【Flutter 专题】56 自定义 BubbleWidget 气泡插件

    和尚在学习时想要用到气泡效果,为了更加灵活,和尚封装了一个简单的气泡插件,方便日常的使用;

    阿策
  • 如何高效地学习编程语言

    这是Clojure好书《Clojure for the Brave and True》作者 Daniel Higginbotham 写于2017年4月16日的博...

    Albert陈凯
  • 【产品新闻】智能钛TI-ONE助力高校人工智能师资培养

    为推动中国人工智能行业的发展,促进专业人才培养,以及推进人工智能领域一级学科建设,信息技术新工科产学研联盟联合腾讯公司于10月29日,在南京大学开展了高等院校人...

    腾讯智能钛AI开发者
  • 沪江:React Native三端融合应用实践

    摘要 ReactNative给前端提供了一套两端共用代码和快速实现热更新的框架,但在实际落地中,需要进行大量的保障工作和优化工作来让业务能够平稳上线,另一方面,...

    IT大咖说
  • 吴恩达最近比较神秘,但他的老师MJ刚宣布了加盟蚂蚁金服

    大数据文摘
  • 关于MPLS和Vlan隔离技术的思考

      网络环境中,为了隔离和划分的网络,避免网络间的相互干扰和广播风暴,定义了多种形式的隔离方式。有基于硬件设备的隔离和网络协议的隔离,还有子网网段的隔离(子网掩...

    sofu456
  • 获千万投资的日本村,三拼域名添助力

    日本的樱花、日本的温泉、日本的动漫、日本的日料等等等使得越来越多的人对日本心生旅游之心,渐渐的人们对日语也有了一定的了解。近日,在线日语培训机构日本村...

    躲在树上的域小名

扫码关注云+社区

领取腾讯云代金券