灵感的由来是前些天看到了博: 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(); /**********歌曲列表***************/
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=; return this.each(function() { /*******音频处理操作********/
var ExcuteAudioCommon = {
//播放进度条的转变事件
DurationProcessRange:function (rangeVal) {
audio.currentTime = rangeVal * audio.duration;
audio.play();
},
//获得总的时间刻度
TimeSpan:function() {
var ProcessYet = ;
var _this = this;
setInterval(function () {
var ProgressYet = (audio.currentTime / audio.duration) * ;
$(".ProgressYet").css("width", ProgressYet);
var currentTime = _this.timeDispose(audio.currentTime);
var timeAll = _this.timeDispose(_this.TimeAll());
$(".SongTime").html(currentTime + " | " + timeAll);
}, );
},
//将时长计算成分秒
timeDispose: function (number) {
var minute = parseInt(number / );
var second = parseInt(number % );
minute = minute >= ? minute : "" + minute;
second = second >= ? second : "" + second;
return minute + ":" + second;
},
//获取音频总时长
TimeAll: function () {
return audio.duration;
}
} /*******上一曲**********/
$(this).find(".LeftControl").click(function(){
CreateSongStart(pointerInt=pointerInt==?:pointerInt-);
$("#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,);
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-)?pointerInt:pointerInt+);
$("#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>=&&(songDefualtSettings.length-)!=pointerInt)?++pointerInt:);
$("#MainControl").data("play")==="off"&&audio.play()&&ExcuteAudioCommon.TimeSpan();
}, false);
})
}
})(jQuery);

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

  1. 一款非常简单的android音乐播放器源码分享给大家

    一款非常简单的android音乐播放器源码分享给大家,该应用虽然很小,大家常用的播放器功能基本实现了,可能有点还不够完善,大家也可以自己完善一下,源码在源码天堂那里已经有了,大家可以到那里下载学习吧. ...

  2. ubuntu下一款有点感觉的 linux音乐播放器 clementine(小橘子))

    https://www.clementine-player.org/ 在linux听音乐的感觉确实不是很好,音乐播放器很多.但是仅仅只是数量上的优势,在确实不是很好用.自带的rhythmbox确实很占 ...

  3. 简单风格 在线音乐播放器(支持wav,MP3等)

    找了两天终于找到了,支持wav,MP3,其他格式没有测试. 1.修复了jQuery判断ie的bug, 2.修复播放循环 下载地址: http://pan.baidu.com/s/1o6upwHs

  4. 躁!DJ 风格 Java 桌面音乐播放器

    本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 版桌面 DJ 音乐播放器. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列 ...

  5. [ 原创 ]学习笔记-做一个Android音乐播放器是遇到的一些困难

    最近再做一个安卓的音乐播放器,是实验室里学长派的任务,我是在eclipse上进行开发的,由于没有android的基础,所以做起来困难重重. 首先是布局上的困难 1.layout里的控件属性不熟悉 2. ...

  6. pygame系列_原创百度随心听音乐播放器_完整版

    程序名:PyMusic 解释:pygame+music 之前发布了自己写的小程序:百度随心听音乐播放器的一些效果图 你可以去到这里再次看看效果: pygame系列_百度随心听_完美的UI设计 这个程序 ...

  7. C# 一款属于自己的音乐播放器

    本文利用C# 调用Windows自带的Windows Media Player 打造一款属于自己的音乐播放器,以供学习分享使用,如有不足之处,还请指正. 概述 Windows Media Player ...

  8. 用PHP+H5+Boostrap做简单的音乐播放器(进阶版)

    前言:之前做了一个音乐播放器(纯前端),意外的受欢迎,然后有人建议我把后台一起做了,正好也想学习后台,所以学了两天php(不要吐槽我的速度,慢工出细活嘛~)然后在之前的基础上也又完善了一些功能,所以这 ...

  9. C#做音乐播放器时在自动下一曲中报异常的解决办法

    ---------------------- ASP.Net+Unity开发..Net培训.期待与您交流! ---------------------- 在利用Media Player做音乐播放器的时 ...

随机推荐

  1. For和While在C和MATLAB中的区别——MATLAB的大坑

    For和while是常见的循环关键字,在许多语言中都是通用的.但是想必不是所有人,都被其中的区别困扰过,尤其是MATLAB“程序员”. x=[,,,,,,]; i=; while i<=leng ...

  2. 如何使用Xcode6 调试UI,Reveal

    实际测试需要使用IOS8并且32-bit的设备:具体打开调试的方法有三种: 1.底部调试菜单中: 2,debug菜单中 3.debug navigator 中

  3. 01-04-01【Nhibernate (版本3.3.1.4000) 出入江湖】原生的SQL查询

    Nhibernate 支持原生的SQL查询 : /// <summary> /// 使用原生的SQL查询 /// </summary> /// <param name=& ...

  4. httpsClient抓取证书

    在执行webservice的过程中,出现如下异常: javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorExcep ...

  5. EF提供的三种查询方式

    這邊簡單介紹一下,ADO.Net Entity Framework 提供的三種查詢方式, Linq to Entities Query Builder Mothed Entity SQL Langua ...

  6. windows service 安装和卸载指令

    添加服务: cd C:\Windows\Microsoft.NET\Framework\v4.0.30319InstallUtil.exe D:\OneKeyWebSiteDeployment\Ser ...

  7. [优先队列]HDOJ5289 Assignment

    题意:有多少个区间,区间内最大的数减去最小的数差小于k 对每个数它所在的区间,可以只往前找(类似dp的无后效性) 比如对位置3的数,可以往前找的区间是[3, 3], [2, 3], [1, 3], [ ...

  8. PKUSC 模拟赛 day1 上午总结

    思考了一下第二题,觉得有无数种乱搞做法 类似什么bitset压位,MCS染色之类奇怪的做法 然而都是玄学正确性或者玄学复杂度 先放题解把 第一题显然具有单调性,二分就可以啦 O(nlogn),貌似输出 ...

  9. lintcode:在二叉查找树中插入节点

    题目:  在二叉查找树中插入节点 给定一棵二叉查找树和一个新的树节点,将节点插入到树中. 你需要保证该树仍然是一棵二叉查找树.  样例 给出如下一棵二叉查找树,在插入节点6之后这棵二叉查找树可以是这样 ...

  10. *[codility]Fish

    https://codility.com/demo/take-sample-test/fish 一开始习惯性使用单调栈,后来发现一个普通栈就可以了. #include <stack> us ...