html5 audio实现音乐播放器

封装一个 html5 audio 接口的 音乐播放器。html5 的音频接口，传统借助插件才能播放的时代逐渐走向历史的档案。调用其API 简单实现一个可以播放控制的播放器。目前仅实现了播放控制，进度条定位。至于开慢进，音量大小，专辑播放，歌词显示等暂时不弄。

audio 相关的 api

<audio src=”音频的地址”>备用（当浏览器不支持audio时显示的内容）</audio>

控制函数功能说明

• load()   加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载
• play()    加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放
• pause() 暂停处于播放状态的音频、视频文件

audio 的只读媒体特性有：

只读属性属性说明

• duration   获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
• paused     如果媒体文件被暂停，则返回true，否则返回false
• ended       如果媒体文件播放完毕，则返回true
• startTime  返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并一部分内容已经不在缓冲区
• error          在发生了错误后返回的错误代码
• currentSrc  以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件

 

audio 可脚本控制的特性值：

• autoplay       自动播放已经加载的的媒体文件，或查询是否已设置为autoplay
• loop              将媒体文件设置为循环播放，或查询是否已设置为loop
• currentTime 以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置
• controls        显示或者隐藏用户控制界面
• volume         在0.0到1.0间设置音量值,或查询当前音量值
• muted           设置是否静音
• autobuffer     媒体文件播放前是否进行缓冲加载，如果设置了autoplay，则忽略此特性

对于这些属性，主流的浏览器都支持。可是别以为就没有了兼容性，在音频播放流中，有两个阵营。firefox 和 opera 支持 ogg 音频，safari 和 ie 支持 mp3.幸好Google的chrome都支持。

前台页面结构

<audio id="media" src="Just A Kiss.mp3"></audio>
<!--start audio-->
<div class="pregrass">
    <div id="pregrassbg">
        <div id="pregrasscolor"></div>
    </div>
    <span id="playTime">0:00</span>
    <span id="surplusTime">-0:00</span>
</div>
                                                                      
<div class="controls">
    <span id="play" class="on"></span>
</div>
<!--end audio-->

JavaScript：

