html5音乐播放器-audio应用实例

html5

功能介绍

上篇文章介绍了audio的API，这篇文章我以一个具体的例子深入探讨一下这些API的使用。例子就是我博客左下角的那个音乐播放器，模仿了微博上虾米音乐的控件样式。主要的功能就如大家看到的一样：音乐上一首下一首切换，列表循环，音量增减，显示播放进度。

布局

这个自定义的控件上的图标都是bootstrap的字体图标，所以要先引入bootstrap。当然你也可以用font Awesome的图标，改一下类名就好了，font Awesome上的图标更多。

<div class="music">
        <img src="images/poster.jpg" class="poster"/>
        <div class="control">
            <p class="music-title">明明就-周杰伦</p>
            <div class="progress">
              <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
              </div>
            </div>
            <span class="time">4.25</span>
            <span class="glyphicon glyphicon-step-backward" id="backward"></span>
            <span class="glyphicon glyphicon-play" id="play"></span>
            <span class="glyphicon glyphicon-step-forward forward" id="forward"></span>
            <span class="glyphicon glyphicon-volume-up" id="mute"></span>
            <input type="range" id="volume" min='0' max='1' step='0.1' value="0.5">
        </div>
    </div>

.music{
        width: 300px;
        height: 100px;
        margin: 50px auto;
        background: #9DF0CA;
        position: relative;
        color: white;
    }
    .control{
        width: 190px;
        position: absolute;
        bottom: 0;
        left: 110px;
    }
    .music span{
      font-size: 22px;
      color: white;
      margin-right: 5px;
      margin-top: 10px;
    }
    .poster{
        float: left;
    }
    .music-title{
        font-size: 18px;
        margin-bottom: 20px;
    }
    .progress{
        margin-bottom: 0px;
        width: 80%;
        height: 3px;
        background: white;
    }
    .progress-bar{
        background: #589FF0;
    }
    span.time{
        font-size: 14px;
        position: absolute;
        right: 0;
        bottom: 27px;
    }
    #volume{
        width: 40px !important;
        position: absolute;
        bottom: 15px;
        right: 20px;
        height: 2px;
        background: white;
        -webkit-appearance:none;
        outline: none;
    }
    #volume::-webkit-slider-thumb{
        -webkit-appearance:none;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: white;
        box-shadow:  0 3px 5px #ccc;
    }

js控制

//音乐资源
    var musicList=[     
        {
            src:'music/jay.mp3',
            title:'明明就-周杰伦'
        },
        {
            src:'music/ad.mp3',
            title:'水边的阿迪丽娜'
        },
        {
            src:'music/anni.mp3',
            title:'安妮的仙境'
        },
        {
            src:'music/summer.mp3',
            title:"One summer's day"
        }
    ];
    var playbtn=$('#play');
	var backward=$('#backward');
    var forward=$('#forward');
	var title=$(".music-title");
    var mute=$("#mute");
	var volume=$("#volume");
    var i=0;//当前音乐索引
    var audio=new Audio();
    audio.src=musicList[0].src;
    title.text(musicList[0].title);
    playbtn.click(function(event) {
        play(); 
    });
    function play(){
        if (audio.paused===true) {//如果没有播放音乐 
            $('#play').removeClass('glyphicon-play').addClass('glyphicon-pause');
	    	audio.play();
    	}else{//如果正在播放音乐
    		$('#play').removeClass('glyphicon-pause').addClass('glyphicon-play');
            audio.pause();
        };
    }
   //上一首
    backward.click(function(event) {
        i--;
        if (i<0) i=musicList.length-1;
        changeStaus();
    });
   //下一首
    forward.click(function(event){
        i++;
        if (i>musicList.length-1) i=0;
        changeStaus();
    });
    //列表循环
    audio.onended=function(){
        i++;
        if (i>musicList.length-1) i=0;
        changeStaus();
    }
    function changeStaus(){
        audio.src=musicList[i].src;
        title.text(musicList[i].title); 
        $('#play').removeClass('glyphicon-play').addClass('glyphicon-pause');
        audio.play();
    }   
    //静音
    mute.click(function(event) {
    	if (audio.muted==false) {
    		$(this).removeClass('glyphicon-volume-up').addClass('glyphicon-volume-off');
    	    audio.muted=true;
    	}else{
    		$(this).removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up');
            audio.muted=false;
        }
    });
    //调节音量
    volume.mousemove(function(event) {
        audio.volume=$(this).val();
        if (audio.volume==0) {
            mute.removeClass('glyphicon-volume-up').addClass('glyphicon-volume-off');
        }else{
            mute.removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up');
        }
    });
    //更新进度条
    audio.ontimeupdate=function(){
        var width=audio.currentTime/audio.duration*100+'%';
        var time=((audio.duration-audio.currentTime)/60).toFixed(2);//剩下的时间
        $('.progress-bar').width(width);
    	$('.time').text(time);
    }

总结

audio让制作播放器变得十分简单，主要是绑定事件。关于循环的方式我只写了列表循环，其他的循环方式都比较简单了，自己扩展。还有一个功能没有做，进度条拖动功能，如果可以跳跃播放就更妙了，以后再写吧。