灵感的由来是前些天看到了博: http://www.cnblogs.com/li-cheng 的首页有一个很漂亮的播放器,感觉很不错,是用Flex做的Flash播放器。

于是我也便想到了,自己也来来弄个玩玩。

所以利用1天的时间,通过收集整理,做了一款自己专属的播放器!

播放器实现了以下功能操作:
1:播放、暂停
2:快进、快退
3:上一曲、下一曲
4:单曲循环

效果如下:

奉献JS源码如下:

(function ($) {$.fn.Html5Player = function() {//获取音频API var audio = $('body').find('audio').get(0); /**********歌曲列表***************/var songDefualtSettings=[{"Singer":"火星哥","SongName":"The Lazy Song","img":"./images/火星哥.jpg"},{"Singer":"邓紫棋","SongName":"We Will Rock You","img":"./images/邓紫棋.jpg"},{"Singer":"王菲","SongName":"闷","img":"./images/王菲.jpg"},{"Singer":"梁静茹","SongName":"情歌","img":"./images/梁静茹.jpg"}];/*********当前播放的歌曲**********/var pointerInt=0;return this.each(function() {/*******音频处理操作********/var ExcuteAudioCommon = {//播放进度条的转变事件
                    DurationProcessRange:function (rangeVal) {audio.currentTime = rangeVal * audio.duration;audio.play();},//获得总的时间刻度
                    TimeSpan:function() {var ProcessYet = 0;var _this = this;setInterval(function () {var ProgressYet = (audio.currentTime / audio.duration) * 310;$(".ProgressYet").css("width", ProgressYet);var currentTime = _this.timeDispose(audio.currentTime);var timeAll = _this.timeDispose(_this.TimeAll());$(".SongTime").html(currentTime + " | " + timeAll);}, 1000);},//将时长计算成分秒
                    timeDispose: function (number) {var minute = parseInt(number / 60);var second = parseInt(number % 60);minute = minute >= 10 ? minute : "0" + minute;second = second >= 10 ? second : "0" + second;return minute + ":" + second;},//获取音频总时长
                    TimeAll: function () {return audio.duration;}}/*******上一曲**********/$(this).find(".LeftControl").click(function(){CreateSongStart(pointerInt=pointerInt==0?0:pointerInt-1);$("#MainControl").data("play")==="off"&&audio.play()&&ExcuteAudioCommon.TimeSpan();});/******播放,暂停********/$("#MainControl").click(function() {if($(this).data("play")==="off"){$("#MainControl").removeClass("PlayControl").addClass("StopControl");audio.pause();$(this).data("play","on");}else{$("#MainControl").addClass("PlayControl").removeClass("StopControl");if (audio.src == "") {pointerInt=  parseInt(Math.random()*songDefualtSettings.length,10);CreateSongStart(pointerInt);}audio.play();ExcuteAudioCommon.TimeSpan();$(this).data("play","off");}});function CreateSongStart(SongNumber){var Defaultsong = songDefualtSettings[SongNumber];$(".SongName").text(Defaultsong.SongName);$(".Singer").text(Defaultsong.Singer)$("#singerImg").attr("src",Defaultsong.img);audio.src = "./media/" + Defaultsong.SongName + ".mp3";}/*******下一曲********/$(this).find(".RightControl").click(function(){CreateSongStart(pointerInt=pointerInt==(songDefualtSettings.length-1)?pointerInt:pointerInt+1);$("#MainControl").data("play")==="off"&&audio.play()&&ExcuteAudioCommon.TimeSpan();});/********音频进度条事件(进度增加)*******/$(".Progress").click(function (e) {//----播放进度条的基准参数var Progress = $(".Progress").offset();var ProgressStart = Progress.left;var ProgressLength = $(".Progress").width();var CurrentProces = e.clientX - ProgressStart;ExcuteAudioCommon.DurationProcessRange(CurrentProces / ProgressLength);$(".ProcessYet").css("width", CurrentProces);});/********音频进度条事件(进度减少)********/$(".ProgressYet").click(function (e) {//-----播放进度条的基准参数var Progress = $(".Progress").offset();var ProgressStart = Progress.left;var ProgressLength = $(".Progress").width();var CurrentProces = e.clientX - ProgressStart;ExcuteAudioCommon.DurationProcessRange(CurrentProces / ProgressLength);$(".ProgressYet").css("width", CurrentProces);})//监听媒体文件结束的事件(ended),这边一首歌曲结束就读取下一首歌曲,实现播放上的循环播放audio.addEventListener('ended', function () {CreateSongStart(pointerInt=(pointerInt>=0&&(songDefualtSettings.length-1)!=pointerInt)?++pointerInt:0);$("#MainControl").data("play")==="off"&&audio.play()&&ExcuteAudioCommon.TimeSpan();}, false);})}})(jQuery);

转载于:https://www.cnblogs.com/Kummy/p/3654872.html

原创: 做一款属于自己风格的音乐播放器 (HTML5的Audio新特性)相关推荐

  1. 推荐5款好用的Linux音乐播放器

    适用于 Linux 的音乐播放器可说数不胜数,不同的用户也有各自的喜好.知名且应用广泛的有 Cantata 和 Exaile,不太知名的工具有 Clementine.Nightingale 和 Quo ...

  2. 【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~

    b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...

  3. 推荐5 款好用的 Linux 音乐播放器

    导读 目前 Linux 上有几十个音乐播放器,这使得找到一个最好用的变成很困难.之前我们已经回顾了其中的一些播放器,如 Cantata,Exaile,甚至不那么出名的 Clementine,Night ...

  4. 10款Flash和Javascript网页音乐播放器

    关联:9 Fresh jQuery Media Players 10款音乐播放器, 有基于javascript的网页 音乐播放器,也有基于Flash的音乐播放器.赶快挑一款,分享你喜爱的音乐吧! 1. ...

  5. 自编Win8风格Android音乐播放器应用源码(单机版)

    用闲暇的两天时间,研究编写了一个类Win8风格的android音乐播放器,实现了大部分基本功能.下面看具体描述: 基本实现功能: 注意事项:Android系统版本须在2.2以上,保证手机安装有SD卡( ...

  6. imac html5播放器,超给力的五款Mac最佳高清音乐播放器

    大多数Mac用户喜欢使用iTunes或一些流媒体服务来管理和收听他们的音乐.当然,如果您是喜欢高分辨率音频的发烧友,那么有iTunes就够了.如果您是高保真格式音乐发烧友,则iTunes可能不能满足您 ...

  7. 电脑端音乐播放器html5,原生js的音频播放器,兼容pc端和移动端(原创)

    插件描述:基于原生的音频播放器效果,小巧易用 更新时间:2018/12/10 下午3:08:16 更新说明: 1. 更新demo的音频地址 2. 组件的图片地址使用本地base64的图片格式 更新时间 ...

  8. 【AIMP3】推荐一款Windows下的优质音乐播放器

    这么多年来我一直用酷我,酷狗,QQ音乐过来的,刚开始的时候感觉还不错,界面,皮肤,功能都很好,但是后来就发现广告很多,各种弹窗,而且还有音质的限制.当已经习惯开机打开音乐库听歌的时候,不仅启动慢,有时 ...

  9. 一款简约好看的html5音乐播放器,HTML5 之美:推荐9款优秀的 HTML5 音乐播放器

    过去,在网页上播放音频都是通过第三方插件来播放的,如 Flash.QuickTime 和 Silverlight 等,没有统一的音频播放标准.HTML5 通过 audio 元素来提供在网页中嵌入音频的 ...

最新文章

  1. GitLab设置中文
  2. 构造函数与析构函数到底做了啥?
  3. 转载:VMware虚拟机时钟不准的问题(linux图形界面投影到windows配置参考)--略有修改...
  4. 在Eclipse上安装插件springsource-tool-suite详解,完美不报错!以及yml无自动提示?
  5. 朴素贝叶斯 半朴素贝叶斯_使用朴素贝叶斯和N-Gram的Twitter情绪分析
  6. AtCoder Beginner Contest 084(AB)
  7. ssh中c3p0连接mysql_ssh 中使用c3p0 的连接池配置 | 学步园
  8. HTML高仿哔哩哔哩(B站)视频网站整站模板
  9. LODOP不同打印机出现偏移问题
  10. html分页器的实现原理,Django之分页器
  11. 10款精美的web前端源码的特效
  12. 微信的自动回复接入聊天机器人
  13. Excel vba 调用outlook发送邮件
  14. Python条件语句(if、pass)
  15. pymilvus基操
  16. 架构系列---一套高并发IM通信系统完整设计和实现
  17. TI官网注册账号一直卡人机识别问题
  18. python获取文件夹大小_S3 API for python–创建bucket文件夹统计文件夹大小
  19. uniapp 小程序开发,实现图片直传阿里云的简单方法
  20. 自动控制原理(4)——传递函数、典型环节的传递函数

热门文章

  1. 电脑无法从USB启动可能是 UEFI Secure Boot 在捣鬼!
  2. 没工作的看这里,北京地区要人
  3. mysql 磁盘利用率100_笔记本电脑磁盘利用率一直100怎么解决
  4. 任意阶幻方的c++实现----奇阶幻方、双偶幻方、单偶幻方。
  5. 屏幕小于6英寸的手机_6英寸屏幕真的大么?你可能对“全面屏”有什么误解!详解全面屏手机那些事...
  6. Photoshop学习(二十七):利用反差大的单色通道进行选择
  7. 从0.1开始学Python——[29]
  8. cmd静默start命令打开带空格文件夹或文件(静默自动打开虚拟机)
  9. 【第三方 授权】网页第三方授权
  10. 互联网快讯:科大讯飞回应裁员传闻;极米Z6X Pro、极米H3S出色音画获好评;中国海油正式成立新能源分公司