$('document').ready(function() {
    //---------------------------------------------初始化
    var mediaSource = [{
        title: '浮光掠影',
        srcMedia: 'ablum/浮光掠影.mp3'
    }, {
        title: 'Just A Kiss',
        srcMedia: 'ablum/Just A Kiss.mp3'
    }, {
        title: '关忆北',
        srcMedia: 'ablum/关忆北.mp3'
    }, {
        title: '知足',
        srcMedia: 'ablum/知足.mp3'
    }, {
        title: 'wish',
        srcMedia: 'ablum/wish.mp3'
    }, {
        title: '当我离开你的时候',
        srcMedia: 'ablum/当我离开你的时候.mp3'
    }];
  
  
    var init = function() {
  
            var initData = {
                media       : '#media',
                xStart      : '#pregrassbg',
                bgWidth     : '#pregrassbg',
                oplay       : '#play',
                precolor    : '#pregrasscolor',
                playTime    : '#playTime',
                surplusTime : '#surplusTime',
                plist       : '#plist',
                title       : '#title',
                autoPlay    : true,
                meSou       : mediaSource
            }
            //创建音频对象
            mymedia = new PlayAudio(initData);
  
            //绑定播放暂停控制
            $('#play').bind('click', function() {
                mymedia.playAudio();
            });
            //绑定定位歌曲控制
            $('#pregrassbg').bind('click', function(e) {
                mymedia.localProgress(e);
            });
            //绑定列表播放
            $('#plist li').live('click', function(e) {
                mymedia.chooseMedia($(this));
            });
            //绑定音频播放结束
            $('#media').bind('ended', function() {
                mymedia._ended();
            })
            $('#prev').bind('click', function() {
                mymedia.prevMedia();
            })
            $('#next').bind('click', function() {
                mymedia.nextMedia();
  
            })
            //载入window 时初似乎定时器
            $(window).bind('load', function() {
                mymedia.openInter();
                mymedia.loadWindow();
            })
        }()
        //----------------------------------------------音频播放构造函数
  
    function PlayAudio(initObj) {
  
        this.media       = $(initObj.media)[0];
        this.xStart      = $(initObj.xStart).offset();;
        this.bgWidth     = $(initObj.bgWidth).width();;
        this.oplay       = $(initObj.oplay);;
        this.precolor    = $(initObj.precolor);
        this.playTime    = $(initObj.playTime);
        this.surplusTime = $(initObj.surplusTime);
        this.plist       = $(initObj.plist);
        this.title       = $(initObj.title);
        this.autoPlay    = initObj.autoPlay;
        this.meSou       = initObj.meSou;
        this.mediaLength = this.meSou.length;
          
        that             = this;
        this.timer       = null;
        this.mediaIndex  = 0;
        //window改变是处理播放条位置
        $(window).bind("resize", function() {
            that.xStart = $('#pregrassbg').offset();
        });
    }
    //===============================================播放暂停控制
    PlayAudio.prototype.playAudio = function() {
        if(this.media.paused) {
            this._play(this.oplay);
        } else {
            this._pause(this.oplay)
        }
    }
    //===============================================定位歌曲的方法    
    PlayAudio.prototype.localProgress = function(e) {
        this._play(this.oplay);
        var scale = (e.pageX - this.xStart.left) / this.bgWidth;
        var duraTimes = this.media.duration;
        this.media.currentTime = duraTimes * scale;
        this.precolor.width(this.bgWidth * scale);
    }
    //===============================================开启定时器，更像进度条
    PlayAudio.prototype.openInter = function() {
        if(this.timer != null) {
            clearInterval(this.timer);
        }
        var _this = this; //定时器会改变 this
        this.timer = setInterval(function() {
            _this._update();
        }, 1000);
    }
    //==============================================更新入口
    PlayAudio.prototype._update = function() {
        this._updateProgress();
        this._updatTime();
    }
    //===============================================进度条更新方法
    PlayAudio.prototype._updateProgress = function() {
        var duraTime = media.duration;
        var curTime  = media.currentTime;
        var scale    = curTime / duraTime;
        this.precolor.width(this.bgWidth * scale);
    }
    //===============================================时间更新方法
    PlayAudio.prototype._updatTime = function() {
        var duraTime = media.duration;
        var curTime  = media.currentTime;
        if(duraTime == NaN) {
            duraTime = 0;
        }
        var leftTime  = parseInt(curTime);
        var rughtTime = parseInt(duraTime - curTime);
        this.playTime.html(this._converToTime(leftTime));
        this.surplusTime.html(this._converToTime(rughtTime));
    }
    //===============================================播放函数
    PlayAudio.prototype._play = function(obj) {
        this.media.play();
        this.title.siblings().text('正在播放：');
        this.openInter();
        obj.attr('class', 'pause');
    }
    //===============================================暂停函数
    PlayAudio.prototype._pause = function(obj) {
        this.media.pause();
        clearInterval(this.timer);
        obj.attr('class', 'on');
    }
    //===============================================播放完毕
    PlayAudio.prototype._ended = function() {
        if(this.autoPlay) {
            this.mediaIndex++;
            if(this.mediaIndex == this.mediaLength) {
                alert('已经是最后一首了');
                this._endedStyle();
                return;
            }
            this._playlist(this.mediaIndex);
        } else {
            this._endedStyle();
        }
    }
    //==============================================
    PlayAudio.prototype._endedStyle = function() {
        this.precolor.width(0);
        this.surplusTime.html(this._converToTime(parseInt(media.duration)));
        this._pause(this.oplay);
        this.playTime.html('0:00');
    }
    //===============================================选择列表列表
    PlayAudio.prototype.chooseMedia = function(obj) {
        var item = obj.attr('data-index');
        this.mediaIndex = item;
        this._playlist(item);
    }
    //===============================================上一曲
    PlayAudio.prototype.nextMedia = function() {
        this.mediaIndex++;
        if(this.mediaIndex == this.mediaLength) {
            alert('已经是最后一首了');
            this._pause(this.oplay);
            this.mediaIndex = this.mediaLength - 1;
            return;
        }
        this._playlist(this.mediaIndex);
    }
    //===============================================下一曲
    PlayAudio.prototype.prevMedia = function() {
        if(this.mediaIndex == 0) {
            alert('已经是第一首了');
            this._pause(this.oplay);
            this.mediaIndex = 0;
            this.flag = true;
            return;
        }
        this.mediaIndex--;
        this._playlist(this.mediaIndex);
    }
    //================================================窗口初始化,生成列表
    PlayAudio.prototype.loadWindow = function() {
        this.media.src = this.meSou[0].srcMedia;
        var html = '';
        for(var item in this.meSou) {
            html += '<li data-index="' + item + '">' + this.meSou[item].title + '</li>';
        }
        this.plist.append(html);
        this.title.text(this.meSou[0].title);
        this.plist.children().eq(0).css({
            'background': '#eee',
            'color': '#f80'
        });
    }
    //================================================更新 url 地址函数
    PlayAudio.prototype._playlist = function(currIndex) {
        this.media.src = this.meSou[currIndex].srcMedia;
        this._play(this.oplay);
        this.plist.children().eq(currIndex).css({
            'background': '#eee',
            'color': '#f80'
        }).siblings().css({
            'background': '#fff',
            'color': '#000'
        });
        this.title.text(this.meSou[currIndex].title);
    }
    //================================================工具函数，将秒转换为分钟
    PlayAudio.prototype._converToTime = function(time) {
        //将剩余秒数转化为分钟
        var min = Math.floor((time / 60) % 60);
        //将剩余秒数转化为秒钟
        var sec = Math.floor(time % 60);
        var cTime;
        if(sec < 10) {
            sec = '0' + sec;
        }
        cTime = min + ':' + sec
        return cTime;
    }
})

