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实现音乐播放器 - 编程知识库
您可能还会对这些文章感兴趣
2016-12-16 493次前端开发HTML5本地存储总结
前端开发中,我们经常接触到浏览器,谈到浏览器,自然会想到有些页面之间是怎么共享数据的,怎么保存数据的,今天就来解决这个用户痛点。SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对!。 区别在于前两者...
2016-12-15 851次HTML5画出五星红旗
源码: <!DOCTYPE html> <html> <head> <meta charset=”gbk”> <title>中国标准国旗</title> </head> <body> <canvas id=”canvas” width=”600″ height=”400″&g...
2015-04-30 3,406次css3实现图片比例缩放,左右垂直居中显示
实现图片在指定容器内等比例缩放,并控制中上下左右居中,以前可以通过javascript 加css2 的办法来控制。 随着css3的普及,现在介绍一种单纯通过css来进行控制。 <!html> <head> <meta charset="utf-8"> <title> css3 图片等...
2014-11-28 4,332次css3几何图形、多边图形shape研究
前言 估计大家在日常工作中都会用到css形状,但是目前天朝中使用到最多的估计就是圆(circle)、椭圆(ellipse)、各种三角形形状,但是你肯定很少看见过用几何图形或者多边图形。假如你不懂什么叫做几何图形,那么请前往百度百科,就算是我们用:after :before 这些...
大家正在看
- 二类电商是什么意思? 二类电商有哪些?暴利二类电商还好做吗?
- 【二类电商广点通投放指南】二类电商广点通投放值不值
- 密码保护:支付宝突破微信封锁唤起支付宝代码
- Host is not allowed to connect to this MySQL server解决方法
- 密码保护:移动端js自动复制代码
- linux数据库调优,WordPress MySQL占用cpu高数据库优化
- 2017 年十大网页设计趋势
- 网页端的VR实现离我们还远么?
- 最完整的Chrome浏览器客户端调试大全
- iPhone用户人均每天遭电话骚扰1次
- 3G电子化销售服务系统
- Java WeakReference的理解与使用
- 搞清楚 Python traceback
- Referrer 还是 Referer?