———————————————————————————————

之前是写了一个纯过程，然后再封装成一个oop的方式。。。比较让我郁闷的是事件绑定的时候，有的时候是直接绑定事件处理函数，如果事件需要传参数，则需要绑定一个匿名函数，再在匿名函数内运行带参数的事件处理程序。如果需要传入事件对象，还需要在匿名函数中传入e。对应的事件处理函数则可以返回一个 闭包。如下：

$('#pregrassbg').bind('click',localProgress('#play'));
function localProgress(obj){
    return function(e){
        _play(obj);
        var scale = (e.pageX-xStart.left) /  bgWidth;
        var duraTimes = media.duration;
        media.currentTime = duraTimes * scale;
        $('#pregrasscolor').width(bgWidth * scale);
    }
}

或者

//绑定定位歌曲控制
$('#pregrassbg').bind('click',function(e){
    mymedia.localProgress(e);   
});                                                      
//===============================================定位歌曲的方法    
PalyAudio.prototype.localProgress = function(e){
    this._play(this.oplay);
    var scale = (e.pageX-this.xStart.left) /  this.bgWidth;
    var duraTimes = this.media.duration;
    this.media.currentTime = duraTimes * scale;
    this.precolor.width(this.bgWidth * scale);
}

两种方式都比较灵活。
此外，还有 设置定时器的时候，this指针的嫁接改变。如下代码

//===============================================开启定时器，更像进度条
PalyAudio.prototype._openInter = function(){
    if(this.timer != null){
        clearInterval(this.timer);      
    }   
    var _this = this;       //定时器会改变 this， 
    this.timer = setInterval(function(){
        _this._playProgress();
    },1000);
}
//===============================================进度条更新方法
PalyAudio.prototype._playProgress = function(){
    var duraTime = this.media.duration;
    var curTime = this.media.currentTime;
    var scale = curTime / duraTime;
    this.precolor.width(this.bgWidth * scale);  
                                                      
}

如果 不先保存 this。直接在定时器中使用 this ，最终的 _playProgress 方法调用的时候无法取到 this.bgWidth，即构造函数的字段。
播放器界面没有做美化。 异常与错误还没做，下一步完善。

转载请注明：html5 audio实现音乐播放器 - 前端开发